Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
dan1570047689

Replace Logo Image Per Page?

Question

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

Edited by chriscc
retag

Share this post


Link to post

Recommended Posts

  • 4

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.

Edited by dan

Share this post


Link to post
  • 2

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.

Share this post


Link to post
  • 1

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


The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 1

So after trying and trying I found the solution for the FIVE template:


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

Just enter your URL and it should be done!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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?

Edited by Cody

Share this post


Link to post
  • 0

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?

Edited by neeklamy

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Edited by goldntriangles

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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


I'm new to Squarespace but having fun with it. I know my way around Confluence (wiki) so I have used localized and global CSS before as a beginner but with good effect. I am always grateful for the help of the user community and appreciate all who give of their time to help. -- Phil

Share this post


Link to post
  • 0

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


I'm new to Squarespace but having fun with it. I know my way around Confluence (wiki) so I have used localized and global CSS before as a beginner but with good effect. I am always grateful for the help of the user community and appreciate all who give of their time to help. -- Phil

Share this post


Link to post
  • 0

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>


Share this post


Link to post
  • 0

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.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

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