how to add watermark to images in robohelp

[manum52478844]

Is it possible to add watermark effects to a particular image in Robohelp? If, yes, how to do that?

[Jeff_Coatsworth]

I don't believe so - you'd normally do that in your image editing software and then bring the image into your RH topic.

[Stefan Gentz]

Here is one possible approach.

First, wrap your <img> in a <figure> container and give the <figure> a class like "watermark":

<figure class="watermark">
  <img src="my-image.jpg" alt="my image" />
</figure>

In your CSS file, create two classes: One for the figure, and one for the watermark text to add over the image:

figure.watermark {
   display: block;
}

figure.watermark:before {
   color: #000000;
   content: "© COPYRIGHT BY COMPANY";
   font-family: "Arial";
   font-size: 20pt;
   text-align: center;
   font-weight: bold;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   position: absolute;
   z-index: 1;
   opacity: 0.5;
}

The result looks like this:

You can tweak how the watermark text is displayed in the CSS.

From now on, if you insert an image without a figure caption, you can just wrap it in a figure element with a class "watermark," like shown in the code example above. If you insert an image with a figure caption (the text field at the bottom of the insert image dialog), RoboHelp wraps the image in figure automatically, and then you can select the figure in the breadcrumbs bar at the top and assign the style to it.

Note, that this is just a quick draft, so you might want to tweak the CSS to be more advanced and responsiv (like automatic font-size change depending on image size, etc.).

[Aubrey22748821r2x8]

Thank you for the responce. We will be looking into this over the next few days. We normally use FrameMaker and are moving to 3D interactive manuals. The watermark information is for approved or not approved, dates, and change number/lettering. Your work around looks promising and I will let you know if we can get this to populate on all pages and such.

Aubrey