Replace Logo Image Per Page?

I am wondering if it is possible, using CSS alone, to replace the logo image on one page of the site, with another image entirely.

If not CSS, then I'm sure it can be done with java script or JQuery, but I'm new to both and not sure what the code would look like.

If someone has an idea for either method, it would be appreciated. We are using the Dovetail template and our site is not yet available.

Thanks,D

I found a solution that works for the template we are using, which is Dovetail.

1. Upload the latest jquery.js file to your site
2. Reference it in your page’s Page Header Code Injection area found in Page Configuration > Page Settings > Advanced.

   <script src="/s/jqueryM-183.js"></script>

3. Insert Calling code in a Code Block on the page you want to sway out the logo where:

   [code]<script>$('h1.logo').empty().html('<a href="%SOME LINK%"><img src="%SOME IMAGE%.jpg" alt="%SOME DESCRIPTION"></a>');</script>

   [/code]

4. $('Object.Class') equals the object’s HTML you want to replace. In our case, there was an h1 class=logo tag which wrapped our logo's image and link, but it would work with any object that has a class= reference. Then it just becomes a matter of inserting the new HTML.

If you read through the jQuery documentation, it’s important to use the .empty() function first so that some browers don’t get confused between the old and new objects.

Hope others find this useful.

Hi, I'm very much a newbie to this, and I was hoping someone could clarify some (probably rudimentary) things... What does it mean to upload the latest jquery.js file to my site? Also, how would I write the html for my logo? I currently have it saved as a jpg. Any light you can shed on this would be appreciated.Thanks!

This post has almost 1K views but I've tried messing with this JQuery code for hours and can't get it to call/function.

Has anyone got this work? Any other suggestions on replacing a logo on one page?

There has got be to a simple way to do this in CSS but I haven't figured it out yet. Wish squarespace didn't require such a hack job to create functionality and easy CMS.

I'm getting closer to replacing the logo on my home page using only CSS in my Five Template. I've got the replacement logo to show up as a background image but can't figure out the ID for the original logo so I can turn it off:

#collection-51c9d4fae4b03b61cc1cac9a #banner {
 background-image: url(https://static.squarespace.com/static/51c9d4f9e4b03b61cc1cac97/t/51f29fcce4b016f9a99edb5b/1374855116989/logo-with-phone1.png);
 background-position: center;
 background-repeat: no-repeat;
 width: 100%;
 height: 300px;
}
img {
 display: none
}

Clearly the "img {display: none}" isn't getting rid of the original logo. Any tips on finding the ID?

I've taken the liberty of fixing up your comment - there was some mistakes in the CSS - and moving it out to an answer. What's the URL of your site so we can see what's happening?

@JoleneT Uploading the latest jQuery - well, Dan is talking about placing a JavaScript file on your Squarespace site. But, if you're still struggling with this I would advise against that - so much hard work!

It's easier by far for you and better for your visitors if you use Google's hosted versions: jQuery.

@dan @Cody @neeklamy can anyone please help me with my site?

I also want to change the logo on different pages, I've tried everything posted on here and on this post - http://bit.ly/18sgjIj.

Here's the site I'm working on https://iain-currie-9kq2.squarespace.com/ and I'm using the Takk template.

If anyone can give any help or advice, I'd really appreciate it!

ThanksIain

Hi - I am using the Shift template and would really like to know how to change the logo image for different pages. I've tried the above but nothing seemed to happen - should I be inputing a file name/image name into the code somewhere? If so where?

Help would be greatly appreciated!

Thanks!

Hi - I am using the Shift template and would really like to know how to change the logo image for different pages. I've tried the above but nothing seemed to happen - should I be inputing a file name/image name into the code somewhere? If so where?

Help would be greatly appreciated!

Thanks!

This is how I did it on Avenue template. I'm not sure if it will work for Shift but here it is:

I inserted this code into the Advanced > Page Header Code Injection for the Blog page.

h1.logo {
 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;      
 content: url('insert url here') no-repeat;
}

Hope this helps!

Does anyone have answers for the forte template?

Does anyone have answers for the forte template?

I used the following JQuery for the Native template and while it does get the logo to show up on one page of the site, when the page loads, it first shows the original logo and then switches to the new logo. I had to reduce the logo size on this page, so when the original logo shows up first on this page it's smaller, which makes the issue more noticeable and very annoying!

Is there anything I can do to update this code so the original logo doesn't show up first?

Thank you for your help!

I know this is an old thread, but here's the solution I used:

Inject this code into the page you want:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(function() {$('#logoImage').find('img').attr('src', '<urlofimagegoeshere>')})
</script>

This code both finds the logo image and replaces it, since it's somewhere in the h1 id/class which is two levels up.

This worked for me on the Bedford Template. Change #logoimage to whatever the img element is for your template since there is no element id (must be a squarespace thing). You can find this by right clicking the img in Chrome and using "inspect" for all newbies out there.

Good luck!

Thank you for this! I am in Bedford and tried inserting your code. The main logo still showed up. Is it possible I'm not entering the correct #logoimage info from the Chrome 'inspect' feature?

This is the page that I'm trying to insert a new image in: https://streettohomecampaign.squarespace.com/street-to-home-1/

Thanks for any thoughts!

Worked very well for me in Bedford!! Thank you himynameisjoel.

Worked very well for me in Bedford!! Thank you himynameisjoel.

Hi!

Unfortunately this code doesn't work with my new Hyde template... but worked on my old Pacific Template..

Help would be greatly appreciated!

Thanks!

Hi!

Unfortunately this code doesn't work with my new Hyde template... but worked on my old Pacific Template..

Help would be greatly appreciated!

Thanks!

just find the solution :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<script>
$(function() {$('.Header-branding-logo') .attr('src', 'YOURIMAGELINKHERE')})
</script>

I am trying to code this for the Marta template. Please if anyone could help me for this template.

Thank you in advance!

I am trying to code this for the Marta template. Please if anyone could help me for this template.

Thank you in advance!

I recommend you start a new question, explaining what you want to do and giving a link to your site. I'll help if I can.

Thank you. I am still new to this sorry. I have posted the question here:

https://answers.squarespace.com/questions/135791/is-there-a-way-to-have-a-different-logo-on-differe.html

Thank you again!