Changing the header in the Charcoal_Grey layout

Participant ,
Oct 04, 2017 Oct 04, 2017

Copy link to clipboard

Copied

Hi, I recently followed some very helpful advice on this forum on adding an image to the right side of the header in the Charcoal_Grey output for the Responsive HTML5 output in RoboHelp 2017. I added the following in the Layout.css file, which worked perfectly:

div.header {

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

            background-repeat: no-repeat;

            background-position: right center;

}

However, I now need to add a pinstripe that runs all the way across the header, as shown in the attached image. Please could you advise how I can do this. Could I add another image, and specify its position below the above image, or perhaps it would be possible to create another "header" and place it below the existing one? Any advice would be appreciated.

Original post:Adding an image to the header in RoboHelp 2017

header.png

TOPICS
HTML5 layout

Views

456

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
community guidelines

correct answers 1 Correct Answer

Participant , Oct 05, 2017 Oct 05, 2017
Think I have answered my own question. We updated the layout.css as follows:div.header {            background-image:url('logo_test.png'), linear-gradient(to right, #F6AB00, #F6AB00);            background-repeat:no-repeat;            background-position:right center, left bottom 5%;            background-color:#222933;            color:#FFFFFF;            background-size:auto 70%, 100% 5%;}Although, at first, this displayed the yellow line, but hid the right-hand image, after I added logo_test....

Likes

Translate

Translate
Participant ,
Oct 05, 2017 Oct 05, 2017

Copy link to clipboard

Copied

Think I have answered my own question. We updated the layout.css as follows:

div.header {

            background-image:url('logo_test.png'), linear-gradient(to right, #F6AB00, #F6AB00);

            background-repeat:no-repeat;

            background-position:right center, left bottom 5%;

            background-color:#222933;

            color:#FFFFFF;

            background-size:auto 70%, 100% 5%;

}

Although, at first, this displayed the yellow line, but hid the right-hand image, after I added logo_test.png as a baggage file, it worked perfectly, and added the yellow line under the two images in the header.

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
community guidelines
Adobe Community Professional ,
Oct 05, 2017 Oct 05, 2017

Copy link to clipboard

Copied

Nice. If you don't mind, I'll add that to Snippets on my site as well.


See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
community guidelines
Participant ,
Oct 05, 2017 Oct 05, 2017

Copy link to clipboard

Copied

LATEST

Please do. It's nice to be able to give something back to the forum after all the useful advice I have received from you guys.

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
community guidelines
Resources
RoboHelp Documentation