Replace title with logo?

[laura.pop]

Dear folks,

I am trying to insert a logo.png that should replace the website title in the Kirby Starter Kit/default theme.
While I was able to place a logo as a background image in the CSS, I was not able to delete the title there.

I’ve found the display of title in the header-snippet and replaced it with a png (see screenshot below), but now it is displayed way to big and seems not to work with the CSS. I am not a PHP specialist, so I can not tell how to correctly insert the logo-image and make it work with the CSS. Any help would be appreciated, as all the answered questions similar to mine here in the forum are obviuosly referring to the old Kirby default theme. I guess this is a common (and hopefully easy to answer) question…

Thanks,
Laura

[texnixe]

The image width in the Starterkit is set to 100%, that means that the image will fill all the available space of the header column. So in your CSS, you can either make the column smaller or change the image width for that image.

[laura.pop]

Dear texnixe,
thanks for the support, I am able to style the column size via CSS, but I get a really strange glitch/artifact effect from the frame of the inserted image (see below). Is there a way to include the logo in the CSS without inserting it in the PHP code of the header snippet? So far this has not worked for me - the logo picture would not reference back to the home site.

Thanks!
Laura

[texnixe]

I missed your error above, there are the php tags missing

<img src"<?= url('assets/images/logo.png') ?>">

And yes, instead of putting the image in the header, you could put it as background image into your stylesheet, but you have to make sure to address the url correctly.

background-image: url("../images/logo.png");

[laura.pop]

Dear Texnixe,
unfortunately this didn’t work for me, because the image would not link back to my home site. So far I came to the following solution: I set the picture as a backrground image in the CSS class .branding a (which works similar to the css logo class used on the getkirby-site) and I call the class branding in the header snippet inside the brackets (see below):

.branding a {
border-bottom: 0;
display: inline-block;
background: url(…/images/logo.png) 20% /contain no-repeat;
height: 4.75rem;
}

Everything fine so far, but without the HOME text within the a href brackets, the background image disappears as soon as I reach the media breakpoint. Any hints how to solve this problem?

Thanks so far!
Laura

[laura.pop]

Okay, solved it. I missed the width in the CSS.

.branding a {
border-bottom: 0;
display: inline-block;
background: url(…/images/logo.png) 20% /contain no-repeat;
height: 4.75rem;
width: 40%;
}

[bajs]

@texnixe

<img src"<?= url('assets/images/logo.png') ?>">

@laura.pop @texnixe there is equal sign missing therefore the snippet is not working.
This one works:

<img src="<?= url('assets/images/logo.png') ?>">

[carox]

Hi,

Something related to the same line of code:

<a class="logo"> href="<?= $site->url() ?>"><?= $site->title() ?></a>

The URL is visible while it should just show the site title.

What am I doing wrong? I’m actually following step by step the tutorial.
The difference is that I’m not working locally but on a remote server.

Thanks!

[texnixe]

@carox

<a class="logo"> href="<?= $site->url() ?>"><?= $site->title() ?></a>

You have a syntax issue there. The href attribute is not within the opening a tag.

[carox]

Isn’t exactly how it is in your video?

[texnixe]

No, please inspect the line you posted here closely, you close the tag after the class attribute

[carox]

I must have become blind… Thanks!