Black Theme

[yikes]

Dear all,

can someone share how I would insert a custom logo in the page header where this icon is located as the default ?

Unbenannt.PNG (43.14 KiB) Viewed 43256 times

[nox]

Hey yikes,

the icon is part of the Black theme, and you can replace it there:
[yourdomain]/themes/black/css/icons-graphic-design.png

Add your custom logo with the same name "icons-graphic-design.png" to overwrite the original icon.

To change the size of the icon/logo open and edit style.css
Look for #logo and change the width and height.
Maybe for #logo {somewhere between opened and closed brackets} add

Code: Select all

background-size: cover;

to make sure it fits inside defined width and height.
Save the changes.

[nox]

If you want to change everything through WonderCMS admin panel:

- upload your logo going to Settings > Files upload and copy logo image url (yourdomain/data/files/logo.png)
- inside footer where the ©2024 Your website is, paste CSS snippet below (if using Summernot Editor, click on </> Codeview icon, to apply changes after editing click again):

Code: Select all

<style>
#logo {
background-image: url(yourdomain/data/files/logo.png);
background-size: cover;
width: 72px;
height: 72px;
margin: 4px 20px;
}
</style>

background-image - paste your logo image url inside brackets. Change width, height and margin as you see fit.

[yikes]

Dear Nox, thanks for pointing the way; I did what follows:

Uploaded my custom PNG logo which is bigger in terms of filesize (14k) with the exact same name
Double checked it does have the same permissions server-wise
Tweaked the style.css and added the "squeezer" in there as per your suggestion.
Result:
The old finger-logo is still being delivered while I can confirm that there is NO other file by this name on the whole box.
Is there a cache I would need to purge or something ?

[nox]

Hey yikes,

I previously tested on WonderCMS demo and it worked fine.
Installed a WonderCMS on my server and you are right, the "www hand" icon is there after changing icon or css. It's cache.
You could try out Cache thumbs plugin (under Admin panel > Settings > Plugins tab).
Let me know if that worked out for you.

Edit: this plugin is for admin area only, not intended for website cache. I should read twice before posting

[yikes]

Installed, tested, no joy - the finger logo is gone. The new one is not showing. How do I actually USE the plugin ?

[nox]

Hey yikes,

the plugin is for admin area cache only. Doesn't affect the website, doesn't help in your case.

While your website is opened in the browser, press CTRL + SHIFT + R, a hard reload to see the changes.

Note that the width and height are set to 55px, so your new logo should be the same or change width and height in the Black theme > css > style.css under #logo

[turboblack]

yikes show us the adress. maybe you use jpg. npt png, or the size is different, or something else

what is the width of your logo, it should be clearly written in pixels as written above. for example, if the logo is 140*140 then it should be written like that

width: 140px;
height: 140px;