Page 1 of 2
Logo placement
Posted: Sun Dec 24, 2023 4:22 am
by durhamwilly
Hi.....
I am running WonderCMS ver 3.4.3, and would like to put my logo at the top of the site. I've tried a few things, and managed to get it to show up, but it messes up my admin area. And I do understand that we shouldn't make changes to index.php, as anything will be overwritten on updates.
Anybody help me out>
Thanks .....
PS: I love WonderCMS!
Durhamwilly
Re: Logo placement
Posted: Wed Dec 27, 2023 12:53 pm
by nox
Hello Durhamwilly,
what theme are you using?
You are free to change theme.php file (themes - ThemeName - theme.php).
Here is an example logo for Sky theme:
Add inside theme.php, where section id="topMenu" starts (but just copy <a class... line>)
Code: Select all
<section id="topMenu">
<a class="logo" href="<?= $this->url() ?>"><img src="<?= $this->url() ?>data/files/logo.png"></a>
This will add logo above menu. Uploading logo.png using Wonder CMS admin area will show the logo there.
And this is a part that goes inside style.css
Code: Select all
.logo {
border: 0;
display: inline-block;
margin-top: 1rem;
line-height: 1;
text-decoration: none;
}
.logo:hover {border: 0;}
.logo img {
width: auto;
height: 64px;
}
You can set custom size under .logo img (width or height).
- sky-logo.png (17.35 KiB) Viewed 8503 times
Re: Logo placement
Posted: Thu Dec 28, 2023 6:19 am
by durhamwilly
Thanks a million! I will give it a try.
Much appreciated. (PS: I am using the Paper-P theme).....
Re: Logo placement
Posted: Thu Dec 28, 2023 5:11 pm
by nox
You are welcome
For Paper P theme, check inside theme.php for:
Code: Select all
<a class="navbar-brand" href="<?= $Wcms->url() ?>">
<?= $Wcms->get('config', 'siteTitle') ?>
</a>
and add img before site title, so it looks like this:
Code: Select all
<a class="navbar-brand" href="<?= $Wcms->url() ?>">
<img class="logo" src="<?= $this->url() ?>data/files/logo.png"><?= $Wcms->get('config', 'siteTitle') ?>
</a>
If you want to remove site title and show the logo:
Code: Select all
<a class="navbar-brand" href="<?= $Wcms->url() ?>">
<img class="logo" src="<?= $this->url() ?>data/files/logo.png">
</a>
And for styling, add somewhere, maybe inside footer (through Admin panel, if you are using Summernote Editor, click on </> icon) and paste:
Code: Select all
<style>
.navbar .container .navbar-brand {
display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
}
.logo {
width: auto;
height: 40px;
}
</style>
Re: Logo placement
Posted: Thu Dec 28, 2023 5:22 pm
by nox
Adding logo without editing theme.php:
Paste inside footer or sidebar area, while logged in admin:
Code: Select all
<style>
.navbar .container .navbar-brand {
display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
}
.navbar-brand:before {
content: '';
background: url(data/files/logo.png);
background-size: contain;
width: 40px;
height: 40px;
}
</style>
Manually set width and height of your logo, 40px is an example.
EDIT:
Just a suggestion, if url path to the uploaded logo.png doesn't match and doesn't show logo in the header,
copy logo.png full path under
Files tab and replace
background: with
Code: Select all
url(mywebsite.com/data/files/logo.png);
Re: Logo placement
Posted: Thu Dec 28, 2023 6:07 pm
by durhamwilly
Thanks again, Nox..... you are a wealth of information! I will give it a go.....
Re: Logo placement
Posted: Fri Dec 29, 2023 4:02 pm
by durhamwilly
Thanks Nox..... the above worked well for my Paper-P theme!
Re: Logo placement
Posted: Tue Jan 02, 2024 3:41 pm
by nox
Great! I'm glad it worked out for you.
Re: Logo placement
Posted: Tue Jan 02, 2024 4:54 pm
by durhamwilly
Thanks very much for the info, digitalrohit!
Re: Logo placement
Posted: Wed Feb 14, 2024 12:35 pm
by NorfolkGreg
Ah! Another case where my Wish List request
viewtopic.php?t=4450
for a <header> block in the standard index.php file would have come in handy.
