Highlighted

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

Explorer ,
Apr 08, 2019

Copy link to clipboard

Copied

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?

TOPICS
HTML5 layout

Views

515

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Apr 08, 2019

Copy link to clipboard

Copied

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?

TOPICS
HTML5 layout

Views

516

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 08, 2019 0
Adobe Community Professional ,
Apr 09, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2019 0
Captiv8r LATEST
LEGEND ,
Apr 09, 2019

Copy link to clipboard

Copied

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...

Snag_5a1bb7f0.png

Then from the dialog that ensues:

Shading tab then the spyglasses icon

Snag_5a1d10b9.png

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".

Snag_5a1ebff0.png

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2019 0