Skip to main content
N
Nikki_Williams
Known Participant
February 22, 2016
Question

How do you modify the title style in Responsive HTML5?

  • February 22, 2016
  • 1 reply
  • 2231 views

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

This topic has been closed for replies.

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
February 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;)

N
Nikki_WilliamsAuthor
Known Participant
February 23, 2016

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

<div class="title" style="height: 70px;">

        <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?

Willam van Weelden
Willam van Weelden
Inspiring
March 5, 2016

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

sharon27lily


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.

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