Custom CSS for viewing a draft page on the frontend?

Question

When viewing a draft page on the frontend, I'd like to see that status right away on the page itself. Currently, there is zero indication. Is there any way to have draft-specific CSS (or even just a header message?)

Answer 1

There is probably a better way but you could add the following CSS to your stylesheet, which will add a little banner when viewing a page that has a status of draft.

.status-draft.hentry:before {
    content: "Previewing a Draft";
    background: #87C5D6 !important;
    display: block;
    text-align: center;
}

You could also use these classes for the different statuses.

.status-pending

.status-publish

.status-future

.status-private

Works for me.

Answer 2

OP here. If the homepage is set to draft, the CSS class used in the chosen answer is not available. Here's what I'm using now to place a diagonal DRAFT watermark, using "CSS and Javascript Toolbox" plugin:

CSS

.draft-watermark{
  position:absolute;
  background:clear;
  display:block;
  min-height:50%; 
  min-width:50%;
  color:lightgrey;
  font-size:500%;
  transform:rotate(310deg);
  -webkit-transform:rotate(310deg);
  z-index: 100;
}
.draft-watermark:before {
  content: "DRAFT DRAFT DRAFT DRAFT";
}

Script in CJToolbox, set to be included on all pages:

<?php if (get_post_status(get_the_ID()) == 'draft'): ?>
<script>
  jQuery(document).ready(function() {
    jQuery('<div class="draft-watermark"></div>').insertBefore(jQuery('div:first'));
  });
</script>
<?php endif; ?>