This article will help you change the icon of one of the note box type widgets. This is useful to help you fully customize your documentation to your requirements by branding your documentation to fit your corporate style or standards.
The Classic, Material and Light Templates use the widgets defined in the "Core" Widget Pack. It is those copies you should create a new Widget based on. In the Application Options, select the Widget Packs page, select the "Core" Widget Pack, right click "Note Box" and click the Clone toolbar button. That will give you a new widget with this HTML:
<div class="i-box i-box-custom-note"> </div>
The icon is defined in the Classic and Material Template Topic Templates, in the standard stylesheets, based on the i-box-note class. So to use a new icon you would need to:
- Change the class name of the custom note box widget to "i-box i-box-custom-note".
- Create a new custom template -
You can find out how to create a custom template here:
https://innovasys.zendesk.com/hc/en-gb/articles/360000765543-Creating-A-Custom-Template
- Create a new stylesheet file in your new Custom Template -
You can find out how to create a custom stylesheet in a custom template here:
-
Be sure to follow all of the steps and reference your stylesheet when instructed.
- Add this Style Rule to the new Stylesheet:
div.i-box-custom-note { background-image: url("../images/i-custom.png"); }
- Save the image you wish to use as i-custom.png - or edit the above CSS to reflect your custom filename and add it to the Custom Template under a \template\packages\custom\images directory - you may need to create this directory.
- Finally, make sure you are using your custom template in your active build profile - if you have created a new custom template via the Build Profile editor, this will already have been completed for you.
0 Comments