Different Logo's

[Jeroen van Aerle]

Dear Bill,

Is it possible to display a different logo(colour) on inside pages and the Home page?

Kind regards,

Jeroen van Aerle

[Bill Robbins]

Hello Jeroen,

I believe we can make that happen with a bit of CSS trickery. Here’s what to do:

1. Go to the Media Section in your WordPress dashboard and select Add New. Upload the image you’d like to use. Once the upload is complete, click on the edit link. Look on the right hand side of the screen that opens up for the File URL. We’ll need that in just a minute.
2. Go to your theme options page and choose the Advanced tab.
3. Scroll down to the Custom CSS box and add this:

   
   #logo img {
   	visibility: hidden;
   }
   
   #logo {
   	background: url(https://yoursite.com/image.png) left center no-repeat;
   	background-size: contain;
   }
   
   .home #logo {
   	background-image: none;
   }
   
   .home #logo img {
   	visibility: visible;
   }
   

4. Replace the http://yoursite.com/image.png with the URL to the image you copied earlier.
5. Update your settings.

If all goes well that should give you a different logo on the inside pages vs the home page. Let me know if you run into trouble there.

Have a great week,
Bill

[Jeroen van Aerle]

Hi Bill,

That works perfect! Thanx!

The only thing that seemed to have also changed is the click-able area to return to the home page. Can that be fixed?

Great week to you two,
Jeroen

[Bill Robbins]

Glad that helped out. Try adding this too:

#logo a {
	float: left;
}

It’s an odd fix, but I think that will place the link back there again.

Bill

[Jeroen van Aerle]

Perfect as always!

Many thanks!

[Bill Robbins]

Anytime 🙂

[Author]

Posts