Draft Watermark – XARTA TECH

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.