Swap out note icons

[shudson310]

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?

[Costin]

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