Custom Note Formats in PDF via HTML/CSS

[Eileen]

I'm trying to update my CSS style sheet to customize different note types with varied background colors and icons. The ultimate output is a DITA PDF based on HTML5 & CSS.

In addition to the standard note types in Oxygen DITA, I've created note elements with a type attribute of other and an othertype attribute of Quality or Safety.

When I generate the output, these special notes generate correctly with a heading that reads Quality or Safety rather than Notes. So far, so good.

Now I'm modifying the notes.css file in an attempt to have different background colors for the different note types. The notes.css file already does this for warnings and such. For example:

Code: Select all

*[class~="topic/note"].note_restriction {
  background-color: #ff3399;
}

generates a pink Restriction note.

However, I cannot successfully select my custom note types.
Adding the following does nothing to change the background color of the other note type.

Code: Select all

*[class~="topic/note"].note_other {
  background-color: #00ccff;
}

The following doesn't do anything either:

Code: Select all

*[othertype=Quality] {
  background-color: #00ccff;
}

Ultimately, I'd like each othertype value to generate a note with a unique color and icon. So if the othertype is Quality I'd get a note with a blue background and a trophy icon; Safety might have an orange background and a life-preserver icon, etc.

Does anyone know how to do this?

[julien_lacour]

Hello Eileen,

Your custom rules are not applied because of rule priority in CSS, to make it short: longer the CSS selector, higher the priority.
You can use these selectors instead (matching with both @type and @othertype):

Code: Select all

*[class~="topic/note"][type="other"][othertype=Quality] {
  background-color: #00ccff;
  background-image: url(svg/trophy.svg);
}
*[class~="topic/note"][type="other"][othertype=Safety] {
  background-color: #ffaa00;
  background-image: url(svg/life-preserver.svg);
}

You can notice that I already added both Quality and Safety with their icons. Like this you have your final output .
Note: The default notes icons size is 24x24, so for a better rendering you should keep these values for your custom icons.

Regards,
Julien

[Eileen]

Thank you, Julien. That worked like a charm!

[LASSE_MLE]

Hello all,

A sub-question to this topic! My wish is to remove the note title on top of the note.
I.e. making this change:

00.png (5.75 KiB) Viewed 1026 times

Note:
I found the css in the framework that write this Note: in the first line:

Code: Select all

*[class ~= "topic/note"]:before {
    content: url('../img/note.svg') " Note: ";
}

in C:\Program Files\Oxygen XML Editor 24\frameworks\dita\css\core.
I succeed changing background and border colors in the custom CSS I've created.
Something like:

Code: Select all

*[class~="topic/note"][type="danger"] {
    background-color: rgba(255, 0, 0, 0.3);
    border-color: #FF0000;
}

But I did not succeed removing this first line.
Can anyone help me?
Thank you in advance.
ML

[andrei_pomacu]

Hi,
In order to remove the first line you need to hide the child of the note node which contains the title.

Code: Select all

*[class~="topic/note"][type="danger"] {
    background-color: rgba(255, 0, 0, 0.3);
    border-color: #FF0000;
}

*[class~="topic/note"][type="danger"]> *[class~="note__title"] {
    display:none;
}

Regards,
Andrei

[LASSE_MLE]

Waouh!
Thank you for your fast answer!
Sorry for the inconvenience, I'm definitely not a css specialist
BR,
ML

[LASSE_MLE]

Dear gentlemen,

While abusing your kindness, I did not succeed making the same thing for my HTML output
I found the Notes.css where the rules a written.
To change the Caution note color, I've made:

Code: Select all

*[class~="topic/note"].note_caution {
    background-color: rgba(255, 0, 0, 0.3);
    border-color: #FF0000;
}

and it is working nice.
I've made some other changes to modify icon and colors for my custom note Skills (type:Other Othertype:Skills):

Code: Select all

*[class~="topic/note"].note_other {
    background-color: rgba(200,200,200,0.3);
    border-color: #000000;
    background-image: url(resources/images/skilllevel.svg);
}

or

Code: Select all

*[class~="topic/note"][type="other"][othertype=Skills] {
    background-color: rgba(200,200,200,0.3);
    border-color: #000000;
    background-image: url(resources/images/skilllevel.svg);
}

and these ones do not work.
It is probably in the way I isolate the "other" type.
Sorry I'm not a web developer and the CSS techno is still a discovery for me
Thanks in advance for your help,
BR
ML

[julien_lacour]

Hello,

Currently these CSS rules will not work because the @type and @othertype attributes are not propagated into the html output. I added an issue to resolve this.

To make this work for both PDF and WebHelp, follow these steps:

1. Add an @outputclass attribute on the skills note:

   Code: Select all

   <note type="other" othertype="Skills" outputclass="Skills">
     ...
   </note>
   

2. Update the CSS rule:

   Code: Select all

   *[class~="topic/note"].Skills {
       background-color: rgba(200,200,200,0.3);
       border-color: #000000;
       background-image: url(resources/images/skilllevel.svg);
   }
   

3. Create a publishing template with the following content:

   Code: Select all

   <?xml version="1.0" encoding="UTF-8"?>
   <publishing-template>
     <name>Custom</name>
   
     <webhelp>       
       <resources>
         <css file="custom.css"/>
         <fileset>
           <include name="resources/**/*"/>
         </fileset>
       </resources>
       
       <parameters>
         <parameter name="webhelp.show.main.page.tiles" value="yes"/>
         <parameter name="webhelp.show.main.page.toc" value="no"/>
         <parameter name="webhelp.top.menu.depth" value="3"/>
       </parameters>
     </webhelp>
     
     <pdf>
       <resources>
         <css file="custom.css"/>
       </resources>
     </pdf>
   </publishing-template>
   

Then when generating the output using the DITA Map PDF - based on HTML5 & CSS or the DITA Map WebHelp Responsive scenario, select the OPT file in the Templates tab.

Regards,
Julien

[LASSE_MLE]

Nice!
Perfect! As always!
Thank you so much guys!

BR
ML