Swap out note icons

shudson310
Posts: 133
Joined: Sat Feb 26, 2005 12:09 am
Location: USA
Contact:

Swap out note icons

Post by shudson310 » Tue Jul 03, 2018 6:19 pm

Hello,

I'm trying to swap out the default note icons. I used an override, but I get duplicate label and icons.

Here's my code:

Code: Select all

*[class ~= "topic/note"]:before {
content: url('../../images/myNote.png') " Note: " !important;
font-family: 'Arial Unicode MS Bold', sans-serif;
font-weight: bold;
font-style:normal;
image-resolution: 300dpi;
}
This looks right, but why am I getting the duplication?
Scott Hudson
Content Strategist
Jeppesen
Site: jeppesen.com

Costin
Posts: 573
Joined: Mon Dec 05, 2011 6:04 pm

Re: Swap out note icons

Post by Costin » Thu Jul 05, 2018 10:24 am

Hi Scott,

There is a second "Note: " text that comes from the HTML transformation.Its actually contained by a <span/> element.

You can better notice this if you open the .merged.xml file resulted in the output folder during the transformation in a internet browser and use the browser's CSS inspector to inspect the applied styles.
You can find detailed information as well as more tips related to debugging the CSS applied to style the output in this section our User-Guide.
I suggest you should take a look at this section whenever the resulted styling in your PDF does not match your expectations.

In this particular case, you should just hide the "Note: " text coming from HTML, by using an additional rule in your custom CSS:

Code: Select all

.note__title{
display:none;
}
Regards,
Costin
Costin Sandoi
oXygen XML Editor and Author Support

Post Reply