Specifying an image in the Title Bar

Participant ,
May 26, 2017 May 26, 2017

Copy link to clipboard

Copied

In RoboHelp 2017, is is possible to specify an image in the Title Bar, rather than text? I am using responsive HTML5 and would like to show a stylised product logo containing an image here. Perhaps there is another way I could display the image in the header, and turn off the Title Bar. Any advice would be appreciated.

TOPICS
HTML5 layout

Views

533

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 ,
May 26, 2017 May 26, 2017

Copy link to clipboard

Copied

Maybe this thread will help - Re: Adding image to header in Robohelp 2017

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 ,
May 26, 2017 May 26, 2017

Copy link to clipboard

Copied

Thanks very much. I have tried updating layout.css as follows, but have not the image to display yet, although the title bar is now displaying in a different color.

div.header {

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

            background-repeat: no-repeat;

            background-position: right center;

}

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
LEGEND ,
May 26, 2017 May 26, 2017

Copy link to clipboard

Copied

Image in the title bar is known as Favicon. You specify it by taking the following steps.

Click the Output tab, then Responsive HTML5, then configure the Favicon.

2.png

Cheers... Rick

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 ,
May 26, 2017 May 26, 2017

Copy link to clipboard

Copied

Thanks, I will try this.

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
LEGEND ,
May 26, 2017 May 26, 2017

Copy link to clipboard

Copied

Note that while RoboHelp seems to allow you to point to nearly any image that is in PNG, GIF or ICO format, there are many "converters" out there if you Google that allow sucking in images to convert to formats specifically for using as favicons. I've seen animations used. But these are always super tiny. So don't expect something like an intricate company logo to show up very well.

Cheers... Rick

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 ,
Jun 15, 2017 Jun 15, 2017

Copy link to clipboard

Copied

Thanks for the advice. I have added a .png file using the Favicon function but it is not displayed when I create the Responsive HTML5 output. Instead, the colour of the title bar is just changed to white. Does the image need to be added to the RoboHelp project first, perhaps?

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
LEGEND ,
Jun 15, 2017 Jun 15, 2017

Copy link to clipboard

Copied

While it certainly won't hurt to add the image to the baggage folder, there should be no need to.

I have noticed that the favicon can be a rather persnickety thing. Sometimes it takes a few tries to finally coax it to show. Depends on the image format that was used as well as the browser and maybe even where you are testing from.

Cheers... Rick

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 ,
Jun 15, 2017 Jun 15, 2017

Copy link to clipboard

Copied

Thanks, I will persevere with it.

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 ,
Jun 19, 2017 Jun 19, 2017

Copy link to clipboard

Copied

Still no luck getting the favicon image to display I'm afraid. I have added the image as a baggage file, and have  tried the .png and .gif file formats. If anyone has any tips on getting this image to display, I'd really appreciate it. As an alternative, I am considering adding the image as the "Home" icon on the left of the title bar. Is it possible to add a larger image in this position? Whenever I try to add an image that is wider than the example image in RoboHelp, it is not displayed correctly.

Thanks,

Mark

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
LEGEND ,
Jun 19, 2017 Jun 19, 2017

Copy link to clipboard

Copied

Are you able to share the image? If so, I'd like to test from my end and see if I can sort it.

Cheers... Rick

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 ,
Jun 19, 2017 Jun 19, 2017

Copy link to clipboard

Copied

Sure, no problem. How shall I send it to you?

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
LEGEND ,
Jun 19, 2017 Jun 19, 2017

Copy link to clipboard

Copied

Well, one way would be to just upload the image here and the other way would be to send it to me privately via email.

rickstone1975 (at) gmail (dot) com

Cheers... Rick

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 ,
Jun 19, 2017 Jun 19, 2017

Copy link to clipboard

Copied

LATEST

Thanks Rick. I'll email it over to you now.

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