Change the background colour (invert) of a specific page on Dawn

Store Design
1

Hi, first time posting on here. I’ve spent the last few hours trying to try different methods to change the background of this specific page on my shop I’m building but to no avail.

Basically my standard pages are white in the body but I want the body to be essentially inverted on the ‘O R I G I N S .’ page so that it is black and then the text becomes a light grey as opposed to the dark grey it is on the standard white pages.

So this is what it’s like at the moment:

Screenshot 2022-08-31 at 06.10.58.png
Screenshot 2022-08-31 at 06.10.58.png2724×1774 306 KB

and this is what I want it to be like:

Screenshot 2022-08-31 at 06.10.58.jpg
Screenshot 2022-08-31 at 06.10.58.jpg2724×1774 179 KB

If there is an option to invert this specific page that would be great. I’ve tried a few different methods but it ended up changing the code for all the body pages (policy pages/shipping aswell etc.) which is not what I want. I want all them pages to remain as they are, only this origins page to be inverted for now.

link for the specific page in question: https://dlrcco.com/pages/origins

password: shopify2106

if anyone is able to help me with this it would be greatly appreciated. I would also appreciate it if you could explain how I would do this specifically myself, so let’s say there was another specific page I wanted inverting like this, I could do it myself and not bother any of you helpful people on here lol. Because this was the bit that really stumped me - actually figuring out how to amend any specific page as opposed to all of them.

Thank you.

2

hi @JOEYDELROCCO ,

you can go to theme.liquid file and follow this code:


{% assign class_specific = '' %}
{% if template.suffix contains 'origins' %}
{% assign class_specific = 'origins-page' %}
{% endif %}

after then you can use the origins-page class make style for the origins page.

Hope can helpful to you, Thanks!

3

Hi! @JOEYDELROCCO

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

Add this css at the bottom

Online Store->Theme->Edit code

assets->base.css

.focus-none {

background-color: #000 !important;

}

.page-width–narrow {

color: #fff !important;

}

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {

color: #fff !important;

}

Best regards,

PageFly

4

Hi, thanks for the reply. This works for changing all the pages but it doesn’t work for the one specific page. I want my other pages to remain the same colour. Any other suggestions?

5 

{% assign class_specific = '' %}
{% if template.suffix contains 'origins' %}
{% assign class_specific = 'origins-page' %}
{% endif %}

after then you can use the origins-page class make style for the origins page.

Hope can helpful to you, Thanks!

Hi, thanks for this, you’ll just have to dumb it down a bit for me lol. I don’t really understand code so I’m not too sure what you mean by the ‘Implement Logic Here’ and then the ‘then you add the param to body tag’ bit. If you could walk me through it a bit better please?

I think I understand where to place the code you suggested but when I did it didn’t change anything. How do I actually use this to then change the colours on that specific page to what I’m trying to?