Set a different logo (site identity) in a different page

It’s not working bc the page id is unique.
Your page id is:
3691

Try this:

.page-id-3691 div#logo {
    background: url(https://www.festanca.org/wp-content/uploads/2021/03/image000051-600x401.jpg);
    min-height: 140px;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    background-size: contain;
}
.page-id-3691 div#logo img {
    display: none;
}

Actually, that’s not gonna work either until your own theme is using the logo ID selector to display the heading.

@corrinarusso thank you for your reply!

Actually I tried your code and it doesn’t work as you said. I just didn’t get what I need to do in order to work. If you could let me know I would appreciate! Thank you!

Well, taking a look at your mark up right now, it’s a mess.
You should really be going back and removing all the ‘extra stuff you’ve added’ that doesn’t work. But anyway ……

I’m not sure.
The twentyseventeen theme is not outputting that image using CSS – it’s in the template itself. See here:
https://postimg.cc/2bgDqMRq
https://postimg.cc/MMnwpx42
So there is no CSS to overwrite.

My first guess would be to create a new template for these pages where you want a different header. Then just select that template when you create the page.

Since your logo is an image, the easiest solution would be creating a new header.php
However, you could possibly update the img src with css:

.custom-logo {
    content:url('https://yourwebsite.com/custom-logo.jpg');
}

Just remember to check browser support on content:url

I hope this helps!

Hello @corrinarusso ,

I am not getting very well the point, is that easy to do?

Dear @mkarimzada ,

Thank you for your answer! I am not sure if I got it ?? If you could explain that to me I would appreciate ??

Honestly, this is a pretty hacky solution altogether. The right way is to create a new template for the pages where the logo is displaying in this way.

imo, if you’re simply looking for a work around to display your banner, I would just add a background image to the header of this page and be done with it. It’s still hacky tho, fyi.

See attached:
https://postimg.cc/5H9YbFNj

CSS :
.page-id-3691, .site-branding { background-color: blue; }

@corrinarusso

Thank you again! Sounds a good solution. I posted that CSS code in additional CSS but it is not working, I mean, it works but for all the pages of the website. Do you know why is it not presenting only on that page? Am I missing something? Thank you!

@corrinarusso

SOunds like I found the solution! I was experimenting here some codes, and I found this one to work:

.page-id-3691 .site-branding img {
    display: none;
}

.page-id-3691 .site-branding {
    background-image: url(https://www.festanca.org/wp-content/uploads/2021/08/2022.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: relative;
    position: center;
    height: 180px;
    width: 1350px;
}

Looks like I have to make first disappear the old site identity and after put a new one. In the display code relative, do you think I should put one that fits better? Tell me what you think please. Thank you!

@corrinarusso

Ok, I have one main doubt now. DO you know how can I use the code for multiple pages and not only for that one?

@corrinarusso

And suddenly came another thing. THat code works for a page, but not for a post. DO you have any idea how to make it work for a post, for example, this one: festanca.org/festanca_em_2022 Thank you!

• This reply was modified 3 years, 6 months ago by festanca.

Hi @festanca

SOunds like I found the solution! I was experimenting here some codes, and I found this one to work:
.page-id-3691 .site-branding img {
display: none;
}
.page-id-3691 .site-branding {

No.
This will not work across the site.

The point of the page-id-3691 part is that it is only specific to that particular page.
As I said much earlier in this thread, this is not a good or a sustainable solution – it’s just a implmenetation to your current problem.

Just do it properly and and build a new template in your child theme.
In the time we took to reply to all of this thread it would have been done already.

Super easy:
https://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/
https://www.cloudways.com/blog/creating-custom-page-template-in-wordpress/