Customize Flare’s tripane icons

and the Closed Book, Open Book, and Topic Page icons used in the Contents panel:

Here they are, at a larger size, left to right:

Their filenames:

tocActive.png
tocInactive.png
indexActive.png
indexInactive.png
glossaryActive.png
glossaryInactive.png
closedBook.png
openBook.png
ResponsiveTopic.png

These default icons are in the following Output folder:

\Output\[user name]\HTML5 – Tripane\Skins\Default\Stylesheets\Images

Copy them to another graphics directory.

Changing the icons

You have several options. You can open each icon in Paint or some other image editing program and change the colour, pixel by pixel:

Or you can create a completely new icon. Or you can replace the icons with small photos.

I like to mix solutions. I keep the three gray “inactive” icons as they are. I edit the colour of the three “active” tab icons. Then I use photos to replace the Closed Book, Open Book, and Topic Page icons.

Here’s a before and after red version of the Active TOC icon I did to match the colour in a client’s logo:

Note: the tab icons for Contents, Index and Glossary must be exactly 16 x 16 pixels or they won’t display properly.

Here are three icons created from photos for the Closed Book, Open Book, and Topic Page. They look a little fuzzy when magnified, but display fine:

Flare tolerates various sizes here so experiment to see what looks best. If the icons are too small, they’re hard to interpret. If they’re too big, they draw attention to themselves.

Upload the finished icons

When you have all the icons ready to go, the last step is to upload them to Flare via the Skin editor.

With your project open, use the Project Organizer to locate and display the file in the Skins folder. If you haven’t changed the name, it’s likely HTML5 – Tripane. Make sure the Styles tab is displayed in the Editor window.

Next, locate the following icon upload areas using the vertical slider:

and upload each icon using the Select Image button on the right:

Here are the locations:

Active TOC icon: Navigation > Navigation tab (active) > TOC > Icon

Inactive TOC icon: Navigation > Navigation tab (inactive) > TOC > Icon

Active Index icon: Navigation > Navigation tab (active) > Index > Icon

Inactive Index icon: Navigation > Navigation tab (inactive) > Index > Icon

Active Glossary icon: Navigation > Navigation tab (active) > Glossary > Icon

Inactive Glossary icon: Navigation > Navigation tab (inactive) > Glossary > Icon

Closed Book, Open Book, Topic Page icons: Navigation > Navigation Panel > TOC > Icons

Save the Skins file, then build and view. You should see the new icons. If you don’t, go back to the Skins editor and make sure you have uploaded in the correct place.

Final result

Here’s how my new icons look. I’ve changed the colour scheme of the help using the Skins editor: