Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

Site URL: http://alyssaduet.com

So the logo on the home page is white, when I go to my "About" a page you can barley see the logo since the page is white. I do have my logo in black as well. Is there a way to change the logo on the "About" page but keep it linked with my Home page. Thank you. 

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0
Posted (edited)
#collection-5b3e8ab8352f5323cc5513a3 .Header-branding-logo {
    filter: invert(1);
}

This isn't replacing the image, but its a neat little trick.

If you need to do it on more than one page, you will need the page ID's. I can get them if you tell me which pages.

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

If you use Business Plan, you can also add this to Page Settings > Advanced > Header

<style>
  .Header-branding-logo {
    filter: invert(1);
}
  img.Mobile-bar-branding-logo {
    filter: invert(1);
}
</style>

If you use Personal Plan, use @rwp code (Add to Home > Design > Custom CSS), to find Page ID, see this guide.

#collection-5b3e8ab8352f5323cc5513a3 {
  /* desktop */
  .Header-branding-logo {
      filter: invert(1);
  }
  /* mobile */
    img.Mobile-bar-branding-logo {
      filter: invert(1);
  }
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
Posted (edited)
.Header-branding-logo {
	filter: invert(1);
}

img.Mobile-bar-branding-logo {
	filter: invert(1);
}

#collection-57d6c581f5e23170b59ec7e3 .Header-branding-logo {
	filter: invert(0) !important;
}

Looking at your page more, I think its actually better for you to globally invert the image, and then just invert it back for the home page.

Good call on the mobile @tuanphan

 

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
1 minute ago, rwp said:

.Header-branding-logo {
	filter: invert(1);
}

img.Mobile-bar-branding-logo {
	filter: invert(1);
}

#collection-57d6c581f5e23170b59ec7e3 .Header-branding-logo {
	filter: invert(0) !important;
}

Looking at your page more, I think its actually better for you to globally invert the image, and then just invert it back for the home page.

Good call on the mobile @tuanphan

 

Okay, thank you! So do I add this in the Custom CSS? And do I need to add anything specific to the code for my particular logo?

Share this post


Link to post
  • 0

Custom CSS, nothing else needed!


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...