Hi Claire,
Thank you for sending the customization CSS to our support!
I have already replied by email, but I am also posting my reply on this thread as well, just in case there is anyone else in need to change the note icons.
First, please note that you can not change the icons in the output, just by using a customization CSS. In order to replace the default images used as icons with your own, the custom image(s) referred through your customization CSS must be copied in the WebHelp Responsive output.
There are several ways to copy resources (such as images in this case) to the output folder, but the recommended ones would be:
- directly, setting the "webhelp.custom.resources" parameter (from the Parameters tab of the DITA Map WebHelp Responsive transformation scenario) to point to the location of a folder containing the resources (ie custom image)
- through a publishing template (for more information on how to include additional resources in the output through a publishing template, see the "Template Resources" subsection from this section of the User-Guide)
There is also a CSS selectors specificity issue, which means the selectors that match the notes icons in the HTML output have a higher specificity than the ones you have in your customization CSS.
More exactly, if you use the CSS inspector tool from your internet browser and inspect the note icon, you will see that the rule matched by your ".notetitle," class selector appears as strikethrough text, which means is not applied.
And you should also see that this happens because there is a more specific selector
that matches the note title and already sets a background image to it, through a property marked with !important:
Code: Select all
background-image: url("../img/note.svg") !important;
Therefore, besides using one of the above mentioned methods to copy in the WebHelp Responsive output the custom graphics that you need to replace the icons with, you should also modify your customization CSS to use selectors of the same or higher specificity.
For example, you could use something like:
Code: Select all
div[class~="note"] span[class~="note__title"],
div[class="note"]>h3{
background-image:url("./note.png") !important;
background-repeat:no-repeat;
background-size: 1em;
padding:0px 4px 4px 18px;
}
Whenever you encounter issues with CSS rules that are not applied, you should use the internet browser's Inspector tool to better notice which rules apply over the elements in the HTML output and which specific selectors match them, as advised in
this section from the WebHelp User-Guide.
As you mentioned that you managed to change the icons using an older version, my guess is that previously, either you copied the custom images in the output and you did not do that now, or maybe you jused a customized DITA-OT, with custom images for the icons, or changed the default images directly in the webhelp plugin from the oXygen v19 installation folder (which is highly discouraged, you should use your own customization instead, like I advised above).