Draft Watermarks

Edit online

To add a draft watermark to all of your publication pages, you can use the following page selector in your customization CSS:

@page {
    background-image: url("draft.svg");
    background-position:center;
    background-repeat:no-repeat;
    background-color:inherit; 
}

If you have already set a background image for other pages (for example, the front-page or table-of-contents), the above selector won't change them, as they are more specific.

The best practice is to use a different draft.css CSS file that imports the customization CSS where the rest of the style changes reside. If you need to publish as draft, use the draft.css in your transformation scenario, otherwise directly reference the customization CSS.

Suppose you want to apply a Draft watermark until your DITA bookmap is approved and the map is approved when an <approved> element has been added to the metadata section (for example, in the bookmeta/bookchangehistory element).

<bookmeta>
   <author>John</author>
   <critdates>
      <created date="1/1/2015"/>
      <revised modified="3/4/2016"/>
      <revised modified="3/5/2016"/>
   </critdates>          
   <bookchangehistory>
       <approved/>       
   </bookchangehistory>
...

You can use:

:root, body{
     background-image: url(oxy_xpath('if  (//bookmeta/bookchangehistory/approved) then ""
else  "../../images/draft-watermark.png" '));
     background-position:center;
     background-repeat:no-repeat;
     background-color:inherit; 
}

Use oxy_xpath every time you need to probe the value from an element other than the one matched by the CSS selector, and test the expression on the merged HTML file using the Oxygen XPath Builder view. The body selector is used here in case you want to apply the DITA Map PDF - based on HTML5 & CSS transformation type.