• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Rectangular logo in RH2019 Classic

Explorer ,
Apr 29, 2021 Apr 29, 2021

Copy link to clipboard

Copied

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

Views

182

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , May 07, 2021 May 07, 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

...

Votes

Translate

Translate
Community Expert ,
Apr 29, 2021 Apr 29, 2021

Copy link to clipboard

Copied

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.

 

image.png

 

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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 29, 2021 Apr 29, 2021

Copy link to clipboard

Copied

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

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 30, 2021 Apr 30, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

LATEST

@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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp