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?)
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?)
Share Improve this question edited Feb 12, 2019 at 0:33 RiddleMeThis 3,8078 gold badges22 silver badges30 bronze badges asked Feb 11, 2019 at 20:23 Derek IllchukDerek Illchuk 1435 bronze badges 1- No indication when viewing the actual page (i.e. not in the admin panel.) – Derek Illchuk Commented Feb 11, 2019 at 21:09
2 Answers
Reset to default 5There 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.
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; ?>