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.


Modify TOC font for Responsive HTML5 output

New Here ,
Nov 03, 2020 Nov 03, 2020

Copy link to clipboard

Copied

Is it possible to modify the font size of TOC items for Responsive HTML5 output? I have accessed the edit function for the skin (I have been using 'Azure_Blue' for quite a few years), but cannot see any option for the font size - only colour. I have changed the font size for my content to be 16px and the TOC entries look tiny in comparison. I am using RoboHelp v 2020. Thanks.

Views

71

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 03, 2020 Nov 03, 2020

Copy link to clipboard

Copied

If the option isn't in the skin settings, you'll need to use the browser developer tools to inspect the output to figure out what style controls the toc entries. (Right-click on the part of the page you're interested in and select Inspect.) Resize the browser and repeat for tablet and mobile sizes to find the right style for each screen size. Then you'll need to add those styles to a custom css file and add the css to the skin in the User Assets section of the skin.

 

I believe Frameless output provides more configuration options.

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
New Here ,
Nov 03, 2020 Nov 03, 2020

Copy link to clipboard

Copied

Thanks Amebr. I'll check it out. I haven't explored the Frameless output, so I'll give that a go too.

Thanks for your help!

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
New Here ,
Nov 03, 2020 Nov 03, 2020

Copy link to clipboard

Copied

Hi Amebr, this is really getting beyond my skill level. I really am a WYSIWYG kind of developer. I can do basic stuff with html, but this getting a bit too tricky for me 🙂

 

I have attached a screen shot of the published help, so you can see the difference between the TOC font and the content font. I have right-mouse clicked and inspected the TOC panel and attached is a screenshot of some code. It is not obvious to me which style/s I would need to include in a custom css to control the font size and/or whether I need to include every type of style in the css that the skin uses. It seems there should be an easier way.....sigh.... 

 

I'm reluctant to go down the Frameless path at this stage, as from what I have read, this will change the URL for individual topics. A headache I'm trying to avoid.

 

tocfont1.png

 

 

tocfont.png

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 04, 2020 Nov 04, 2020

Copy link to clipboard

Copied

LATEST

Sorry, I can't tell from Notepad. The browser developer tools are much more helpful as it will show you the relevant style names and formatting in a side panel. I'd recommend you ask a friendly developer for help. I think you'll need to do something that includes li.book and li.item, but it's not as simple as just those two things, because of the "responsive" part of the output name.

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
Download Adobe RoboHelp