Staff replied Templates Joomla 6

How can I change the color of a white logo in the Mednic template?

Asked by Enis 1 week ago Last activity 1 week ago

I'd like to change the color of my logo in the Mednic template. When I change the colors in the template settings, the logo color doesn't change at all. It stays green the whole time, even though there's no green anywhere in the template settings. How can I apply the chosen color if my logo image is white?

Removing the sticky-header filter with the following CSS was suggested, but that only preserves the image's original colors. It would leave a white logo white rather than apply the color I selected:

#sp-header.header-sticky #sp-logo .logo .logo-image {
  filter: unset !important;
}

3 replies

Ziaul Kabir Staff

1 week ago

Hi Enis,

Thanks for reaching out to us.

Could you please share your website URL so we can inspect the logo and investigate this issue further?

Thank you.

Best regards,

Enis Asked this

1 week ago · edited

Hi.
Thank you for your quick response. The website isn't live right now. But it's a simple matter. Try changing the logo color to red, for example, in your template. Is easily to change the color of the menu and the lines in the menu. However, the logo color remains the original color from the template (green) after each change. The logo is in SVG format.
Kind regards.
Enis

Ziaul Kabir Staff

1 week ago

Hi Enis,

Thanks for the details. I found the cause.

The logo color in the sticky header comes from a fixed CSS filter in the Mednic template. It isn't connected to the color settings in Template Options, so changing the color to red doesn't affect it. The filter first turns any logo black and then tints it green. That's why your white logo always shows green. Using filter: unset only removes the tint, so a white logo stays white.

To get your own color, add this under Template Options → Custom CSS:

#sp-header.header-sticky #sp-logo .logo .logo-image,
.view-search #sp-header #sp-logo .logo .logo-image {
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(6000%) hue-rotate(355deg) brightness(95%) contrast(110%) !important;
}

The filter values above are an example for red. To use your own color:

Open a "hex to CSS filter" generator and enter your hex color (for example #e63946).
Copy the filter: value it gives you.

Replace the filter value in the rule above with it, and keep !important.
Then save and clear your browser cache. The logo will use your color in the sticky header.

Best regards,