Jump to content

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

Recommended Posts

  • Replies 22
  • Created
  • Last Reply

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

Link to comment
  • 1 month later...

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?

Link to comment

@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

Link to comment

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

Link to comment
  • 6 months later...
  • 5 months later...

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

Link to comment

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

Link to comment
  • 2 months later...
  • 11 months later...

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

Link to comment
  • 2 weeks later...
  • 3 weeks later...

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_

Link to comment
  • 4 months later...
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.