Changing logo to custom colour on some pages only

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!

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?

Hi there,

I'm not sure I follow your question; I only want to change the colour of the current logo on the pages which have a Light background. All the solutions I've seen only change it to black, I'd like it to be a custom shade. 

Hope that helps?

Thanks

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?

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.

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.

Hi @paul2009 I'm sorry for the late reply; I've been waiting for the client to approve the logo colour. Almost a month later... 🙃

I've uploaded it as a PNG to the CSS panel (Dr Dot Logo Blue) and the site is https://drdot.squarespace.com/ 

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

Thanks!

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 🙂

Ah! Ok sorry, this is it:

https://static1.squarespace.com/static/62c56e67c33c8b4e495786c4/t/630caff988077278ea12e60b/1661775865417/Dr+Dot+Logo+Blue.png

Thanks!

On 8/29/2022 at 1:45 PM, LouiseDrever said:

Ah! Ok sorry, this is it:

https://static1.squarespace.com/static/62c56e67c33c8b4e495786c4/t/630caff988077278ea12e60b/1661775865417/Dr+Dot+Logo+Blue.png

Thanks!

Hello, just bumping this to see if anyone can help. Thanks very much.

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  ⬇️

Thanks, @paul2009! That worked perfectly.

Oops @paul2009 spoke too soon - just one thing, it doesn't appear to be working on other media sizes, just desktop (I've only checked on iPad and mobile but they're still showing the old pale version). 

Briliant, thanks so much @paul2009

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! 

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! 

Do you still need help?

33 minutes ago, tuanphan said:

Do you still need help?

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

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>

Thank you @tuanphan, problem solved.