Logo placement

[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

[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 6743 times

[durhamwilly]

Thanks a million! I will give it a try.
Much appreciated. (PS: I am using the Paper-P theme).....

[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>

[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:

Code: Select all

url(data/files/logo.png);

with

Code: Select all

url(mywebsite.com/data/files/logo.png);

[durhamwilly]

Thanks again, Nox..... you are a wealth of information! I will give it a go.....

[durhamwilly]

Thanks Nox..... the above worked well for my Paper-P theme!

[nox]

Great! I'm glad it worked out for you.

[durhamwilly]

Thanks very much for the info, digitalrohit!

[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.