How to customize the appearance of specific elements in WebHelp output?

[Youble]

I'm using Oxygen XML Editor 26.1 and generating WebHelp Responsive output from my DITA topics. I would like to customize the appearance of a specific element, say <note type="tip">, so that it looks visually different (e.g., with a custom icon and background color).

I've tried adding CSS in the customization folder (resources/css/custom.css), like this:

Code: Select all

.note.tip {
  background-color: #e6f9ff;
  border-left: 5px solid #00b8d9;
  padding: 10px;
}

But the changes don’t seem to take effect in the output. Am I missing a step in referencing the custom CSS, or should I override a different class name?

Any suggestions or best practices for customizing the WebHelp layout for individual DITA elements?

[julien_lacour]

Hello,

I assume by "customization folder" you mean publishing template, have you declared the new stylesheet as a CSS resource?

Code: Select all

<publishing-template>
    <webhelp>
        <resources>
            ...
            <css file="resources/css/custom.css"/>
           ...
    </webhelp>
</publishing-template>

Regards,
Julien