Skip to main content
C
Cathryn5EA0
Known Participant
November 4, 2020
Question

Modify TOC font for Responsive HTML5 output

  • November 4, 2020
  • 2 replies
  • 311 views

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.

    This topic has been closed for replies.

    2 replies

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    November 4, 2020

    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.

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    November 4, 2020

    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.

    C
    Cathryn5EA0Author
    Known Participant
    November 4, 2020

    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!

    C
    Cathryn5EA0Author
    Known Participant
    November 4, 2020

    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.

     

     

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices