How to change footer and announcement color on specific website sections?

Store Design
,
1

Hi

Can anyone help me, I got a code to use as I want to change the colour of the announcement and footer sections of only one area on my website. The announcement and footer are pale pink on the site but we have just launched a men’s line so want it grey in the ‘mens collection’ and the ‘mens product’ section. The problem is I have updated my site to DAWN 10.0 and now can’t seem to transfer it over. Here are the 2 codes I have tried, but I am going wrong somewhere.

Can someone please point me in the right direction?

Jennifer3011_0-1686324468230.png
Jennifer3011_0-1686324468230.png1424×688 51.7 KB

Jennifer3011_1-1686324624721.png
Jennifer3011_1-1686324624721.png1024×361 30.1 KB

Neither is working and I’m not sure what I am doing wrong!

https://jenniferluishaircare.com

Thank you!

2

Hello @Jennifer3011

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.announcement-bar, .announcement-bar__announcement {
    background: grey !important;
}
footer.footer.color-accent-2.gradient.section-sections--15565628964909__footer-padding {
    background: grey !important;
}
3

Hi @Jennifer3011

Follow these step and try it: Online store > Theme > Edit code > go to file global.js Then, insert this code in the end of file.

// Change Footer And Announcement Colour
const url = window.location.href
if(url.includes('collections/mens')) {
  const yourColor = 'gray'
  const headerDom = document.querySelector('.announcement-bar')
  const newsLetterDom = document.querySelector('.newsletter.center .newsletter__wrapper')
  const inputEmail = document.querySelector('#NewsletterForm--sections--15565628964909__923af299-839e-4239-bc43-a3304ef29048')
  const footerDom = document.querySelector('footer.footer')
  if(headerDom && newsLetterDom && inputEmail && footerDom) {
    headerDom.style.background = yourColor
    newsLetterDom.style.background = yourColor
    inputEmail.style.background = yourColor
    footerDom.style.background = yourColor
  }
}

If it worked, please mark as a solution. Hope helpful for you!