RoboHelp 2019 New UI-Output Header Title Font Size

Participant ,
Oct 01, 2020

Copy link to clipboard

Copied

Is there a way to change the font size of the header when generating Responsive HTML5?

 

I've looked at the skin but I am unable to find something that changes the font size of the header. 

 

I want to change it because it's wrapping on the output and the second line is squished. 

Header Squished.png

 

Thank you. 

Views

149

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

RoboHelp 2019 New UI-Output Header Title Font Size

Participant ,
Oct 01, 2020

Copy link to clipboard

Copied

Is there a way to change the font size of the header when generating Responsive HTML5?

 

I've looked at the skin but I am unable to find something that changes the font size of the header. 

 

I want to change it because it's wrapping on the output and the second line is squished. 

Header Squished.png

 

Thank you. 

Views

150

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 01, 2020 0
Adobe Community Professional ,
Oct 01, 2020

Copy link to clipboard

Copied

Wouldn't that all be controlled by the CSS applied to it?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0
Participant ,
Oct 01, 2020

Copy link to clipboard

Copied

I don't think so. It's the Title on the output, nothing on a topic. 

Output Title.pngOutput Header.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 0
Adobe Community Professional ,
Oct 01, 2020

Copy link to clipboard

Copied

You'll need to add a custom css to your skin under Layout > User Assets.

 

The css file will need to include the styles used to set the header font size for desktop, tablet and mobile screen sizes.

 

To find the  styles, open the output, right-click on the title text and select Inspect from the right-click menu (instruction for Chrome, but similar for all browsers). The Developer Tools open, with the relevant piece of html code selected. There will be another panel that shows the css that is being applied to that html. (Usually the panel is to the right of the html code). Often the style you want is the one at the top of the panel.

 

Then you'll need to resize the browser to find the style for tablet and mobile sizes.

 

What you need to add will depend on the responsive skin you are using.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 01, 2020 1
Participant ,
Oct 02, 2020

Copy link to clipboard

Copied

I'm sorry, but I still need help.

I followed your instructions. First, If I add a new css, I then have to apply every single style to it? 

New CSS.png

In following the rest of your instructions: I went to Output>Responsive HTML5>Output. I clicked the pencil icon at the end of Skin. Clicked on Layout and selected the Add Asset button. This is what displays:

Assets.png

I do not see anything concerning the Header Font in there. 

I generated the output and right clicked on the Header and chose Inspect. This is what displays:

Browser HTML.png

I clicked on the Sources tab and this is waht displays:

Sourcce HTML.png

I don't understand what I'm supposed to do with all this HTML.

Thank you so very much.

Michele

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2020 0
Adobe Community Professional ,
Oct 02, 2020

Copy link to clipboard

Copied

@Amebr suggests starting with your output - at different screen dimensions, highlight a bit of that "Transporation & Warehouse" text, then use the Developer Tools to look at the hunk of HTML that it sits in. That will reveal what style name is being used and the CSS that is being applied. This will change as you re-size your browser window (because the output is responsive, right?). Once you've figured out the style names, you can create your own custom CSS file to "hijack" those definitions. To get the output to use the custom CSS, you have to add it to the RH project's skin via Layout > User Assets.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2020 0