Jump to content

Changing the logo on different pages

Go to solution Solved by paul2009,

Recommended Posts

Hi everyone,

I've been sent in this direction by Squarespace support after they told me it's not currently something they do but might be achievable with code? I wondered if anyone could help me?

I've just changed template to Nueva (which has a main homepage with a photo as the whole page) and have a logo that I want to be in the top centre in the header so I've made the logo transparent with white writing so that it can be seen through the whole page photograph with the navigation links/buttons across the top header.. However on all the other navigation pages of the website, I plan to have a white header with black navigation links and matching logo. So I've got the same logo inverted with black writing and a white background to match the header in all the other pages.

Is it possible to do this? So that I have one logo on the homepage and on all the other pages of the site it is the same logo just a different colour, sort of inverted? Example website: https://www.jbivphotography.com

The main page logo is what I have at the moment with a transparent background and white writing and then if you click on 'About' he has white background on the top with black writing.

Many thanks in advance for any help!

Link to comment
28 minutes ago, Macman4789 said:

Hi everyone,

I've been sent in this direction by Squarespace support after they told me it's not currently something they do but might be achievable with code? I wondered if anyone could help me?

I've just changed template to Nueva (which has a main homepage with a photo as the whole page) and have a logo that I want to be in the top centre in the header so I've made the logo transparent with white writing so that it can be seen through the whole page photograph with the navigation links/buttons across the top header.. However on all the other navigation pages of the website, I plan to have a white header with black navigation links and matching logo. So I've got the same logo inverted with black writing and a white background to match the header in all the other pages.

Is it possible to do this? So that I have one logo on the homepage and on all the other pages of the site it is the same logo just a different colour, sort of inverted? Example website: https://www.jbivphotography.com

The main page logo is what I have at the moment with a transparent background and white writing and then if you click on 'About' he has white background on the top with black writing.

Many thanks in advance for any help!

Did you get it sorted

image.png.fff07c8706b3b697fa5d7f2963bc5472.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
9 minutes ago, bangank36 said:

Did you get it sorted

image.png.fff07c8706b3b697fa5d7f2963bc5472.png

Hi, no that's not my website. That's just an example of what I am trying to do. On the main page of this site, he has the 'John Branch' logo in white writing over a whole page photo but then on the other pages he has the black logo like this. This is what I'm trying to do but don't know how?

Link to comment
2 minutes ago, Macman4789 said:

Hi, no that's not my website. That's just an example of what I am trying to do. On the main page of this site, he has the 'John Branch' logo in white writing over a whole page photo but then on the other pages he has the black logo like this. This is what I'm trying to do but don't know how?

it better with your current site url to help

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 minutes ago, bangank36 said:

it better with your current site url to help

https://chrisheskethphotography.com

You'll see the logo at the top in white which is what I want but then if you click on 'services' in navigation you'll see my logo doesn't show write. Against the white background I'd like the logo to be black writing instead of white (I have this logo in black writing also). Thank you

Link to comment
2 hours ago, Macman4789 said:

https://chrisheskethphotography.com

You'll see the logo at the top in white which is what I want but then if you click on 'services' in navigation you'll see my logo doesn't show write. Against the white background I'd like the logo to be black writing instead of white (I have this logo in black writing also). Thank you

Add this into the page code injection that you want to invert the color

<style>
	.Mobile-bar-branding-logo,
    .Header-branding-logo {
        filter: invert(1);
    }
</style>

Using Code Injection – Squarespace Help

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 hours ago, Macman4789 said:

Thank you! Do I have to type in what colours or is it just copy and paste that?

Copy and paste, it invert the image already

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, Macman4789 said:

Sorry to bother you again but the inverting of the logo doesn't seem to work on an iPad so would that be mobile? Is there something that can be done? Thank you

try to clear cache, it display well for me

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
18 hours ago, bangank36 said:

try to clear cache, it display well for me

Thank you for your reply. Yes clearing the cache seemed to work however the logo on the Home page is black when it should be white (just on iPad not desktop)? If you remember, my logo uploaded is white with a transparent background so that it is white on a full page photo. Then on the other pages I have inverted it using your code so that it is black. Do you know why it is showing black on the homepage on mobile? Thank you!

Link to comment

Site URL: https://chrisheskethphotography.com

Hi,

I'm really struggling to get my logo to display correctly after using code that someone kindly shared with me and wondered if there was anyone out there that could help?

I'm using the Brine template and have just recently begun setting it up. I've left the standard pictures/content whilst I try and sort my logo out. I basically have an index page with a full page photography which goes all the way to the top (including the header navigation). The rest of my pages on the site have a white background. I basically want my logo to be white on the index page (so that it stands out better on the photo) and then black on all the other pages that have a white background.

I've tried doing this both ways (using a white logo with transparent background or vice versa with a black logo) but just can't seem to get it working correctly. At the moment, I have a black logo uploaded to my site with the code to invert it on my homepage (which is an index page). This is working great as it's showing white and inverting correctly however on all the other pages that have a white background (which don't have any code in them) the logo isn't displaying properly. In theory it should just display as it is, black on a white background! You'll see on the site www.chrisheskethphotography.com

Can anyone help at all before I tear my hair out!? Thank you in advance, the code I have used is:

<style>
	.Mobile-bar-branding-logo,
    .Header-branding-logo {
        filter: invert(1);
    }
</style>
Link to comment
  • Solution
58 minutes ago, Macman4789 said:

I've tried doing this both ways (using a white logo with transparent background or vice versa with a black logo) but just can't seem to get it working correctly.

Hi

Contrary to what you've been told in this thread, adding CSS styles to the the code injection header won't work on your site. This is because you are using a newer Brine-family template (Nueva) and this template has a feature called "Ajax Page Loading". This feature makes your site load faster by ignoring the page header. Code may appear to work when you are logged onto your site, but later you'll realise that it isn't working for visitors.

The first step to fixing this is to remove the code from every page header where you have added it. Do this first.

Having removed all the other style code, your site should now be showing the black logo on every page, so the next step is to add some CSS (styling code) to change the logo to white on the homepage only.

The correct way to add styles to Squarespace is to add them to Design > Custom CSS. Open this panel and then insert the following:

.homepage {
  .Mobile-bar-branding-logo, .Header-branding-logo {
     filter: invert(1); 
  }
}

Let me know how you get on.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
2 hours ago, paul2009 said:

Hi

Contrary to what you've been told in this thread, adding CSS styles to the the code injection header won't work on your site. This is because you are using a newer Brine-family template (Nueva) and this template has a feature called "Ajax Page Loading". This feature makes your site load faster by ignoring the page header. Code may appear to work when you are logged onto your site, but later you'll realise that it isn't working for visitors.

The first step to fixing this is to remove the code from every page header where you have added it. Do this first.

Having removed all the other style code, your site should now be showing the black logo on every page, so the next step is to add some CSS (styling code) to change the logo to white on the homepage only.

The correct way to add styles to Squarespace is to add them to Design > Custom CSS. Open this panel and then insert the following:


.homepage {
  .Mobile-bar-branding-logo, .Header-branding-logo {
     filter: invert(1); 
  }
}

Let me know how you get on.

That's brilliant! What you described was exactly right, it was displaying correctly when I was logged in making changes but then when I visited the site as a guest it just wasn't displaying correctly. Can I just ask, if I wanted to create another index page or a new homepage and I called it for example 'test' would I have to change the part in the code to .test instead of .homepage { ? Sorry if it's a stupid question!

Thanks again 🙏

Link to comment

No question is a stupid question 🙂.

".homepage" is a special class that refers to the homepage on Squarespace. To include other pages, you'll want to find the page's unique page "Collection ID". I wrote a guide that explains how to find these here: How to apply CSS to one Squarespace page.

For example your 'Test' page has the ID "#collection-6019e49418b9b410718e3bc0". To include this you'd change the first line to:

.homepage, #collection-6019e49418b9b410718e3bc0 {

That's the homepage reference and the collection ID separated by a comma. You can add further page IDs, each separated by a comma.

I hope that helps.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
54 minutes ago, paul2009 said:

No question is a stupid question 🙂.

".homepage" is a special class that refers to the homepage on Squarespace. To include other pages, you'll want to find the page's unique page "Collection ID". I wrote a guide that explains how to find these here: How to apply CSS to one Squarespace page.

For example your 'Test' page has the ID "#collection-6019e49418b9b410718e3bc0". To include this you'd change the first line to:


.homepage, #collection-6019e49418b9b410718e3bc0 {

That's the homepage reference and the collection ID separated by a comma. You can add further page IDs, each separated by a comma.

I hope that helps.

That's perfect, thanks so much for your help. I've spent all week trying to figure this out!

Link to comment
1 hour ago, paul2009 said:

No question is a stupid question 🙂.

".homepage" is a special class that refers to the homepage on Squarespace. To include other pages, you'll want to find the page's unique page "Collection ID". I wrote a guide that explains how to find these here: How to apply CSS to one Squarespace page.

For example your 'Test' page has the ID "#collection-6019e49418b9b410718e3bc0". To include this you'd change the first line to:


.homepage, #collection-6019e49418b9b410718e3bc0 {

That's the homepage reference and the collection ID separated by a comma. You can add further page IDs, each separated by a comma.

I hope that helps.

Hi, sorry to bother you again but I've just tried to access the website on mobile using an iPhone and the logo doesn't display properly on the Homepage and the Test page as I've just followed your instructions to make the logo white on the Test page. Do you know why? Is it because on mobile there isn't a full page photo on mobile and instead there is a white header? Sorry to bother you again and thanks!

Link to comment
10 hours ago, Macman4789 said:

Hi, sorry to bother you again but I've just tried to access the website on mobile using an iPhone and the logo doesn't display properly on the Homepage and the Test page as I've just followed your instructions to make the logo white on the Test page. Do you know why?

If your mobile pages will have a white header then the CSS won't need to affect these because the logo can remain black on all pages.

To change the CSS so that it only applies to the desktop versions of the pages you can remove   .Mobile-bar-branding-logo,  and re-save it.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 2/7/2021 at 9:16 AM, paul2009 said:

If your mobile pages will have a white header then the CSS won't need to affect these because the logo can remain black on all pages.

To change the CSS so that it only applies to the desktop versions of the pages you can remove   .Mobile-bar-branding-logo,  and re-save it.

That's great I've just tried it now and it's perfect. Thanks again, massive help 👍

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

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.