How can I change a single page's background color on my website?

[aliciavterrible]

Hi there, hoping someone can please help. I have tried and tried to do it myself but just cannot figure it out!

I would like the background of this page to be changed to colour ffc0cb - just this page only, the Disney Princess page, not the rest of the site.

Here's the link: https://40565c-2.myshopify.com/pages/princess-boutique
PW: LSOHC

Many thanks in advance 🙂

[niraj_patel]

Hello @aliciavterrible 
Can you share page URL?

[aliciavterrible]

Thanks for replying  🙂

It's https://40565c-2.myshopify.com/pages/princess-boutique
Password: LSOHC

[Moeed]

Hey @aliciavterrible 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if page.handle == "disney-princess" %}
<style>
.collection-content {
    background: #ffc0cb !important;
}
</style>
{% endif %}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[aliciavterrible]

Thank you so much, I have added the code to the theme.liquid file but it didn't make any change on the front end..?? Sorry to be a pain, I REALLY appreciate your help.

[aliciavterrible]

I changed the code a little:

{% if page.handle == "princess-boutique" %}
<style>
.page-content {
background: #ffc0cb !important;
}
</style>
{% endif %}

And I can see it's changed some of the containers to the correct background colour, but there's still black where it shouldn't be. Is there another little bit of code that will make it work 100%? Thanks again 🙂

[aliciavterrible · Accepted solution]

I have fiddled some more and have managed to get it working perfectly, adding separate rules for each div

{% if page.handle == "princess-boutique" %}
<style>
.page-content {
background: #ffc0cb !important;
}
.index-section {
background: #ffc0cb !important;
}
.shopify-section {
background: #ffc0cb !important;
}
.main-content {
background: #ffc0cb !important;
}
.image-wrap {
background: #ffc0cb !important;
}
</style>
{% endif %}

 Thanks again for your help.

https://40565c-2.myshopify.com/pages/princess-boutique
PW: LSOHC