can i customize the indigo skin?

[COHAN3]

With FM 2019, I used the Publish feature to publish my Help to a Responsive HTML5 output skin called Indigo. I customized the skin's buttons and set the text colors to my company's brand via the Settings.sts edit function. Output looks great, so far so good. Each TOC item (icon) picked up a heading 1, cool. Now my manager wants me to customize the color of each icon (product line) to coincide with the brand product colors. I dont see a way of doing this with the FM Publish editing tools, which allow you to customize the TOC icon colors as a group, but not individually. Potential solution - RoboHelp 2019. I'm thinking the RoboHelp tools may enable me to go this extra mile in skin customization. Is there a way to import my finished Help into RH and then do this fine tuning edit on the Indigo Responsive HTML5 skin? My goal here is pretty simple, customize the individual TOC icons, as seen in the below example, from image 1 to image 2:

Thanx for any advice/help anyone may provide.

Regards,

Bill

[Amebr]

You can customise the icon for individual books in the TOC in RH2019, but if you're working in Framemaker that probably wouldn't be a workable solution. Unless it's something you can also set in FM and have survive the transition.

You might be able to figure out some fancy CSS by inspecting the output, then adding the required code to a custom css file and adding that to the User Assets section of the skin (under Layout for Indigo). If you changed the TOC though, you might have to redo the custom css, depending on the coding.

[COHAN3]

Ho Amebr,

I imported my source FM doc into RH; now I just need to know where in the RH interface I can customize the TOC icons. I went to Skins-Indigo-Edit-Layout-TOC but the fields apply to the group of icons and I can't see a place to edit the TOC items individually. If editing the CSS is the only option, can you tell me where in the CSS I can edit these icons or what the code should look like?

Regards,

William

[Jeff_Coatsworth]

You could experiment with doing an import of your FM content into a RH project and then tweaking it there to produce the HTML5 help. The FM Publish engine is just a stripped back version of RH under the hood - it doesn't expose as many controls (yet - they keep adding more and more each version).

[Amebr]

It's in the table of contents file. Click on a book and in the Properties panel is an Icon Image field where you can browse for an image. But the table of contents might get regenerated every time you import from FM, and if so you'd need to set up the icons every build.

To find out what css you would need, you would have to generate the output and use the browser developer tools to figure out what css classes to use, add those classes to a new custom css file using a text editor, then add that css file to the skin under Layout > User assets.  If you have a friendly web developer you can bribe, the should be able to figure it out for you. (I have a deadline right now so can't poke around in test project at the moment.)

[COHAN3]

ok cool, now at least I have some direction and areas in RH to drill down on. Thanks very much for this info, I appreciate it!

Regards,

Bill

[Matt S - Tech Comm Tools]

Hi Bill, I wrote up how to customize the Indigo icons to use any 64x64 pixel PNG file you like.

It works for both direct FrameMaker publishing and for RoboHelp.

See https://techcommtools.com/custom-toc-icons-indigo/

-Matt