Changing site logo based on dark/light header to match TT2 Demo
-
Hello,
The twenty twenty-two demo looks like it is using different logos depending on which header is used in the template. For example, dark header uses the white binocular icon for the site logo & and the default header uses the black binocular icon.
I am trying to replicate this on my site but whatever site logo I select changes the logo globally in all template parts. Here is my procedure:
Twenty twenty theme v1.2/Wordpress 6.0
Appearance>Editor>Template Parts
Select Header
Click on the Site Logo block
Click on Replace and select the black version of logo from the media library.
Click on Save & I see a secondary window “Are you ready to save?” If I leave the logo box checked, then I can click on the second save button. If I uncheck logo, save button is non functional. So, I am forced to check the logo box and hit save again. Black site logo is updated in every instance on site.
Now, I want to use a white logo in the Header (dark, small) template part. If I follow the same procedure and switch to white, then everything is updated to white in all templates sitewide.
So basically, I am going around in circles with this one! How in the world did they get it to work in the demo?
-
Hi @kdcurry!
The way the site logo block currently works, it will only allow you to set a single image as the “global” site logo. If you edit that block from any location and save the changes, it will get updated everywhere.
Regarding the Twenty Twenty-Two demo, I am seeing these two types of headers:
The “Light” header in the homepage:
The “Dark” header on archives and single posts:
It could be the case that I am not fully understanding your question but from what I am seeing, the same image is being used in both the dark and the light headers. Here is a direct link to the image.
In other words, the demo site does not use different logos in different sections and this is not currently possible.
That being said, you could conceivably modify one of the headers and replace the site logo block with a simple image block to achieve this goal.
Alternatively, if you are looking for an “inverted” style, you could also go about doing this with a little bit of CSS using the invert filter. I made a quick example here.
You could then leverage the built-in CSS body classes to invert the logo only in certain contexts.
I hope that helps!
- The topic ‘Changing site logo based on dark/light header to match TT2 Demo’ is closed to new replies.
