AzureBlue layout - header - logo constrained to a square

New Here ,
Feb 02, 2018

Copy link to clipboard

Copied

Hello everyone,   I am using the Azure Blue HTML5 responsive layout.  it looks great, but I wanted to replace the light blue circle in the left of the header with my company's logo.  I was able to do that by editing the layout, but when I publish the webhelp, the company logo is squished into a square.  Is there a way to tell RH not to constrain the image into a square?  Thanks.  -Robert Shairulla

TOPICS
HTML5 layout

Views

281

Likes

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

AzureBlue layout - header - logo constrained to a square

New Here ,
Feb 02, 2018

Copy link to clipboard

Copied

Hello everyone,   I am using the Azure Blue HTML5 responsive layout.  it looks great, but I wanted to replace the light blue circle in the left of the header with my company's logo.  I was able to do that by editing the layout, but when I publish the webhelp, the company logo is squished into a square.  Is there a way to tell RH not to constrain the image into a square?  Thanks.  -Robert Shairulla

TOPICS
HTML5 layout

Views

282

Likes

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
Feb 02, 2018 0
Adobe Community Professional ,
Feb 17, 2018

Copy link to clipboard

Copied

Sorry for the slow response.

I think the easiest solution is to create a square image where you company logo is centred in it and the area around your logo is the same colour as the layout. That way the outer area of the image is square but only the round logo is seen as the rest blends in.

I have been told that what you want can be done by editing the layout.css but I believe it was not that easy and took some time. It depends on your CSS skill levels.

You might want to post a feature request.

Please follow this link to report bugs and request features. The more people who do so, the higher it gets prioritised.

https://tracker.adobe.com

Post the link to that bug/feature in this thread and others can vote for it. I will.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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
Reply
Loading...
Feb 17, 2018 0
New Here ,
Feb 19, 2018

Copy link to clipboard

Copied

Hi,

I had a very similar issue and the way we handled this was by editing the custom.css template inside RH.

You have to change the padding (which is found in the div.wTOCTreePageSelect file.) for example we changed it to 5px, 0px, 5px 20px (it's about trial and error), all depending on the size of your logo.

Remember you have to do the same thing to the Mobile, and Tablet as well; otherwise it won't change the logo.

I feel your pain and have spoken to Adobe about this specific issue numerous times. It makes no sense that they offer no option in the Customize Layout to change the size of the logo or location.

Hope this helps you.

Likes

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
Reply
Loading...
Feb 19, 2018 0
New Here ,
Feb 21, 2018

Copy link to clipboard

Copied

Thanks for the advice.  Much appreciated.  I will let everyone know how it works out.  I am writing the help for a brand new application on new hardware so the logo is the least of my worries right now 🙂

Likes

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
Reply
Loading...
Feb 21, 2018 0