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?)
2 Answers
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.