Skip to main content
Known Participant
August 17, 2020
Question

Adding Company Logo - Frameless Skin RH2020

  • August 17, 2020
  • 15 replies
  • 1206 views

Given my problem with HTML5 layouts (sections not linking to topics), converting project to Frameless.

I feel like an idiot - but I can't seem to add the company logo to the Header (using Oceanic as base).

 

Have Header > Logo selected.

  • In the BACKGROUND section, I have updated the image path to company logo (white png, with transparent background). Image is in content>assets>images.
  • Specified image size (204 px x 82 px)
  • No shading.

 

With Header > logo-box selected, specified the same Image Size. I assume I don't select an image here (although I have tried it both ways)..

 

The company logo simply does not show up in the preview or help.

 

What am I missing? Thx.

 

 

    This topic has been closed for replies.

    15 replies

    Known Participant
    August 19, 2020

    I'll call this one closed ... it took multiple generations and clearing and whatnot, but it seems to finally work somewhat as expected. I will say that within the Skin editor, I STILL can't see the logo and background in the Home Page, and the logo in the Topic page. Trying to line-up the title with the logo was a bit hit-or-miss (using padding), as I couldn't see the preview - so had to generate/check multiple times. At any rate - the output finally resembles my expectation. 

    Peter Grainge
    Community Expert
    Community Expert
    August 19, 2020

    Would you like to create a new project with just the default topic, the skin you want to use set up, and the logo? I will see what results I get.

     

    See the Contact page on my site and send the project as instructed there. Do make sure you include a link to this thread and please do not email the project direct.

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    Community Expert
    August 19, 2020

    I *think* the file path not being remembered is correct behaviour. I *think* it's actually imported into the skin so it's not actually using the one you selected from the assets folder.

    Known Participant
    August 18, 2020

    Also, a minor niggle - Layout of logo is specified as H x W, then you go down to image size and it's specified as W x H. Come on people!

    Known Participant
    August 18, 2020

    Thanks for your input so far. I'm just having no luck. And yes, per your suggestion, I have been deleting the contents of the output folder before generating.

    For one, the logo doesn't even show up in the preview when I specify it (the background image or the logo), although the background image is successfully updated in the output (not the logo in either the header page OR the topic).

    Secondly, the Image Path doesn't seem to "stick" in the skin file. I'll change it to something in the project files (stored in contents . assets > images > SKINS > logo.png). When I close and re-open the file, the image path has reverted to some default. I'm not sure what that's all about (see below).

    Inspiring
    August 18, 2020

    Odd. The only things I can think of:

     

    One, are you deleting that /template folder in the output before compiling/generating each time you make a change?

     

    Two, there's a conflict in one of the settings in your header. For example, if the container height is shorter than your logo image height, is that suppressing the display of the logo? Here are the header settings for my Topic Page (a known, good working config).

     

    Topic Page>Header>container
    LAYOUT
    Height: 4 rem
    Width: <blank>
    Content: <blank>
    Margin: <blank>
    Padding (broken link)
    top: 0.5 rem
    bottom: 0.5 rem
    left: 1.5 rem
    right: 2 rem
    Float: Select
    Clear: Select
    Position: relative
    Display: flex

     

    Topic Page>Header>logo-box
    LAYOUT
    Height: <blank>
    Width: <blank>
    Content: <blank>
    Margin: <blank>
    Padding: <blank>
    Float: Select
    Clear: Select
    Position: absolute
    Display: flex

     

    Topic Page>Header>logo
    LAYOUT
    Height: 45 px
    Width: 60 px
    Content: <blank>
    Margin (broken link)
    top: <blank>
    bottom: <blank>
    left: <blank>
    right: 2 rem
    Padding: 0 px
    Float: Select
    Clear: Select
    Position: Select
    Display: Select

    BACKGROUND
    Shading: transparent
    Image Path: mycompanylogo.png
    Image Size (broken link)
    Width: 60 px
    Height: 45 px

    Known Participant
    August 18, 2020

    Still can't figure out what's going on. It works on the home page, but does not work on the topic page. I've tried re-sizing and it doesn't seem to make a difference. I will note that it actually worked once when outputting, but has not worked since...

     

    Inspiring
    August 18, 2020

    A couple other notes....

     

    I use the same company logo for both my home page and topic pages - however, I had to configure a smaller image size for the topic page component because it has a smaller header/top section. I had to play around with the sizes (set, compile, view; adjust, compile, view; etc.) to "get it right".

     

    Also, if you want to use a logo, company or otherwise, for the browser tab, that's configured in your output settings, NOT your skin. To configure that, navigate to:

     

    Output>Output Presets>YourOutputName>General>Favicon

    Inspiring
    August 18, 2020

    Note - you have to configure a header logo in both the Home Page and Topic Page skin components:

     

    1. Output>Skins>YourSkinName>Home Page>Top Section>logo>BACKGROUND
    2. Output>Skins>YourSkinName>Topic Page>Header>logo>BACKGROUND
    Community Expert
    August 18, 2020

    I had a quick try, unticking the "Use skin home page" checkbox in the output preset and setting a custom logo for the home page and topic page. The custom logo appears on the default page for me. 

     

    Perhaps delete the folder RoboFan suggested again?