CSS logo issues in Desktop version after last upgrade


(Mr X) #1

On my website foromusculo.com (Desktop version) I have a logo that is the same png both logo-big and logo-small, it was just shrinking it’s size for the logo-small. Now, after the yesterday upgrade, I see a tiny version of the logo image in both small and big version.

I have the following custom CSS for Desktop that was doing the trick before the upgrade.

.logo-small, .logo-big {
    max-height: 180px !important

}
.d-header {padding-top: 0px;height: 100px;}
.docked {position:relative;}
#main-outlet{padding-top:195px;}

.logo-small, {
    
    margin-left: 8px; @important
    
}

I had to modify the CSS to this in order to work as previously

.logo-big, .logo-small {
    max-height: 140px !important
}
.logo-small {
    max-height: 100px !important
}


.d-header {padding-top: 30px;height: 80px;}
.docked {position:relative;}
#main-outlet{padding-top:140px;}

.logo-small, {
    
    margin-left: 8px !important
    
}

.d-header #site-logo {
  height: auto;
}

So this I was able to solve myself.

The problem is that I use the Header Search Theme that since the upgrade became unaligned with the Register and Login buttons. I’d like to have the search header and the buttons aligned.

@angus or @Dax you’ve been discussing this previously in Header Search Theme maybe you could chime in.

I’m anything but CSS savvy and was a miracle my css was working fine until today’s upgrade but now I’m really confused.


(Joe) #3

Use this to align them (this changed in core recently, so it’s just old CSS applying to the new layout)

.header-search-enabled.align-right .contents {
  align-items: center;
}

then remove the margin from the search wrapper and buttons

.title .search-header {
  margin-top: 0;
}
.d-header .header-buttons {
  margin-top: 0;
}

then let the input and button inherit the height (change in core recently as well)

.title .search-header .search-icon,
.search-menu input[type="text"] {
  height: unset;
}

Now, you have this rule in your desktop theme that’s a bit problematic

.d-header {
  padding-top: 28px;
  height: 80px;
}

Now that the header uses flexbox, you can remove the padding and just increase the height, items will center themselves automatically

so you use this instead

.d-header {
  height: auto;
}

and the header will automatically adjust its height to fit the contents.

You’ll probably also have to adjust the styles for the search results pop-up

@import "common/foundation/variables";

.header-search-enabled.align-right .contents {
  .search-context,
  .results {
    background: $header_background;
    position: absolute;
    box-shadow: shadow("menu-panel");
  }
  .search-context {
    top: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .results {
    top: calc(100% + 30px);
  }
}

Now, the elephant in the room. Your logo is too big. I would recommend changing it. Right now it’s set to 140px in your theme. I understand why it needs to be that big, but it still goes against the assumption that Discourse has about the large logo. Namely that it’s going to be a wide rectangular shape.

Here’s the help text for that setting:

The logo image at the top left of your site, should be a wide rectangle shape. If left blank site title text will be shown.

If changing the logo is not an option, I would recommend at least reducing it’s height to 100px on desktop.

.logo-big, .logo-small {
  max-height: 100px;
  padding: 5px 0;
}

and here’s the end result for desktop

It’s the same story on mobile, the large logo makes the header take up almost one third of the screen


(Mr X) #4

There seems to be some stylesheet cache enabled at plugin level in Discourse? If yes please could you advise how to purge it? I have implemented the suggestions you @Johani made (thanks a lot) and the alignment worked however the search bar now disappeared completely.