Robohelp 2015: How to amend the logo size in the responsive HMTL5 output

New Here ,
Jun 29, 2016

Copy link to clipboard

Copied

Good Morning

I can edit my screen layout to include a logo at the top left of the header on my HTML5 responsive output, but this logo looks small and i would like to change the size of the logo.

Is this possible, maybe through amending the HTML code or the layout.css file?

I am not sure how to start.

TOPICS
HTML5 layout

Views

806

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 2015: How to amend the logo size in the responsive HMTL5 output

New Here ,
Jun 29, 2016

Copy link to clipboard

Copied

Good Morning

I can edit my screen layout to include a logo at the top left of the header on my HTML5 responsive output, but this logo looks small and i would like to change the size of the logo.

Is this possible, maybe through amending the HTML code or the layout.css file?

I am not sure how to start.

TOPICS
HTML5 layout

Views

807

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
Jun 29, 2016 0
LEGEND ,
Jul 02, 2016

Copy link to clipboard

Copied

The logo is determined in the layout.css file. The logo is set in multiple locations. I'm not sure which layout you're using, so here are the CSS selectors for Charcoal_Grey. But the Azure_Blue has similar selectors.

body.media-desktop div.header div.logo

body.media-landscape div.header div.logo

body.media-mobile div.header div.logo

You have to update the sizing for all three selectors to target all devices. Please note that the title in the header is expecting a logo of a certain size. If you change the logo sizing, you may need to update the positioning of the title as well. For mobile, please check:

body.media-mobile div.header div.title

It may be easiest to use the SCSS files to generate the layout.css. This SCSS holds all calculations for sizing needed so you don't have to do it manually. You can find instructions and the files here: Learn how to download and use new screen profiles and layouts in RoboHelp

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...
Jul 02, 2016 0