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

[Tejas Dandekar]

Can we add a DRAFT watermark similar to what we have in MS word in maybe the master page? or any other way?

We want to release a draft version of the Responsive HTML5 output. The Draft should appear on all pages of the help. Is it possible?

[Amebr]

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.

[Captiv8r]

Hi there

In addition to Amber's excellent information, you can also accomplish it by using RoboHelp to manipulate the CSS.

First, you will want to create an image that will be used. Then save it somewhere on your hard drive.

Then open the RoboHelp CSS editor. I just find the CSS in the Project Manager and double-click it.

Then head to the following location:

Other > Background+Text(BODY) > Format > Borders and Shading...

Then from the dialog that ensues:

Shading tab then the spyglasses icon

Browse to and choose the image for the watermark.

Then configure the X and Y values (likely to Center) and the Repeat option to "No-Repeat".

Note that I just grabbed the first image I could find here. So pay no attention to that. I simply needed to present the dialog as an example.

Cheers... Rick