Jump to content

Version 7.1 help - need to use different header logos

Recommended Posts

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.

Link to comment
  • Replies 14
  • Views 5.3k
  • Created
  • Last Reply

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

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

Link to comment
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! 

Link to comment

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

Link to comment
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!!

Link to comment

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

Link to comment
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.

Link to comment
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 

 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
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

Link to comment
  • 1 year later...

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!


 

Mads

Digital & Communications Director
Marine Megafauna Foundation

I like big fish and I cannot lie.

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.