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:
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.
Here’s how my new icons look. I’ve changed the colour scheme of the help using the Skins editor: