RH2017 - Can we add a watermark to the help pages in HTML5 output

I did this in RH11 by manually editing my draft master page.

I added a div block just below the closing body placeholder tag:

<div class="draft">      <p>Draft</p> </div>

Then I added the following style to my master page. I put it in the master page so I can have a separate master page for my production output that doesn't include the draft-specific text or formatting.

div.draft { font-size: 20em; opacity: 0.3; filter: Alpha(opacity=30); position: fixed; -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 60%; left: 40%; margin: 0; z-index: 3; }

I had a quick test in RH2019 Classic and I think you'll also need this so that the larger font size is inherited from the div, rather than getting the normal p size. (The layouts are significantly different between RH11 and RH2017/2019, which might explain why I don't need it.)

div.draft p {font-size: inherit;}

You'll definitely need to play with top and left values and probably the font-size values so that it displays correctly with your content.

Oh, and I nearly forgot. Because the draft watermark floats over the top of the page (z-index = 3), you can't click any links that are underneath the watermark. So you need to include this style as well. z-index says to put the item 10 layers "up" from the "background" which means it will be "above" everything else on the page. And you need to explicitly state the position is relative otherwise it doesn't work.

a { position: relative; z-index: 10; }

You might need to do a bit more experimenting, as I'm not on RH2017, so there may be other quirks I'm not aware of.

I think you might be able to do a similar thing with a background image on the body tag, but I haven't played around with that, so I'm not sure how hard or easy that is.