Jump to content

Different Logo's on different pages

Recommended Posts

  • Replies 3
  • Views 680
  • Created
  • Last Reply

On the darker page (like the Work page) open the Settings panel of the page you want to change (by clicking the 'gear' icon next to the page name within the Pages panel). Then click on Advanced and add the following to the PAGE HEADER CODE INJECTION area:

<style>
.header-title-logo img {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
</style>

When you save the changes, the logo will be made lighter on the darker background.

  If this helps you, please click "Like" below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
2 hours ago, paul2009 said:

On the darker page (like the Work page) open the Settings panel of the page you want to change (by clicking the 'gear' icon next to the page name within the Pages panel). Then click on Advanced and add the following to the PAGE HEADER CODE INJECTION area:


<style>
.header-title-logo img {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
</style>

When you save the changes, the logo will be made lighter on the darker background.

  If this helps you, please click "Like" below  ⬇️

Thank you, but it seems that option is locked under "Business and Commercial Plan" only. Is there another way around this? 

 

2.jpg

Link to comment

If you are on a Personal Plan, you can add CSS to the Custom CSS panel in Design > Custom CSS instead.

However, to do this you'll need to identify the unique collection ID of each page where you want the logo to change. For example, to change the Work page, you'd add this instead:

#collection-5fea1f43c45737001d813e30 {
 .header-title-logo img {
    filter: invert(100%);
    -webkit-filter: invert(100%);
  }
}

Note that collection-5fea1f43c45737001d813e30 is the ID of the Work page. You can find the IDs of other pages by following this guide.

  If this helps you, please click "Like" below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.