Highlighted

Changing the header in the Charcoal_Grey layout

Participant ,
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

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.

TOPICS
HTML5 layout

Views

386

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

Changing the header in the Charcoal_Grey layout

Participant ,
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

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.

TOPICS
HTML5 layout

Views

387

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
Oct 04, 2017 0
Participant ,
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
Reply
Loading...
Oct 05, 2017 0
Adobe Community Professional ,
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

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Oct 05, 2017 0
Participant ,
Oct 05, 2017

Copy link to clipboard

Copied

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
Reply
Loading...
Oct 05, 2017 0