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

Version 7.1 help needed- different logos on different pages

Recommended Posts

Hi all,

My website link is https://shallot-piano-yxfr.squarespace.com/config/ and the password to see it:11223344. I use version 7.1 and the template is Almar.

I want to use my black logo for most of the pages and change it to white in couple other pages. Tried some custom CSS provided on other posts but didn't work. Any help would be appreciated. Attaching my logos...

Thanks

VIP-Pedicab_Logo_Feb-'15-(2).png

vippedicab logo beyaz.png

Share this post


Link to post

@basakatac Add to Home > Design > Custom CSS if you want to use white logo

body#collection-5d929569ed1a224763913fb9 .header-title-logo img, body#collection-abcxyz2t43td1a224763913fb9  .header-title-logo img {
    -webkit-filter: invert(1);
    filter: invert(1);
}

with body#collection....b9 and is Page ID. Each page will have different ID. See how to find page id.

Share this post


Link to post

@tuanphan thank you so much for the response, it worked but it also changed the green color to purple. That's why I uploaded my 2 logos, white one should remain the green parts. Now it is like this:

Screen Shot 2019-10-23 at 9.53.03 AM.png

Edited by basakatac

Share this post


Link to post

@basakatac you can insert this code to Page Settings > Advanced > Header

<script>
 window.onload = function() {
   document.querySelectorAll('.header-title-logo img')[0].src = 'https://truyencv.com/images/no_avatar.jpg';
 };
</script>

Repalce https:///.jpg with new logo image url.

Share this post


Link to post

@tuanphan thank you so much! it worked well, but when I go to the actual site it takes 2-3 secs the logo to change. By any chance do you know why? or is there anything to do to fix it?

On 11/2/2019 at 4:39 AM, tuanphan said:

@basakatac you can insert this code to Page Settings > Advanced > Header


<script>
 window.onload = function() {
   document.querySelectorAll('.header-title-logo img')[0].src = 'https://truyencv.com/images/no_avatar.jpg';
 };
</script>

Repalce https:///.jpg with new logo image url.

 

Share this post


Link to post

I'm looking for the same kind of solution, but that code does not work for me at all. I am using the Miller template, the site is www.johnlynchspeaks.com. I tried the above code and it doesn't do anything. The code I've been using is as follows but it has some issues:

<script>
    window.onload = function() 
  {document.getElementsByClassName('Header-branding-logo')[0].src = 'https://static.wixstatic.com/media/2279fb_db1043088564425bb18696d17a327498~mv2.png/v1/fill/w_343,h_134/JLS-logo-light.png';  
    };
  </script>

The problem I have is that this code doesn't "trigger" for some reason unless you refresh the page—so the light logo shows up on the homepage when you first visit the site, but on the other pages where the dark logo is supposed to show up, it doesn't unless you refresh the page. And the same thing happens if you first visit the site from a subpage—the correct dark logo shows up, but then if you navigate to the home page, the dark one shows there as well until you refresh the page.

Anyone have a fix?

home-correct.png

subpage-incorrect.png

subpage-refreshed.png

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