Version 7.1 help - need to use different header logos

AustinRandall · October 8, 2019

Using version 7.1 - all custom code/script/CSS solutions found thus far for differing header logos are specific to templates in Version 7.0 and don't seem to work. Have tried changing element tags with no luck. Ultimately need to use white logo on some pages and full color logo on others. Already have urls to logos established via Custom CSS > Manage Custom Files. Assuming a Page Header Code injection, but really just at a loss at this point!

Thanks in advance for the input.

tuanphan · October 8, 2019

You can use Custom CSS :after or :before to insert an image as logo on some specific pages.

Need site url to check.

@AustinRandall

basakatac · October 9, 2019

have the same issue. Any help would be appreciated

brandon · October 10, 2019

@AustinRandall: Tuan is correct that it is easiest to provide (and test) solutions if you provide a site/page URL and the view-only password if applicable

@basakatac: You might consider asking a new question instead (and providing the info mentioned).

You may also find the following helpful, since this question has been asked quite a number of times before. Although the exact CSS used varies based on template, version and your logo, the methods still apply. Methods used include:

Using :before and/or :after pseudo elements
Using CSS Filters (best if simply inverting black to white or vice versa, but will work for some color logos)
Using Javascript to change src attribute

In general, if using the CSS Filters approach (#2), you can target the logo in 7.1 like so (using your own collection-ID as applicable). By including the collection ID in the CSS, you no longer have to worry about only adding the CSS to specific pages, because the rule itself specifies which pages to apply to.

#collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img {
  /* For black/white */
  -webkit-filter: invert(100%);
  filter: invert(1);
  /* Or for converting color to white, something like this (depends on logo) */
  // filter: grayscale(100%) brightness(350%);
}

Where to I insert this code?

You add it via the CSS Editor

How do I find my collection ID?

You can identify the collection ID by using your browsers developer tools/inspector and viewing the ID of the <body> element.

The other methods listed above (#1 and #3) are also viable.

Related Links:

October 11, 2019

On 10/9/2019 at 7:48 PM, brandon said:: You might consider asking a new question instead (and providing the info mentioned).
In general, if using the CSS Filters approach, you can target the logo in 7.1 like so (using your own collection-ID as applicable:
#collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img {
  /* For black/white */
  -webkit-filter: invert(100%);
  filter: invert(1);
  /* Or for converting color to white, something like this (depends on logo) */
  // filter: grayscale(100%) brightness(350%);
}

This worked perfectly for 7.1 on inverting the logo on the homepage. Many thanks!

basakatac · October 14, 2019

Hi @brandon

I tried the following code and it reversed the colors of the background image. Do you have any suggestions?

On 10/9/2019 at 7:48 PM, brandon said:

#collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img { /* For black/white */ -webkit-filter: invert(100%); filter: invert(1); /* Or for converting color to white, something like this (depends on logo) */ // filter: grayscale(100%) brightness(350%); }

Edit:

My website link is https://shallot-piano-yxfr.squarespace.com/config/ and the password to see it:11223344. I use version 7.1 and the template is Almar. The problem occurred is; the original logo (black) changed on the pages that supposed to remain black, and the banner images on the pages I want the white logo, is reversed the image colors. Also, my logo includes green rather than black so it might effected the situation, I don't know...

basakatac · October 15, 2019

hello again @brandon,

just updated so that you can see. Thank you so much

2 hours ago, brandon said:

@basakatac: You can still post a link to trial sites. Be sure to set your site visibility to be password-protected, and provide that view-only password along with the link to the site/page in question.

ddl_ellsie · October 17, 2019

On 10/10/2019 at 3:48 AM, brandon said:
In general, if using the CSS Filters approach, you can target the logo in 7.1 like so (using your own collection-ID as applicable:
#collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img {
  /* For black/white */
  -webkit-filter: invert(100%);
  filter: invert(1);
  /* Or for converting color to white, something like this (depends on logo) */
  // filter: grayscale(100%) brightness(350%);
}
The other methods are also applicable as well.

Hi @brandonand @Vanz - could you please explain how you use this code for a 7.1 template? The template is here: https://www.squarespace.com/templates/photography?onboarding_v7_1_0819=minimal_template_store_v7_1

It's the Cath Quincy one.

I'm not sure whether to insert this code in the Design - Custom CSS section or the Advanced CSS section on the specific page I want to change?

Any help much appreciated!!

ddl_ellsie · October 17, 2019

@brandon and @Vanz don't worry, I figured it out.

Below for others 🙂

Main thing to do is to find the CollectionID for the specific page you want to change the logo for in View Page Source and replace the blue text below with your unique ID. Then insert this code into the Advanced settings - Page header code injection.

ChrisAita · October 17, 2019

8 hours ago, ddl_ellsie said:

@brandon and @Vanz don't worry, I figured it out.

Below for others 🙂

Main thing to do is to find the CollectionID for the specific page you want to change the logo for in View Page Source and replace the blue text below with your unique ID. Then insert this code into the Advanced settings - Page header code injection.

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

How did you find the ID? I can't seem to find it.

ChrisAita · October 18, 2019

9 hours ago, brandon said:

@ChrisAita: See my updated response above for an expanded explanation and image.

This happened instead.

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

colin.irwin · October 18, 2019

3 hours ago, ChrisAita said:

That looks like you've pasted the css in the wrong place.

It should be in the Custom CSS section: Log in to admin then go to Design > Custom CSS

ChrisAita · October 18, 2019

3 hours ago, colin.irwin said:

That looks like you've pasted the css in the wrong place.

It should be in the Custom CSS section: Log in to admin then go to Design > Custom CSS

That is where I did put it, it's populating there for whatever reason.

EDIT: Clarification

madsnature · November 28, 2020

I'm using the below to make our logo black on the white blog pages, but I prefer it be a brand colour ie. #1e484d.

Is there a way to specify a filter color? I've tried the hue-rotate, but can't figure it out.

.view-item .header-title-logo a img {
filter: invert(100%) ;
}

Also looked at this, but it's for going from a colour to white, rather than white to a color:

On 10/17/2019 at 9:29 PM, ddl_ellsie said:

#collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img { /* For black/white */ -webkit-filter: invert(100%); filter: invert(1); /* Or for converting color to white, something like this (depends on logo) */ // filter: grayscale(100%) brightness(350%); }

Link to page:

https://snail-bear-db64.squarespace.com/blog/mantas-right-before-my-eyes

Thanks so much!

madsnature · November 28, 2020

I found an answer that let's me upload a new logo per Blog set:

Version 7.1 help - need to use different header logos

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Archived

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources