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

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

Question

19 answers to this question

Recommended Posts

  • 1

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

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Edited by AndreaDev
Initial Revision

Share this post


Link to post
  • 0

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

Edited by ranlee
Initial Revision

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

 

Share this post


Link to post
  • 0

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_

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...