Custom CSS for viewing a draft page on the frontend?
-
14-04-2021 - |
سؤال
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?)
المحلول
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.
نصائح أخرى
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; ?>