How do you modify the title style in Responsive HTML5?

Report · Feb 22, 2016

I am using RoboHelp 2015 and generating a Responsive HTML5 project using the Azure_Blue layout and am trying to modify the format of the title so that one word is using Superscript font. I know that you're not supposed to do any inline editing and that everything should be controlled by a CSS, but which style in which CSS? How do I apply different styles to different words? Any help is greatly appreciated!

Thanks in advance,

Nikki

Report · Feb 23, 2016

One word in the title will be a challenge. The layout doesn't support that through the default editor. The easiest will be to add it in the HTML directly.

Open the .slp in notepad and find the div with class title. Type the text in the <span> that is there. (Remove the variable.) For the superscript, use the <sup> tag or create a span that you can style in the CSS. (vertical-align: super;)

Report · Feb 23, 2016

Thank you very much for the response. I did try to modify the HTML directly with the following:

<span style="font-size: 36pt;">OBM</span><span style="vertical-align: Super;

font-family: 'Orator Std', monospace;">Conn</span><span

style="vertical-align: Super; font-family: 'Orator Std', monospace;">ect</span>

</div>

The good news is that the title was updated correctly, but the bad news is that is caused the TOC to break. I can't figure out how the 2 things are related at all, but I troubleshooted with new projects and making the adjustment to the title is definitely causing the TOC to break (it displays with empty pages and doesn't do anything when you click on them.

Any suggestions?

Report · Feb 23, 2016

How did you open the HTML? Did you open the .SLP in the HTML mode of RoboHelp?

Report · Mar 04, 2016

What if I want to change the font on the entire title? Would I use the same approach?

sharon27lily

Report · Mar 05, 2016

The entire layout uses the same font. You set that globally in the editor (Right click the layout and select 'Edit'.) The Basic settings section lets you set the font. You can change the text color of the title in the Layout Editor as well, in the Header section.

If you want to change only the font for the title, you have to do that in the CSS. Simply copy and paste the text below into the layout.css and layout-rtl.css files. (Open them with Notepad or the HTML view in RoboHelp.)

div.title{ font-family: "Times New Roman", Arial, sans-serif; }

Change the name "Times New Roman" to the font you want to use.

Report · Mar 07, 2016

Thank you! That worked!

sharon27lily

Report · May 19, 2016

Hi all,

I also need to change the font size in the top bar of the HTML5 Help ("Layout Images Source" in the screenshot below -- I'm using the Charcoal layout). I tried adding the div.title to the css, but that hasn't worked. Can anyone see what I'm missing?

div.title {

font-family: Arial;

margin-top: 0pt;

margin-left: 0pt;

font-size: 10pt;

margin-bottom: 0pt;

}

Report · May 21, 2016

The div.title settings get overwritten in the CSS. Use

div.title span {

font-size: 10pt;

}

Report · May 27, 2016

Hi William,

Thank you for the info. I added this to the CSS, but the text size in the title bar remains huge -- no change. I did notice that if I resize the window very small, the text eventually scales, and when the window is very small, a line break is added and a scroll bar appears so you can scroll to see the whole title. But my developers want the title to be small when the window is large. Other thoughts?

Thanks,

Kate

Report · May 30, 2016

That's very strange. If I paste my previous code in the Layout.css file, it picks up the font size correctly.

Of course, if you want different devices to have different font sizes, you have to include the device as well:

body.media-mobile

body.media-landscape

body.media-desktop

For example:

body.media-desktop div.title span {

font-size: 10pt;

}

Report · May 31, 2016

Hey William,

Thank you so much for sticking with me on this. I added your code to the Layout.css file in the output, and the font size does change! Previously, I was modifying the Style Sheet for my project using the RoboHelp editor. So it looks like the Layout.css file trumps the project style sheet. Is that correct? I don't see Layout.css in the RoboHelp Project Manager view. Could you tell me where I should edit this file?

Also, I'm getting a scroll bar in the top bar which seems unnecessary -- all the text is displayed and there's nothing to scroll to.

Do you know what controls the scroll bar? This is the CSS entry I'm using:

div.title span {

font-family: Arial;

margin-top: 0pt;

margin-left: 0pt;

font-size: 10pt;

margin-bottom: 0pt;

}

Report · May 31, 2016

The CSS from your project only applies to topic styles. Any modifcations to the skin have to be added to the layout.css. They control different parts of the output.

The scrollbar appears when the text can't fit the layout. If you remove the margins, does that fix your scroll issue?

Otherwise try adding the font size for each device individually. That doesn't produce the scroll bar on my side.

Report · May 31, 2016

Removing the margins did the trick! Thank you so much for your help 🙂

Report · Aug 02, 2016

I am a COBOL programmer assigned to handle our documentation.

I am a novice at the new stuff. Could you tell me how to get to the Layout.css so I can make modifications?

System Attributes:

RoboHelp HTML V9.0

RoboSource Control 3.1

RoboHelp Server V9.0

WebHelp Pro 9.0.1.262

Report · Aug 02, 2016

Hi there

I could be mistaken here, but I believe the Layout.css only applies to responsive layouts. And Responsive layouts didn't appear until two versions later than your RoboHelp HTML 9 you are reporting.

So I believe in your case, any mention of Layout.css is moot.

can you tell us what your output type is and what part of it you hope to modify?

Cheers... Rick

How do you modify the title style in Responsive HTML5?

Photos