Jump to content

Changing the Logo (white/black) on Marta

Recommended Posts

Posted

Site URL: https://www.svencichowicz.com

Dear community,

on my website (Version 7.0 – Brine family - Marta template),
I use a white logo on a dark background at the top of my "home" page.

All the other pages happen to have a white background, so the logo
cannot be seen on them.

I would like to use a black logo on all these pages with a white background.
So my question is: can I apply these changes to my website and how would I do it?

Thank you for your help.

Sven 

Bildschirmfoto 2020-09-23 um 15.27.35.png

Bildschirmfoto 2020-09-23 um 15.28.17.png

Posted (edited)

You would need to past the following code into advanced header code injection for every page you want to invert the logo:

<style>
.Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

However, it looks like you have solved this already. 

Edited by derricksrandomviews
Posted

Add to Home > Design > Custom CSS

body:not(.homepage) img.Header-branding-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}
body:not(.homepage) img.Mobile-bar-branding-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}

I see mobile header logo is white on homepage. Do you want to fix?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 year later...
Posted

Hey guys for whatever reason this codes works in squarespace but I have to refresh the page on any browser I've tried for the black logo to appear. Does anyone happen to know how to fix this? I'm so thankful for any help you can provide, this is driving me nuts!

On 9/24/2020 at 7:51 AM, derricksrandomviews said:

You would need to past the following code into advanced header code injection for every page you want to invert the logo:

<style>
.Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

However, it looks like you have solved this already. 

 

Posted (edited)

@ldehrone

If your site is v7.0 I'm thinking the curse of Ajax Loading strikes again! Try turning off Ajax Loading to see if the problem goes away.

Please note that turning off Ajax Loading will effect the performance of your site. Ajax Loading is designed to increase the loading speed of your site after it first loads.

You have to decide whether the custom code you are trying to use is worth turning off Ajax Loading.

paul2009 has a great article on the ins and outs of Ajax Loading. Please see Why does Squarespace code only work on refresh?

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.