Change background color on specific static section

[valdemarost]

Hey gurus!

I need to change some background colors on the following URL: https://aabn.io/pages/back-to-life

The shop is built in Narrative Theme. On this specific page I need to change all section backgrounds to black. The other pages has white background which has to stay like that.

The page consists of a custom made sections: feature-row, rich text, feature row, feature row, video, blog. I need to change the background color on rich text and blog.

I've tried with 

background-color: black

 both with 

body {
...
}

 class and id selector

in the section .liquid and page liquid.

Can you help change the background color on this specific page to black?

BR Valdemar

[diego_ezfy · Accepted solution]

@valdemarost 
Do this to fix it in 20 seconds

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function changeBackground(){
if (!/pages\/back-to-life/.test(window.location.href)){
    return;
}

  function _addStyle(styleString) {
    const style = document.createElement("style");
    style.textContent = styleString;
    document.head.append(style);
  }

_addStyle(`[id*='shopify-section']{background-color: black !important}`);
}

changeBackground();

</script>

This is the simplest way to achieve what you're after. More thorough customizations would require more complex coding that I wouldn't be able to guide you through copy/paste instructions.

Please let me know whether it works.

Kind regards,
Diego

[valdemarost]

@diego_ezfy - thank you! worked beautifully! marked as solution :)))

[diego_ezfy]

@valdemarost  you're welcome!

Next time feel free to contact me personally, I'll be happy to help.

Kind regards,
Diego