Customizing TOC icons in Indigo layouts

Both RoboHelp and FrameMaker output options contain a frameless responsive HTML5 layout, named Indigo.

Indigo is a frameless HTML5 layout, as opposed to “traditional” 3-pane help with a familiar nav pane on the left side.

Frameless output is more easily indexed by search engines (both internal and external) and results in more concise URLs than older formats.

Interestingly, while the initial deployment of Indigo in the 2017 versions of the products had the option to customize the icons used for navigation on the Index.html home page, Adobe removed this option with subsequent patch releases of the products, leaving most folks with the generic icons in the TOC tiles shown below.

However, while Adobe removed the option from the layout editors for both FrameMaker and RoboHelp, they didn’t remove the TOC icon functionality from the product.

It’s a manual process, but if you don’t mind poking around in a few files for 15-30 minutes with a text editor like Notepad++ then you can customize your own version of Indigo to replace the generic images provided and use your own set of transparent 64×64 pixel PNG files instead.

All standard disclosures and warnings apply:
Make sure you have backups for your work and your environment whenever you work “under the hood” in software!

After you’re done, the changes will persist for future builds of the responsive output. Below are instructions for modifying the layout in FrameMaker, which is the more complex of the two.

RoboHelp users: Skip to last part of post

Shortcut: Enrolled in Authoring FrameMaker Content?

My structured and unstructured authoring courses each contain a 15-minute video showing the process. They also provide a modified Indigo layout file so you can skip the steps needed to export Indigo and configure the layout options. That means you just have to change the icon names in the toc_c_images.css file and reimport the layout.

If you haven’t taken one of the Authoring courses, or if you’re a RoboHelp user, you can still get all the steps needed for custom icons below.

Exporting Indigo in FrameMaker

Go to the Publish panel, and edit your Settings File

Select Responsive HTML5 from Outputs, and in General>Manage Layout, export the Indigo layout

Change the extension of your exported SLZ file to ZIP and decompress the file.

Editing the Layout

In the resulting folder, edit the usersettings.js in a text editor, changing the useCustomTOCLinks value in line 10 to true and save the file

Option A: Graphic filenames

Add your graphics with web safe names (no spaces, no special characters) to the layout folder (the same directory that contains the custom-toc-image-xx.png images) and change the values in toc_c_images.css to match filenames (recommended)

For example, the 64×64 pixel transparent PNG images shown at top use the following pattern:

• 1-introduction.png
• 2-workcentre.png
• 3-my-profile.png

Option B: Graphic filenames

You can update/set the custom TOC icons by changing your chosen icon filenames to the format used by the layout, and replacing the existing copies of these files.

The new file names will use the following pattern:

• custom-toc-image-0.png
• custom-toc-image-1.png
• custom-toc-image-2.png
• …
• custom-toc-image-50.png

Compress contents of Indigo layout folder (compress the contents of Indigo folder, not the folder itself)

Change extension of the ZIP to SLZ

Import the layout back into FrameMaker. In other words, use the Import option, rather than the Export option you used earlier.

Loss of preview in editor

After reimporting my SLZ, I noticed my layout editor no longer recognized the helper screens for the individual property sets. However, the editor is still functional, and the screens are still available in the preview folder you have on your hard drive. I’ll update this post if/when I track down the reason for the preview error.

Want to reset to original Indigo layout?

Use the New option in the Publish Settings to wash out changes and get back to the default Indigo layout, as shown below.

Modifying Indigo in RoboHelp

1. In your RH project, go to the !ScreenLayout! folder and open the folder containing your Indigo layout.
2. Find usersettings.js and open it with a text editor.
3. On line 10 you’ll see the code: var useCustomTOCLinks = false;
4. Change false to true.
5. Save your changes.

Generate the output and your help will use the custom TOC icons once again.

You can update/set the custom TOC icons by changing your chosen icon filenames to the format used by the layout, and replacing the existing copies of these files.

The new file names will use the following pattern:

• custom-toc-image-0.png
• custom-toc-image-1.png
• custom-toc-image-2.png
• …
• custom-toc-image-50.png

You can also choose to retain descriptive names for your images and instead update the toc_c_images.css file to identify your custom names. For more detail, see Option A above.

A big thanks to Willam van Weelden

Willam was a long-time contributor to RoboHelp as a trainer and forum expert. He was also one of the authors of the Indigo skin itself. He is now working outside of the RoboHelp ecosystem, but was gracious enough to help me (and all of you) by providing me with the edits needed to the JS and CSS files to change these icons!