How to move a logo to the right side of the header and resize the image box - Customized Responsive HTML 5 Layout - RoboHelp 11

[Gina_Wadley]

I created a customized HTML 5 Layout based on the Theme1_Standard layout.  Our logo is rectangular and will not fit in the default image box.  I want to move the logo to the right side of the header.  I don't see how to do this in the Layout Customization dialog.  Is there a way to do this in the html code somehow?  By the way, the logo looks great in the desktop and table Preview from the Layout Customization dialog.  It is the correct size and the header title adjusts to the right so that there's enough space for the rectangular logo. However, in the phone preview, the logo is tiny.  And when I generate the Responsive HTML5 single source layout with the new theme, the logo is tiny in the Chrome preview, even for desktop.

Thanks.

Gina

[Willam van Weelden · Accepted solution]

You can change this behaviour in the file main.css. It is a bit more work than you might expect though;

Open the file with a text editor and search for 'table.headertable td.logo'. Here you will find settings for the width of the logo, something like:

width: 4em;

Simply make this wider to adjust the image. Note that you will need to do this several time, as several devices have different widths for the logo.

Kind regards,

Willam

[Carol Elkins]

Willam, could you also respond to Gina's comment about the logo being too small and resizing too small? I'm having that problem, too. I changed the logo to an 80x80 px PNG file as you suggested in a recent Webinar. How do I prevent the logo from scaling down in Responsive layout as the size of the screen decreases? I want the logo to retain its size relative to any text in the title bar.

Thanks,

Carol

[Gina_Wadley]

Willam,

You are a GENIUS!  I'm sorry I didn't respond earlier as the project was on hold.)

I edited the main.css stylesheet - everywhere it had "logo", I changed the width and height.  It had been 1.5em, for example, in some places, so I experimented with 20em, etc.  I'm still tweaking it, but my horizontal logo is looking great! 

Now I'm just trying to find where to change the title for the browser title bar...

Thanks very much.

Gina

[Gina_Wadley]

By the way, I am using the "Theme1_Standard" Responsive Layout screen layout with a Multiscreen HTML5 single source layout, and it's working fine.  It's not that you can't use the new layouts interchangeably with Multiscreen and Responsive single source layouts, it's that you can't edit the logo settings in the the screen layout editor - Layout Customization dialog.  You have to edit the main.css, as Willem suggested.

Gina

[Willam van Weelden]

Scaling down requires a little more work. Chaing everything in the CSS will work. I will go into the details in my upcoming webinar of September 4th: Adobe - Online events : Event Details It's more efficient than typing it out.

Kind regards,

Willam

[Gina_Wadley]

Hi Willam,

I just registered for your webinar. 

Thanks very much!

Gina

[KimberVA]

Is this webinar available for those of us just now reading this forum?

[Captiv8r]

I'm sure a recording exists where you might play it back.

[KimberVA]

Thanks, I guess I was hoping for a link. There isn't a title for this webinar, and I don't see any intuitive way to search for the particular one where Willam covers this.  Does anyone have a link?

[Carol Elkins]

Try Sess 1) Beyond the Wizard: Editing HTML5 layouts FOR RoboHelp 11  There are handouts available as well.

[Captiv8r]

I was hoping Willam would see this thread again and have the link handy.

[Willam van Weelden]

There are 2 webinars on this. Here are the links to the overview pages where you can also get the example files:

• http://www.wvanweelden.eu/blog/2014/08/20/recording-beyond-wizard-editing-html5-layouts-robohelp-11-...
• http://www.wvanweelden.eu/blog/2014/09/04/recording-beyond-wizard-editing-html5-layouts-robohelp-11-...

[sharon27lily]

Does the same hold true for RoboHelp Version 2015? I have the same issue.

sharon27lily

[Willam van Weelden]

The basics are the same. Only the layouts in RH2015 have more options (read: more complicated HTML and CSS).

Which layout in RoboHelp 2015? For Azure Blue, set the div.logo to float to the right. And set the right alignment of the div.searchbar-extra to make room for the image.

For RH2015, you will want to use the SCSS files for this as it will make your life a lot easier. You can download them from: RoboHelp screen profiles and layouts

[sharon27lily]

Yes, I am working with Azure Blue. I am looking to change the size of the logo only for this area, next to the title, on the left. The size should be significantly larlger. The .scss does not appear to have a standard height or width for the logo. Being that I'm new to RH 2015, I don't want to play around too much, until I understand more.

[sharon27lily]

I have downloaded the Azure Blue SCSS files, and Koala. I think I need a little help in figuring out how to make the Help logo and the title work together, in size and placement. I have taken classes Part 1 and Part 2, but still am not sure how to use the SCSS files. Is this documented somewhere?

To be more specific, I have been able to align the company logo with the name of the Help system for landscape. Once I change to desktop, however, the size of the logo gets larger (regardless of the size being the same) and comes down lower on the screen. I am currently trying to adjust this in layout.css. When I get to tablet size, the logo is much smaller and the title overlaps it.

Regards,

Sharon

[Willam van Weelden]

The SCSS files themselves aren't documented.

In the header section of the topic, there are 2 fields relevant: Div with class logo and a div with class title. In the SCSS, you'll find styling for the div.logo and the div.title. See lines 1433 and 1439. There you change the placement. Currently, both div's inherit the float left from their parent on line 4131. If you disable the float there, you can position the elemetns as you please.

The size of the logo is set in the variable $heading-content-size. The height and width of the container on desktop are the same. (Line 1434 and 1435). You can manipulate the height and with there.

[JoeJitsu]

Willam van Weelden​  where can I locate the scss zip file for RH 2015? The link on Adobe's Help page is broken, and I know of no other way to obtain those files...

[Willam van Weelden]

The link is broken. I'll ask Adobe to restore it. For now, here is a direct link: https://helpx.adobe.com/content/help/en/robohelp/robohelp-screen-profiles-layouts/_jcr_content/main-...

The links works at the time of writing (22-06-2016)

[JoeJitsu]

The link works now. Thank you for your help!

[SReynolds2138]

Hi William!

Willam van Weelden - I  am trying to do something similar with Indigo 2017 layout. I want the logo to be centered. Do you have any suggestions?

[Willam van Weelden]

The quickest method is to change the margin on the header. In the CSS, add:

body.media-desktop div.header div.header-align {

margin-left: 50%;

}

You'll have to play with the value to center align the content. Though it may shift when trying different resolutions.

When you want to make it pixel perfect, you'll have to dive in deeper. The div.header-align has left floating elements. This is done to allow different size logo images and different heading lengths. Changing it means that the alignment has to be translated to inline blocks. That requires trial and error. If you only want the logo image to be shown: simply change the hyperlink of the logo to not float. And set the text-alignment on the header-align to center. That centers your logo image. Though the text requires all kinds of love to display correctly.