10 Replies Latest reply: Oct 6, 2014 12:24 AM by Willam van Weelden

Changing the font of TOC entries in Responsive Help

authorinkltd Sep 21, 2014 8:23 AM

I'm just starting to find my way with Responsive help and am creating a project where a non-standard font needs to be used. This is fine in topics - I provide a link to the font in every page and it works great. But try as I might, I can't fathom how to change the font of entries within the table of contents.

Bumbling about so far, I've found the Table of Contents.slp file and put the same link to the font in the header there (<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans" />) - I then customised my layout to specify the font name (PT Sans) for the TOC Desktop, but this seems to have no effect at all: when I generate the help, the TOC renders in what looks to be a default Times font.

I'm really just guessing at this stage so if anyone can point me in a slightly more considered direction, I'd be really grateful!

Thanks

Claire

1. Re: Changing the font of TOC entries in Responsive Help

Peter Grainge Sep 21, 2014 9:05 AM (in response to authorinkltd)

I trust you are well Claire.

Try right clicking the layout name in Project Setup and then clicking Edit. Look under Global.

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge
Like Show 0 Likes (0)

Actions
2. Re: Changing the font of TOC entries in Responsive Help

authorinkltd Sep 21, 2014 1:47 PM (in response to Peter Grainge)

Hello Peter - I'm really well thanks - and thanks so much for your suggestion :-)

I had indeed overlooked the Global settings but alas even this doesn't solve the problem. A little further checking tells me that font settings for the TOC Desktop take precedence over Global settings; I've proved that I can change the colour and specify another standard font here, which makes me think I must be missing a trick about linking to the non-standard font.

I'll keep digging - it's certainly helping me find my way around all this shiny new stuff!

Thanks again
Claire
Like Show 0 Likes (0)

Actions
3. Re: Changing the font of TOC entries in Responsive Help

Willam van Weelden Sep 22, 2014 7:26 AM (in response to authorinkltd)

I don't believe RH will pick up a non standard font anyway, not in the editor and also not in the HTML5 editor. The best way to go forward is to manually update the CSS with the font name to use. If you search for 'font-family', you'll find about 5 settings that you must change manually.

Kind regards,

Willam
Like Show 0 Likes (0)

Actions
4. Re: Changing the font of TOC entries in Responsive Help

authorinkltd Sep 22, 2014 12:08 PM (in response to Willam van Weelden)

Thanks for the advice Willam - it's worked a treat :-)

Claire
Like Show 0 Likes (0)

Actions
5. Re: Changing the font of TOC entries in Responsive Help

authorinkltd Sep 22, 2014 2:16 PM (in response to authorinkltd)

Hmmm. Actually there's an addendum to this one.

When I generate the help, all looks good with the correct font in the TOC and in topics. But as soon as I expand the TOC to show second-level entries, all entries in the TOC seem to revert to a default font. Only when I collapse the TOC again to shown top-level entries does it revert to PT Sans.

I'm guessing that there is something in main.css that controls the different TOC levels - I'm not sure what it is but I do know that all font settings in this file are set to PT Sans.

Any more clues gratefully received :-)

Claire
Like Show 0 Likes (0)

Actions
6. Re: Changing the font of TOC entries in Responsive Help

Willam van Weelden Sep 22, 2014 10:58 PM (in response to authorinkltd)

Does all entries mean the second level only, or the entire TOC? I just tried locally and it worked fine on my side.

You can try the following: Add the font-family explicitly to the following styles:

span.wTOCTreeCloseBookText
span.wTOCTreeOpenBookText
span.wTOCTreePageText
span.wTOCTreeLinkText

This will make sure that your styles being overwritten.

Kind regards,

Willam
Like Show 0 Likes (0)

Actions
7. Re: Changing the font of TOC entries in Responsive Help

authorinkltd Sep 23, 2014 1:20 PM (in response to Willam van Weelden)

Thanks Willam!

I did as you suggested and ensured that the font-family is set to PT Sans for these elements (in fact, I've updated ALL font settings to this). But there's still odd behaviour which I've narrowed down to this...

When I generate the help, everything looks fine; all top-level TOC entries are in PT Sans. If I then navigate the TOC and expand branches by clicking the arrow icons, then collapse again using the arrow icons, everything is good. The problem comes when I click the TOC title links, rather than the arrows - as soon as I do that, the font defaults back to something weird for all TOC levels.

Looking at main.css again, I can see that there are various wTOCNodeLink settings, which I think may be relevant. None of these had a font-family attribute so I have added font-family: PT Sans just in case, but to no avail.

I fear this one might be a bit too twisty to unravel :-|

Claire
Like Show 0 Likes (0)

Actions
8. Re: Changing the font of TOC entries in Responsive Help

Willam van Weelden Sep 23, 2014 10:39 PM (in response to authorinkltd)

Hmm. Did you enable the option to 'Limit project styles to topic contents'? Just to make sure.

Can you zip up an example output with this problems and send it to me at contact [at] wvanweelden [dot] eu? I would like to take a look and see what is going on.

Kind regards,

Willam
Like Show 0 Likes (0)

Actions
9. Re: Changing the font of TOC entries in Responsive Help

authorinkltd Sep 24, 2014 1:58 PM (in response to Willam van Weelden)

Thanks so much Willam, I've emailed you :-)

Best

Claire
Like Show 0 Likes (0)

Actions
10. Re: Changing the font of TOC entries in Responsive Help

Willam van Weelden Oct 6, 2014 12:24 AM (in response to authorinkltd)

This problem was fixed by adding an @font-face rule in the topic CSS and adding the font file as baggage file to the project.

You can find more info about this method here: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Note: In RoboHelp 11.0.3, Responsive HTML5 help changed. This change solves many issues, but a side effect is that CSS/JS changes in the screen layout don't propagate to the topic. In this specific case, making sure that the @font-face rule is in the topic CSS solved the issue.

Kind regards,

Willam
Like Show 0 Likes (0)

Actions