Tremont Template: How can I keep a white logo in the homepage and a black logo everywhere else?

Hello,I am looking for a way of keeping the white logo on the homepage (due to a picture in the background) and inverting it to black on the rest of the pages. I tried solutions for other templates but they did not work.The website is https://infusionbogota.comThanks!

@camilacodino First, under the Design Menu, change your logo to the "black" logo since you'll be using that on the majority of your web pages.

Then go to Design > Custom CSS and upload the "white" version of your logo there. Next, you'll need to discover the Squarespace-assigned URL for that image. Just click on a blank line in the Custom CSS window, then click once on your image, and the URL will automatically be written out for you.

Highlight and cut that URL because you're going to need it for the next part of the code. Click the [Cancel] button and do not save any changes.

In the Page Settings for your Home Page, go to the Advanced Tab and under "Page Header Code Injection", insert this code:

<script>
Y.on('domready', function(){
 Y.one("#siteHeader img").setAttribute("src","https://static1.squarespace.com/static/whitelogo.png");
});
</script>

BUT replace https://static1.squarespace.com/static/whitelogo.png with the URL you just cut from the Custom CSS window! Because that's the actual URL of your own image.

Remember to click the [save] button to Save Your Changes.

From then on, when people go to the Home Page, they'll see the "white" logo, and on every other page they'll see the "black" logo.

Thank you so much! That worked perfectly

You're welcome.

I have the same question, and your answer works great except with the Tremont template when you scroll on an interior page (with the black logo) to the bottom it will bring you back to the homepage, when this happen the logo doesn't appear white when it's back on the homepage..

Is there a way to fix that?

@carlybwall I don't have any experience with the Tremont template, but if you provide a link to your live or trial site, someone can look at your specific site's underlying code in order to better help you. Thanks.

Hi Andrea thanks so much for getting back to me quickly! Still working within the trial but the url is https://carly-wall-erlh.squarespace.com/ If you scroll through any of the "eat" "drink" or "visit" pages you'll see my issue!

@carlybwall Thanks for the link. This is not working the way you think it is. When you scroll down on the "eat" "drink" or "visit" pages what you see at the bottom is NOT the "home" page, but an embedded section that has the same elements as the home page. I'm not entirely certain this code will work, but you can try it:

    <script>
     Y.on('domready', function(){
      Y.one(".has-index-nav.swap-header-color:not(.view-item) .site-branding h1 img").setAttribute("src","https://blacklogo.png");
    });
    </script>

Where you replace

https://blacklogo.png

with the ACTUAL file name of your "black" logo

Thanks for getting back to me Andrea, unfortunately that code didn't work. It's frustrating because in the Tremont template demo this isn't an issue.

@carlybwall It works in the Tremont Demo because they are NOT using a Logo Image. They are only using Text for the Site Name, which can be more easily manipulated with CSS. If I figure out a solution, I'll post it here.

Oh I see. Thanks so much!

@carlybwall Another option is to use a Logo Color, like Orange [ #FF4A00 ], that works on both light AND dark backgrounds

@carlybwall Here is a work-around for the Tremont Template. 1) Access a "blank" image here:https://static1.squarespace.com/static/54bede7ee4b024cffc01c915/t/59775b1417bffc3fac770c4f/1500994330073/Blank+Placeholder.png2) Right-click on the "blank" image and choose "Save Image As ..." and save it to your own computer3) In your own web site, upload this "blank" image as your LOGO under Design menu > Logo and Title4) Under Design menu > Custom CSS, click on "Manage Files" and upload BOTH your "light" and "dark" Logo images5) Under Design menu > Custom CSS insert this code:

.site-branding h1 {
 background-image:url(darklogo.png);
 background-repeat: no-repeat;
 background-size: contain;
}

.has-index-nav.swap-header-color:not(.view-item) .site-branding h1 {
 background-image:url(lightlogo.png);
 background-repeat: no-repeat;
 background-size: contain;
}

6) Highlight the text "darklogo.png" and press [Delete] on your keyboard to erase it, then click on the "dark logo" image in your Right-Hand "Manage Files" side panel

7) Highlight the text "lightlogo.png" and press [Delete] on your keyboard to erase it, then click on the "light logo" image in your Right-Hand "Manage Files" side panel

That's it. On the "white" pages, the dark logo will display and on the "dark" pages the light logo will display.

Hi, this worked perfectly for me, but the size of my logo has shrunken. Is there a way to control the sizing of the logo with this code?

@andreadev this doesn't seem to be working for me. the homepage keeps the dark version of the logo while the rest of the pages on the site also use the dark logo. the only time the light logo is shown is when a user scrolls all the way down to the repeat viewing of the homepage after the footer.

@ranlee This post is over a year old, so it's entirely possible that the 2 solutions discussed here will not work for whatever template that you're using. I recommend you create a New Post with the full details of which template you're using and the URL of the site you're working on. With a link to the site, people are better able to offer solutions that can help you.

@AndreaDev , this worked ohhhh so good....until... once I go to a site with the black logo, my white logos never go back to white, unless I refresh.. Is there a solution to this?

Site is a work in progress, but it's www.outofnorm.al. Thanks a million!

Couldn't submit this as a reply for some reason, but this is a reply to @ranlee above, querying the fact that @AndreaDev 's solution didn't work on the homepage:

Hi @ranlee I'm a little late to the party, but you just need to add an additional bit of code to Andrea's solution, see below:

 .homepage .site-branding h1 {
   background-image:url(lightlogo.png);
   background-repeat: no-repeat;
   background-size: contain;
 }

.site-branding h1 {
   background-image:url(darklogo.png);
   background-repeat: no-repeat;
   background-size: contain;
 }

 .has-index-nav.swap-header-color:not(.view-item) .site-branding h1 {
   background-image:url(lightlogo.png);
   background-repeat: no-repeat;
   background-size: contain;
 }

(Please note to any other reader's you can't just post this wholesale, you need to do a bit more work uploading files to the Custom CSS area and then pointing the 'light' and 'dark' PNG sections to the right location. See Andrea's full post above for the remaining work required.

Regards,

Rory

@andreab hi there! Unfortunately the first code you provided didn't work for me either. I use Almar template and desperate to change my logo in different pages. Tried everything please help

Hello basakatac

The empty picture has to be exactly the size of your logos.
The code takes the white space from the empty picture and puts the new logo inside it.
If you do this it works fine on all devices and you don't have to put extra Code.
Greeting Flavio_

On 5/31/2017 at 11:14 PM, andreab said:

 @andreab your answer just saved my website. I had the same exact issue and that code worked perfectly.

Thank you so much.

I'm trying this, but getting a syntax error on line 1 😔 Any idea what I'm doing wrong?

I have the Tremont theme & ajax enabled since the background is a video (still takes forever to load though)

screenshot of code, website is: https://www.daofinancialsolutions.com/

9 hours ago, reneel2020 said:

I'm trying this, but getting a syntax error on line 1 😔 Any idea what I'm doing wrong?

I have the Tremont theme & ajax enabled since the background is a video (still takes forever to load though)

screenshot of code, website is: https://www.daofinancialsolutions.com/

 

above is script code

Your screenshot is Custom CSS box, for CSS code.

script code: Add to Home > Settings > Advanced > Code Injection > Footer