Skip to main content
meKarla
Inspiring
May 3, 2017 7:07 PM UTC
Answered

Adding image to header in Robohelp 2017

In RH2017 (13.0.0.257), Responsive HTML5 layout, is it possible to add an image to the header? I have the logo and the project title on the left and want to add the company logo to the right, and link the logo to the home page of our website. (I added the Globalscape logo to the image below as an example of what I want to do.)

I've played around with layout.css and Topic.slp, to no avail.

Thanks,

Karla Marsh

This topic is closed to new replies. Start a new post to keep the conversation going.
Willam van Weelden
Willam van WeeldenCorrect answer
Inspiring
May 10, 2017 6:03 PM UTC

Well, bummer. If you guys don't know, there's no hope for me! What I have is satisfactory EFT™ v7.3.x.


The template you downloaded is based on an Adobe Template for RH11. This one isn't much different. But you'll need a slightly different CSS.

The following works:

@media screen and (min-width: 81em) div.header {
  1.    background-image: url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg);
  2.    background-repeat: no-repeat;
  3.    background-position: right center;
  4.    background-size: contain;

}

The other devices are similar. There are 4 media queries if I remember correctly. But the CSS should carry over.

View reply

23 replies

meKarlaAuthor
Inspiring
Jun 21, 2017 3:18 PM UTC

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

Translate
Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
Jun 21, 2017 4:00 PM UTC

Willam advised me the second piece of code you quote needs a small

correction but I can't access that until next week.

Peter Grainge

www.grainge.org

@petergrainge

Translate
Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
MDennetti
Inspiring
Jun 21, 2017 4:04 PM UTC

I'd appreciate it if you could send me that please. Perhaps this will add some spacing to right side of the image. At the moment the image is hard against the right side of the header. Best wishes,

Mark

Translate
Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
May 6, 2017 12:20 PM UTC

I can't help you with right aligning the company image, if it is possible then Willam is the person for that.

I wonder if creating a single image combining the product logo and company logo top left would work?

Which layout are you using?

See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Translate
Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Willam van Weelden
Willam van Weelden
Inspiring
May 8, 2017 10:56 AM UTC

You can add a background image to the header with CSS:

div.header {

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

   background-repeat: no-repeat;

  background-position: right center;

}

Translate
meKarlaAuthor
Inspiring
May 8, 2017 3:59 PM UTC

I'm using your Theme1_Standard_TOC_Only, added the text above to main.css, change the file name to the name of the graphic I'm using, pasted it into the same folder, generated the help---nothing.

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices