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

Version 7.1 help - need to use different header logos

Question

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.

Share this post


Link to post

12 answers to this question

Recommended Posts

  • 2

@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:

  1. Using :before and/or :after pseudo elements
  2. Using CSS Filters (best if simply inverting black to white or vice versa, but will work for some color logos)
  3. 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?

How do I find my collection ID?

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

Related Links:

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0
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! 

Share this post


Link to post
  • 0

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

VIP-Pedicab_Logo_Feb-'15-(2).png

Edited by basakatac

Share this post


Link to post
  • 0

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.

 

Share this post


Link to post
  • 0
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!!

Edited by LCraig

Share this post


Link to post
  • 0

@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>

Share this post


Link to post
  • 0
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.

Share this post


Link to post
  • 0
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);
}

 

Screenshot 2019-10-18 at 2.00.46 AM.png

Share this post


Link to post
  • 0
3 hours ago, ChrisAita said:

Screenshot 2019-10-18 at 2.00.46 AM.png

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 

 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0
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

Edited by ChrisAita

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