Highlighted

Adding an image to the header in RoboHelp 2017

Participant ,
Jun 20, 2017

Copy link to clipboard

Copied

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

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

Topics

HTML5 layout

Views

534

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

Adding an image to the header in RoboHelp 2017

Participant ,
Jun 20, 2017

Copy link to clipboard

Copied

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

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

Topics

HTML5 layout

Views

535

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
Explorer ,
Jun 21, 2017

Copy link to clipboard

Copied

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

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...
Participant ,
Jun 21, 2017

Copy link to clipboard

Copied

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

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...
Explorer ,
Jun 21, 2017

Copy link to clipboard

Copied

I would assume so, since there is no main.css in the charcoal_grey layout.

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...
Participant ,
Jun 21, 2017

Copy link to clipboard

Copied

thanks, I'll give it a try. Does logo_test.png need to be in the same folder as logo.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...
Participant ,
Jun 21, 2017

Copy link to clipboard

Copied

It worked! Thanks very much, I really appreciate 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...
Participant ,
Jun 21, 2017

Copy link to clipboard

Copied

I think the logo I was using needed to be in the same folder as logo.png.

Cheers,

Mark

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