Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


can i customize the indigo skin?

Explorer ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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:

 

zz2020-11-10_18-47-43.png

Thanx for any advice/help anyone may provide.

Regards,

Bill

 

Views

104

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 10, 2020 Nov 10, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 11, 2020 Nov 11, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 11, 2020 Nov 11, 2020

Copy link to clipboard

Copied

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).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 11, 2020 Nov 11, 2020

Copy link to clipboard

Copied

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.)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 11, 2020 Nov 11, 2020

Copy link to clipboard

Copied

LATEST

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation