Custom images appear using transform in version 19 but not version 21

[cparrott]

I'm using custom CSS to refer to custom images in my responsive output. When I run the transform in Oxygen version 19.1, it pulls in the images just fine; when I run the same transform in version 21.1, it does not.

There appears to be a difference in the oxygen-webhelp folders that are created in the output from version to version.
Version 19 folders in oxygen-webhelp:
lib
nav-links
resources
search
template
index.html

Version 21 folders in oxygen-webhelp:
app
lib
template

I am guessing this is the source of the issue, but I don't know what parameters to edit to get those folders to appear. Has anyone else experienced something similar with the update to 21.1?

[Costin]

Hello,

Yes, there may be differences between older and newer versions.
However, the images should be rendered also in the new version.

Sending some minimal sample files on our official technical support email (support@oxygenxml.com) could help us investigate how are you referring the images, where are you referring them and what you obtain in the output.

Regards,
Costin

[Costin]

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

Code: Select all

div.note > span.note__title {

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

[cparrott]

Following up on this post just in case anyone else has this problem--being more specific with my CSS selectors worked! My custom Note images are now appearing just fine. Thanks to Costin for all the help!