How can I make the Logo White on my “Home” page?

You’ve prob­a­bly seen that the logo we’re using looks dif­fer­ent on Home­page than on the oth­er pages. This is hap­pen­ing because we’re using a fil­ter on the front page, to make it white:

.page-template-front_page .header--transparent .site-branding--image {
-webkit-filter: invert(1) hue-rotate(180deg) contrast(2);
filter: invert(1) hue-rotate(180deg) contrast(2);

This kind of fil­ter is work­ing fine with our col­or scheme but you may use anoth­er SVG logo on your web­site and the fil­ter might need some changes in order to have the same effect.

Well, there’s a lit­tle web­site that might help you get things done eas­i­ly, with­out need­ing to open the inspec­tor of the brows­er and look­ing for the right com­bi­na­tion of prop­er­ties. This is the page that will help you find the right fil­ter for your logo — play with each prop­er­ty and find the com­bi­na­tion for your file → CSS Fil­ter Effects

There’s one lit­tle prob­lem with this tool. There’s no option to upload and pre­view your own logo, you can apply fil­ters only over the image that is already appear­ing on the page. Here you will need to open the inspec­tor of the brows­er (right click on the image and click Inspect, in Chrome). Now, just replace the src val­ue with the link of your logo (sup­pos­ing that it is already uploaded on your web­site).

For exam­ple, this is the link to the logo from our demo:

This is the way it will look on the page:

The final step, once you found the right fil­ter, is to copy the snip­pet below and paste it under the Appear­ance → Cus­tomize → Addi­tion­al CSS sec­tion.

.page-template-front_page .header--transparent .site-branding--image {
//paste here the filter code

This article applies to Listable, as they share the same underlying structure.

Updated on May 31, 2017

Was this article helpful?