Changing the header in the Charcoal_Grey layout

[MDennetti]

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

[MDennetti · Accepted solution]

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.

[Peter Grainge]

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

[MDennetti]

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.