Participant

Answered

Is there a way to word wrap long titles in TOC? (responsive html5 output)

9 replies
829 views
Translate

Is there a way to make Robohelp 2017 word wrap long titles in the TOC of responsive html 5 output?

Long titles are not shown correctly in my output, and I have to expand the TOC column to be able to read to full title.

This topic is closed to new replies. Start a new post to keep the conversation going.

G

gc31Correct answer

Inspiring

Hi,

open the layout.css in Notepad. This is in the !ScreenLayout! and then Azure_Blue folder (or whatever layout you are using). You are looking for the following highlighted in the image below.

Comment the line out with // as shown below and regenerate help:

A

Amebr

Community Expert

Okay, for Responsive using Azure Blue or Charcoal Grey, to make this survive generating, you need to add a custom css file. Paste the following into the custom css file:

body.media-desktop div.toc-holder * {
	white-space: normal;
}

Then add the custom css file to your skin in Layout > User Assets.

Translate

A

Amebr

Community Expert

Which output and skin are you using? The solution will be different depending on that answer.

Translate

C

codyp816

Known Participant

Hello there,

I'm using an HTML5 Output along with the Charcoal Grey Skin.

I was able to locate this in my output folder. I selected the 'Output > template > skin name > layout.css'.

Translate

C

codyp816

Known Participant

Would anyone know where to find this for RoboHelp 2020?

Translate

Jeff_Coatsworth

Community Expert

Did you check in your output files for that text in the css?

Translate

C

codyp816

Known Participant

I'm not seeing the !ScreenLayout! or layout.css specifically. I didn't know if it was worded differently for the .rhpj project type that the newer versions of RoboHelp utilize.

Translate

G

gc31Correct answer

Inspiring

Hi,

open the layout.css in Notepad. This is in the !ScreenLayout! and then Azure_Blue folder (or whatever layout you are using). You are looking for the following highlighted in the image below.

Comment the line out with // as shown below and regenerate help:

Translate

davidg802Author

Participant

Thanks a lot! It worked.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.