heyitsritesh @Walys (mentioning you because you liked) There is a way to actually achieve what you are looking for, although it's somewhat convoluted in the sense that you need to remove the logo you have uploaded, and replace it with CSS. I'm doing this successfully on metabullet.com - admittedly, I am using a Font Awesome icon as my logo (as you do 🙂), but it's also possible to use an image.
Here's an example
- Remove the logo from the site
- Change the
.Header-title class to include this custom CSS
.Header-title {
font-size: 0px;
}
The "trick" here is to set the font size to 0px meaning it won't actually be visible
- Then using the
:before attribute, add this CSS (note that you'll need to tailor it to suit your needs)
.Header-title:before {
background-size: cover !important;
background: url(https://cdn.metabullet.com/assets/images/light.webp);
}
This should now yield something like the below
When using the fof/nightmode extension, you can use the classes of
body when (@config-dark-mode =false) {
}
body when (@config-dark-mode =true) {
}
These will act as the serving classes depending on which mode you choose. To this end, it's then possible to serve the relevant image dependant on the mode, which allows you to change it.
As an example
body when (@config-dark-mode =false) {
.Header-title {
font-size: 0px;
}
.Header-title:before {
background-size: cover !important;
background: url(https://cdn.metabullet.com/assets/images/light.webp);
}
}
body when (@config-dark-mode =true) {
.Header-title {
font-size: 0px;
}
.Header-title:before {
background-size: cover !important;
background: url(https://cdn.metabullet.com/assets/images/dark.webp);
}
}
Drawback
There is a drawback however in that effectively hiding the .Header-title element means that it is no longer clickable - therefore, the <a> tag is rendered inoperable. As a workaround, I have created a "Home" link pointing to https://metabullet.com and used fof/links to add it to the menu.
Hope this helps ?
