Skip to main content
G
Gina_Wadley
Inspiring
July 24, 2014
Answered

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

  • July 24, 2014
  • 1 reply
  • 6762 views

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

This topic has been closed for replies.
Correct answer Willam van Weelden

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

1 reply

Willam van Weelden
Willam van WeeldenCorrect answer
Inspiring
July 24, 2014

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

    G
    Gina_WadleyAuthor
    Inspiring
    August 22, 2014

    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

    Willam van Weelden
    Willam van Weelden
    Inspiring
    August 4, 2018

    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?


    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.

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