Skip to main content
S
sparklyfirefly
Inspiring
April 29, 2021
Answered

Rectangular logo in RH2019 Classic

  • April 29, 2021
  • 5 replies
  • 348 views

I have seen several posts about this subject, but none seem to quite tell me what I want to know: how do I add a rectangular company logo instead of  a square one? 

I'm using RH 2019 Classic (14.0.11.0). Which file is this information stored in and which element determines the shape? I am happy to go delving and try to sort it out but I don't know where to start looking.

Our logo is rectangular and is much too small if I have to constrain it to a square.

Thanks

Laura

    This topic has been closed for replies.
    Correct answer sparklyfirefly

    I spoke to a friendly web developer who solved my issue within about 10 minutes!

    For anyone else who might want to use a rectangular logo with Robohelp 2019 Classic, with Responsive HTML5 output here is what he did.

    In both the layout.css and layout-rtl.css files (found in the !ScreenLayout! folder for the layout used) :

    body.media-desktop div.header div.logo

         margin-top: -10px;

         height:50px;

         width:178px;

         margin-right:3em;

    With these settings we used a logo of  178 x 50 px

     

    That worked for us, you may need to play about with the values.

    Laura

    5 replies

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    May 7, 2021

    @sparklyfirefly Thanks for posting that. I will add it to my site as well. It is one of those things that would not be overly difficult for someone with a web developer's knowledge. The tricky bit can be finding a friendly one. 🙂

    ________________________________________________________
    See www.grainge.org for free Authoring and RoboHelp Information

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    S
    sparklyfireflyAuthorCorrect answer
    Inspiring
    May 7, 2021

    I spoke to a friendly web developer who solved my issue within about 10 minutes!

    For anyone else who might want to use a rectangular logo with Robohelp 2019 Classic, with Responsive HTML5 output here is what he did.

    In both the layout.css and layout-rtl.css files (found in the !ScreenLayout! folder for the layout used) :

    body.media-desktop div.header div.logo

         margin-top: -10px;

         height:50px;

         width:178px;

         margin-right:3em;

    With these settings we used a logo of  178 x 50 px

     

    That worked for us, you may need to play about with the values.

    Laura

    S
    sparklyfireflyAuthor
    Inspiring
    April 30, 2021

    Thanks both for the replies. I'll give it a go.

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    April 29, 2021

    If you want to try it, assuming Responsive HTML5 in Classic, then the layout.css file is what you're going to need to change. But it's a lot of moving parts, and not as simple as just defining an image width and height. Use the browser developer tools to inspect the bits you want to change, then try to find the multiple locations you need to change in the css - remember to inspect at different screen size to account for mobile and tablet, landscape and portrait screen sizes.

     

    If you have a friendly web developer, they should be able to figure out what to change if you gve them a copy of the output, plus the source layout.css file. (I highly recommend this method for speed and sanity 😛  )

     

     

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    April 29, 2021

    I think it would involve digging into the skin folders in your project and figuring out what to change. I wish you the best of luck with that.

     

    I just looked at the same issue in 2019 New UI and there the problem has been addressed. You add the logo and set the width you want with Preserve Aspect Ratio selected. You didn't say which skin but all the responsive skins will have this.

     

     

    You can upgrade and it doesn't touch your existing Classic project. An option until you are familiar with the very different new UI would be to upgrade, generate using the new UI but continue working in Classic until you are ready to change. If you have to generate again before working with the new UI, you would upgrade the Classic project again to another folder. Not ideal but it fixes the problem until you are ready to work in the new UI.

    ________________________________________________________
    See www.grainge.org for free Authoring and RoboHelp Information

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices