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

Distortion of logo - frameless output

Community Beginner ,
May 23, 2023 May 23, 2023

Copy link to clipboard

Copied

Greetings,

I’m working on setting up frameless output with the Oceanic template using RoboHelp version 2022.1.188. Does anyone have recommendations for preventing the logo from being distorted when the browser window is reduced in size? I looked through the Oceanic template Header > logo options; maybe there’s a setting I’m overlooking among these options. I’m using a logo in SVG format.

Views

195

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 23, 2023 May 23, 2023

Copy link to clipboard

Copied

What do you mean by "distorted"? A screenshot would help. Please use the Insert Photo icon to include the image inline with text as it's easier to help when the image and text are visible at the same time. The settings for the logo and header sections will probably help too, as it's possibly to do with any customisations you've made.

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 Beginner ,
May 24, 2023 May 24, 2023

Copy link to clipboard

Copied

Thank you,

When the browser window is reduced in size to approximately 25% of the screen size or less, the image doesn't maintain its original appearance. I inserted an example logo below. 

 

Original:

logo_view1.png

 

 

 

 

 

After browser window is reduced:

logo_view2.png

 

 

 

 

 

 

This has happened with both svg and png files. It also occurred in HTML5 output with the Azure Blue skin. The current settings for Header > logo (Oceanic skin) are listed below.

  • Layout > height: 48px
  • Layout > width: 85px
  • Layout > right margin: 1 rem
  • Background shading is transparent.

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 24, 2023 May 24, 2023

Copy link to clipboard

Copied

In the skin there's a button at the top to switch to mobile layout. Perhaps try adjusting the logo size there as well?

 

If that doesn't work, and you can't find any other setting to modify that part of the page, you'll need to inspect the output to work out what style needs to be adjusted, add that style into a custom css file, and add the css to the skin under User Assets.

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 Beginner ,
May 25, 2023 May 25, 2023

Copy link to clipboard

Copied

Thank you, @Amebr. I'll try these suggestions.

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 Beginner ,
Jun 22, 2023 Jun 22, 2023

Copy link to clipboard

Copied

The designer on our team was able to review the files and recommended editing the layout.css in the output (template > Oceanic > 2019 > layout.css) by removing the width and height specifications in the layout header for the mobile view (noted below). Removing the width and height worked. Even though I wasn't generating mobile output (it's frameless output), the width and height noted below were affecting a minimized screen size. 

 

I'm not sure that there's a way to remove the height and width values through the RH interface unfortunately. I'm going to check into this in the next few days.

 

.RH-LAYOUT-BODY-mobile-view .RH-LAYOUT-HEADER-logo {

 width: 2.5rem;

  height: 2.5rem;

  border: none;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  background-position: center;

  padding: 0;

  cursor: pointer;

  margin-right: 1rem;

}

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 ,
Jun 22, 2023 Jun 22, 2023

Copy link to clipboard

Copied

Add that style to a custom css file in a temporary directory. Then change the width and height values to the text value "unset". Then open the skin and find the User Assets section (this location depends on the output type and skin selected), and add the css file there. Generate and see if that fixes the output for you.

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 ,
Jun 22, 2023 Jun 22, 2023

Copy link to clipboard

Copied

LATEST

Oh, and delete the other properties (border, cursor etc) from this custom stylesheet. If they're listed here you'd need to manually change them here instead of just changing the skin as normal. Only add them here if changing them in the skin doesn't flow through to the output.

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