Found this with a quick google:
…
http://webreflection.blogspot.co.uk/2014/09/a-simple-css-page-watermark.html
As I work on draft articles, especially if they’re involved, I might not want them kept as “draft” within WordPress; I want to see them live on my site straight away. And I don’t currently have a staging server/site for my blog. But I would like to indicate on the site an article’s “draft” status. Well – they’re all “draft” really as I keep returning to things after intervals of months, to tweak, having gained better insight and knowledge in the meantime. Hey ho.
Anyway … tweaking the watermark code for my needs (subject to further ongoing tweaking):
/* http://webreflection.blogspot.co.uk/2014/09/a-simple-css-page-watermark.html */
/* e.g. html:after in example, and: content: "© Water Mark"; */
.draft:after {
/* common custom values */
content: "DRAFT"; /* your site name */
color: rgba(0, 0, 0, .1);
/* alpha, could be even rgba(0,0,0,.05) */
/* rest of the logic */
z-index: 9999;
cursor: default;
display: block;
font-family: sans-serif;
font-weight: bold;
font-style: italic;
text-align: center;
line-height: 100%;
/* not sure about who implemented what ..
... so bring it all */
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
div.draft:after
{
top: 100px;
left: 5%;
position: absolute;
font-size: 320%; /* font size */
}
.entry-content.draft:after {
position: fixed;
right: 0;
bottom: 0;
left: 15%;
top: 33%;
font-size: 720%; /* font size */
}
And now, having gained confidence in editing content-single.php in my child theme, and working with categories e.g.
https://blog.xarta.co.uk/2017/06/adding-the-categories-navigation-menu-to-simone-theme/
https://blog.xarta.co.uk/2017/06/wordpress-theme-tinkering-featured-div-vs-featured-image/
… it seems trivial to amend content-single.php such that if I use a “DRAFT” category as a toggle, I can display the “draft” css for any article having that “DRAFT” category:
<?php
if (has_category('DRAFT'))
{
echo '<div class="entry-content draft">';
}
else
{
echo '<div class="entry-content">';
}
?>
This site is already using http://infolific.com/technology/software-worth-using/ultimate-category-excluder/ – set to exclude “DRAFT” from content.php
I haven’t used CSS3 color blending options yet – not sure if they apply to fixed/absolutely position elements but will investigate some time … e.g. for when I want to show “draft” over something very dark.