Skip to main content
D
DeeMay
Known Participant
May 23, 2023
Question

Distortion of logo - frameless output

  • May 23, 2023
  • 3 replies
  • 504 views

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.

    This topic has been closed for replies.

    3 replies

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    June 23, 2023

    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.

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    June 23, 2023

    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.

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    May 25, 2023

    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.

    D
    DeeMayAuthor
    Known Participant
    May 25, 2023

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

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    May 23, 2023

    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.

    D
    DeeMayAuthor
    Known Participant
    May 24, 2023

    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:

     

     

     

     

     

    After browser window is reduced:

     

     

     

     

     

     

    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.
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices