Changing the background color of a specific page

[bensutrecht030]

Hello. I'm having problems with changing the background of 1 page on my website to this color: #f2f2f2

I want to change the background of the whole page, not only the sections. I cant turn everything to this color, the whitespaces between the media grids and text stays white. Can someone help? 

[devcoders]

Hello there,

Kindly provide the website URL along with the corresponding password.

Thank you!

[bensutrecht030]

Hi!

https://shabb-clothing.myshopify.com/ 

pass: humpis

[devcoders]

Hello @bensutrecht030 

please add this css Asset > theme.css and paste this at the bottom of the file:-

body {
background: #f2f2f2!important;
}

[killerpresets]

Very easy solution! I can't believe this isn't in the theme settings anywhere. Crazy.

[JustinTharpe]

Hi @bensutrecht030 

Please share the website URL, and also the storefront password if it's locked.

Then only I can suggest a code change.

Cheers!

[bensutrecht030]

Hi Justin. 

Thanks for helping out. here is the link: https://shabb-clothing.myshopify.com/ 

The password is: humpis

Cheers

[JustinTharpe]

Add this to your theme.liquid file in the style tag, and your background should become that off-white color.

body {
    background: #f2f2f2;
}

Hope this helps, Cheers!

[bensutrecht030]

Hi! 

I cant find the style tag in my theme.liquid file. I used control + f to find <style> but it isnt here.

[PageFly-Henry]

HI @bensutrecht030 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

body {
background: #f2f2f2 !important;
}
#main section {
background: #f2f2f2 !important;
}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Moeed]

Hey @bensutrecht030 

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 == "contact" %}
<style>
main#main {
    background: #f2f2f2 !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

[bensutrecht030]

Hi Moeed! 

It worked! Thanks. But there is some whitespace on the top and bottom that is not grey... Look at my screenshot: 

How do i remove the whitespace on the top and bottom? 

[Beae_Cass]

Hi @bensutrecht030 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

{% if page.handle == "contact" %}
<style>
main#main {
    background: #f2f2f2 !important;
}
.section-spacing {
    margin: unset !important;
    
}
.section-spacing>div{
    padding-bottom: 64px
}
</style>
{% endif %}

It's also help you to remove the whitespace on the top and bottom.

Best regards,

Anthony

[PageFly-Richard]

Hi @bensutrecht030 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

main#main {
    background-color: #f2f2f2 !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly