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

    JoeJitsu
    JoeJitsu
    Known Participant
    June 16, 2016

    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.


    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...

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