Adding an image to the header in RoboHelp 2017

Question

For branding purposes, I am trying to add an image to the header in the Responsive HTML5 output in RoboHelp 2017, but have had no luck so far following the threads on the forum. I managed to update the "Home" image at the left of the header, but unfortunately I could not add a large enough image. I understand that I probably need to edit layout.css, but would really appreciate some advice on doing this. I am outputting to Responsive HTML5, using the Charcoal_Grey layout.

Thanks,

Mark

MDennetti · Accepted Answer

No problem, thanks for the reply. Regarding the following content:

div.header {

background-image: url('logo_test.png');

background-repeat: no-repeat;

background-position: right center;

}

Please could you tell me which CSS file this needs to be added to. Layout.css?

Cheers

meKarla · Answer

Hi, sorry, MDennetti--been busy at work!

What I did was download Willam van Weelden's "Theme1_Standar_TOC_Only" and I edited the CSS named main.css to add/edit this section:

@media screen and (min-width: 81em) div.header {

background-image: url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg);

background-repeat: no-repeat;

background-position: right center;

background-size: contain;

}

Obviously, the image would have be swapped out and I change contain to auto.

If you're not using that CSS, he originally sent me a different fix:

div.header {

background-image: url('logo_test.png');

background-repeat: no-repeat;

background-position: right center;

}

If none of that works, make backups off EVERYTHING you want to edit, the play with different stuff in CSS until you get what you want--if you have time. Then report your findings to the rest of us!

Karla

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.

Scanning file for viruses.

This file cannot be downloaded