Theme Mellisa - different Logo Top and Bottom

[jpbraun]

Hi,
II use a logo that fits perfectly with the top menu bar.

The Mellisa theme now places the same logo in the footer. However, due to the smaller size and the conversion from white to black, it is barely recognizable.

I would therefore like to use a customized logo for the footer. Is this possible? If so, how do I integrate it?
Jan

[michaelfluegge]

I guess it is a question of CSSS styling. Can you provide a link? What do you want to change? color? size? both? Or maybe disable the logo?

[michaelfluegge]

PS: If you want to use another image as logo, you need to change the footer.hbs, I think. You have to remove the link/connection to the original logo and replace it with a link to the new one.
I can help finding the relevant information, if you want to go this way.

[jpbraun]

Thank you very much!
Yes, I just want to use a different image.
I have looked into footer.hbs and found:
<a class="footer__logo" href="{{@website.url}}"> {{#if @website.logo}} <img src="{{@website.logo}}" alt="{{@website.name}}" width="{{@website.logoSize.width}}" height="{{@website.logoSize.height}}"> {{else}} {{@website.name}} {{/if}} </a>
The original logo (I want to keep it for the header) is stored under \sites\sailing-sy-jolea\input\media\website.
It is probably easiest if I put an image file with the name “logo-footer.png” in the same directory.
How should I then adapt the code in footer.hbs?

[jpbraun]

https://sy-jolea.de/

[shaunkiiservices]

Hi,
Since you have a transparent PNG logo, you could try adding this to your custom CSS:

footer__logo>img {
   max-height: 8rem;
   max-width: 10rem;
   filter: grayscale(1) brightness(5%);
}

This would
-- convert the image to a grayscale in case it has colors; and
-- lower the brightness of your logo i.e. darken your logo against the lighter background.

Conversely, say if the background is dark, you would instead add this custom CSS to lighten the logo:

footer__logo>img {
   max-height: 8rem;
   max-width: 10rem;
   filter: grayscale(1) brightness(2000%);
}

This method does not require having light and dark versions of your logo, so you need not modify the .hbs files.
Works for transparent PNG as well as SVG logos.

-Shaun

[michaelfluegge]

@jpbraun, that was what I meant with CSS styling. The biggest advantage is, from my point of view, that you can put the CSS code in the Publii App under Tools & Plugins / Custom CSS, and that's it.

[jpbraun]

Thank you very much for your support!