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

Version 7.1 help - need to use different header logos


AustinRandall

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.

Link to comment

14 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)

Link to comment
  • 0

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

Need site url to check.

@AustinRandall

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

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

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

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

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!


 

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...