Customizer: Logo behavior is inconsistent between themes

[sixhours]

Confusing things I noticed about logos when set from the Customizer:

• I have no control over the size or shape of the logo, short of some basic cropping; this is determined by the theme.
• If I change themes, my existing logo disappears and I have to re-set it by going back to the Customizer.
• The front end logo image is usually teeny, which makes it less useful for logos with words:

I'd be interested to know how often the logo comes up in Happiness chats/sessions and what kinds of workarounds they have, since this tool is not very useful in its current state. /cc @kathrynwp

[jordesign]

In my experience the common questions are around logo sizing. From memory some the Varia themes limit the logo to 100px wide in instances - which is quite limiting.

We'll often help with CSS to resize logos (when possible) more to the user's liking. I've raised this as a separate issue in #52615

[kathrynwp]

Agree with all your comments, Caroline, and the size and shape are frequent issues our users come up against.

We have a bunch of CSS workarounds for them. If the theme doesn't first downsize the logo to a small size, we can just provide some custom CSS to enlarge it, as Jordan mentioned.

But in the many themes that first downsize the logo, we can't even do that, since enlarging the logo with CSS will just make it fuzzy/blurry/pixillated. In those cases, we provide CSS to hide the logo and then re-add it using a background image.

Forcing logos to be square, as many themes do -- though I am not sure why -- is another limitation that often affects users. here's a hacky workaround for Blank Canvas (see this issue) using the background-image technique described above:

/* Site logo | XXXXXX-hc/zen */

.custom-logo-link {
    background: url('https://YOUR-LOGO-HERE.jpg') center no-repeat;
    display: block;
    background-size: contain;
}

.custom-logo-link img {
    opacity: 0;
}

Adding a logo sizer to themes and not forcing them to be square would be a much better way to approach logos. An example of a theme that does this well is Radcliffe 2.

[kwight]

See: p1620744195161400-slack-C0202PMUXLJ

[Mfarroq1]

user reported that issue here 7378765-zen