Changing the header in the Charcoal_Grey layout

Question

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 Answer

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.

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