Rectangular logo in RH2019 Classic

[sparklyfirefly]

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

[Peter Grainge]

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

[Amebr]

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 😛  )

[sparklyfirefly]

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

[sparklyfirefly · Accepted solution]

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

[Peter Grainge]

@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