Not a bug Logo height is ignored when switching to dark mode

JackieChun

Well-known member
Affected version
2.3.2
If you have a custom logo width and height and use the style variation selector to switch from the default (System/light) to dark, your custom logo parameters become ignored, and the following rule takes precedence instead:

Code:
.p-header-logo.p-header-logo--image img[src$="/xenforo-logo.svg"] {height: 36px;}

The result is a distorted logo.
 
Works fine for me.
and the following rule takes precedence instead:
I presume that rule should only apply if you have not changed the default logo in style properties.

Edit: width and height that you have set in style properties do not show in inspector CSS as they are explicit dimensions showing in the html as recommended by Google. This applies to both variations equally.

Code:
<img src="https://cafesaxophone.com/x-pic/cafe-logo-plain.svg" width="236" height="88" alt="CafeSaxophone Forum">

Code:
.p-header-logo.p-header-logo--image img {
    vertical-align: bottom;
    max-width: 100%;
}
 
Last edited:
I presume that rule should only apply if you have not changed the default logo in style properties.

I have changed the default logo in style properties, as well as set a custom width and height.

Edit: width and height that you have set in style properties do not show in inspector CSS as they are explicit dimensions showing in the html as recommended by Google.

I'm aware of that. Nevertheless, the height changes to 36px when the variation is toggled to dark and back to custom height when in light/system mode again.


Edit: the logo in question is a webp, and it's the retina/2x version in desktop mode, if that matters.
 
Last edited:
I can't reproduce this. Using the same or separate logos for each variation, the resulting image matches the dimensions set in the control panel.
 
@Jeremy P Are you using webp images?
I've tested with several combinations (including WebP) and in all cases the image is displayed at the configured width and corresponding intrinsic height. Unless you've configured the dark variation to use xenforo-logo.svg then there's no reason that rule would take precedence.
 
Back
Top Bottom