Change colour of a single page instead of the whole theme

Technical Q&A
1

Hello I really need help changing the background colour of a single page on my website. I think it is a coding issue which I have no clue how to do :see_no_evil_monkey:

Yellow - Pantone: ffd000

Please help me :disappointed_face:

https://www.livelovesoca.com/pages/pace

2

Hi @Stefanpaullls

  • I understand your concern. I checked the link and I came to know that there is no unique class applied on body tag

    • Please check the attached screenshot:

2022_07_15_body_ss.png
2022_07_15_body_ss.png1848×1052 508 KB

  • First of all, you have to add a ‘page-{{ page.title }}’ class to your body tag. Due to this, you can get a unique class for each page

    • Please check the attached screenshot:

2022_07_15_add_body.png
2022_07_15_add_body.png1528×645 149 KB

In the second step, you have to add the below code to the theme.css file.

.page-Pace {
    background-color: #ffd000;
}

Please check the attached screenshot:

2022_07_15_body_color.png
2022_07_15_body_color.png1848×1052 538 KB

I hope this can help you to resolve the issue.

3

Hello, thank you for your help. I tried your method but it didnt work unfortunately. Also now all the links on my website does not click. Have i messed it up. If so what do you think i did wrong?

4

Hi @Stefanpaullls

I helped to resolve the issue. Now, we can add conditions to the body tag. So it’s added class only when the template is page.

  • First all of all, replaced the code by {%- if template == ‘page’ -%} page-{{ page.title | downcase }} {%- endif -%} from theme.liquid

    • Please check the attached screenshot:

2022_07_18_replace _code.png
2022_07_18_replace _code.png1352×699 124 KB

In the second step, you have to replaced the code of the theme.css file.

.page-pace {
    background-color: #ffd000;
}

I hope this can help you to resolve the issue.