Jump to content

Changing logo to custom colour on some pages only

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://drdot.squarespace.com/?noredirect

Hi there,

 

I need to change the site logo to a custom shade (#D7D0B6) on the pages that have the Light theme only. 

URL: drdot.squarespace.com
PW: drdot

I've managed to use this code to inverse the logo:

<style>
.header-title-logo img {
    -webkit-filter: invert(50%);
   filter: invert(50%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert=’1′);
  }
</style>

but I don't want the logo to be black/grey. I've tried looking through the forum but no luck.

Thanks!

Link to comment
  • Replies 19
  • Created
  • Last Reply

Top Posters In This Topic

3 hours ago, LouiseDrever said:

Site URL: https://drdot.squarespace.com/?noredirect

Hi there,

 

I need to change the site logo to a custom shade (#D7D0B6) on the pages that have the Light theme only. 

URL: drdot.squarespace.com
PW: drdot

I've managed to use this code to inverse the logo:

<style>
.header-title-logo img {
    -webkit-filter: invert(50%);
   filter: invert(50%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert=’1′);
  }
</style>

but I don't want the logo to be black/grey. I've tried looking through the forum but no luck.

Thanks!

which logo you want to apply?

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
5 hours ago, LouiseDrever said:

I'm not sure I follow your question. All the solutions I've seen only change it to black, I'd like it to be a custom shade. 

Let me try to explain. CSS can only be used to change the brightness, saturation or invert the colours (white becomes black, black becomes white, orange becomes blue and so on). If you want to use a specific colour for your image, you'll need to provide a new image file that has been created in that colour. This can then be substituted for the standard site logo. Does that help?

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

That's totally fine, I thought that would be the case. Probably should have been clearer in my questioning!

What would be the best way to do this? Upload the new image file as a pseudo-element? I'm a bit worried about getting it in the exact same position as the regular logo.

Thanks very much.

 

Link to comment

If the two image files are identical in size and aspect ratio, it is usually easiest to use JavaScript to replace one with the other, although the site will need to be on a Business Plan (or above) to do this. Simply add the image file through the CSS panel and then provide the URL.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 4 weeks later...
4 minutes ago, LouiseDrever said:

I've uploaded it as a PNG to the CSS panel (Dr Dot Logo Blue)

It's not currently on a subscription yet, however. Does it need to be before the Javascript can be added?

The code will work during a trial, but you'll need to share the URL of the image with us 🙂

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Thanks for the nudge @LouiseDrever. As I mentioned, you should be able to achieve this with some simple JavaScript in the header of the relevant pages. Let me know if you need more specific guidance or have any issues.

This will affect the desktop version of the site logo only:

<!-- Change the desktop site logo on this page - Squarespace 7.1 -------->
<!-- Copyright Soundfocus Digital Media [https://sf.digital] ------------>
<!-- Use freely in your code injection. Do NOT re-publish. -------------->
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    logo = document.querySelector(".header-title-logo img");
    logo.src = "https://static1.squarespace.com/static/62c56e67c33c8b4e495786c4/t/630caff988077278ea12e60b/1661775865417/Dr+Dot+Logo+Blue.png";
  });
</script>

 

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • Solution
15 minutes ago, LouiseDrever said:

It doesn't appear to be working on other media sizes, just desktop

The previous version that I posted only affected the desktop, so here's an update that allows you to change both the mobile and the desktop logos. The first file affects desktop. The second file affects mobile mode.

<!-- Change the site logos on this page - Squarespace 7.1 --------------->
<!-- Copyright Soundfocus Digital Media [https://sf.digital] ------------>
<!-- Use freely in your code injection. Do NOT re-publish. -------------->
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    logos = document.querySelectorAll(".header-title-logo img");
    logos[0].src = "https://static1.squarespace.com/static/62c56e67c33c8b4e495786c4/t/630caff988077278ea12e60b/1661775865417/Dr+Dot+Logo+Blue.png";
    logos[1].src = "https://static1.squarespace.com/static/62c56e67c33c8b4e495786c4/t/630caff988077278ea12e60b/1661775865417/Dr+Dot+Logo+Blue.png";
  });
</script>

 

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Hey @paul2009 sorry to be a total pain, but I have another question. 

I realised it made more sense to have the dark logo be standard and apply the JavaScript on the home page only. 

I've uploaded the dark version to the site title and logo section and then tried swapping out the image url of the logo using the code you provided, but it's not changing anything.

When I inspect the code and hover over the png, I can see that although the file name is correct, it's still showing the dark blue version (see attached screenshot). I hope this all makes sense.

Any help appreciated, thank you! 

Screenshot 2022-09-06 at 10.17.46.png

Link to comment
On 9/6/2022 at 4:22 PM, LouiseDrever said:

sorry to be a total pain, but I have another question. 

I realised it made more sense to have the dark logo be standard and apply the JavaScript on the home page only. 

I've uploaded the dark version to the site title and logo section and then tried swapping out the image url of the logo using the code you provided, but it's not changing anything.

When I inspect the code and hover over the png, I can see that although the file name is correct, it's still showing the dark blue version (see attached screenshot). I hope this all makes sense.

Any help appreciated, thank you! 

Screenshot 2022-09-06 at 10.17.46.png

Do you still need help?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
20 hours ago, LouiseDrever said:

Yes please! Can you see where I've gone wrong? Thank you

To change mobile logo, try this to Page Header

<style>
  .header-mobile-logo img {
    content: url(https://cdn.pixabay.com/photo/2022/09/07/10/01/landscape-7438429__480.jpg);
}
</style>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

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