How to change the background for my blog en faq page Craft theme

[BonFeet]

Hi!

I would like to change the background of my blog, blogposts and FAQ page to #FFFFFF instead of this pinkish colour that is standard in the Craft theme. I found some answers to a similar question about changing the blog background, but none of the solutions given there seem to work with me. Everything that is pink on the website needs to change to white..

Can someone help me please? Greatly appreciate it!

Best, Lise

[DaisyVo]

Hi @BonFeet 

Could you please share the store link with us so we can check it further?

[BonFeet]

Hi @DaisyVo  ! 

The website is: https://jvxnja-sv.myshopify.com/?_ab=0&_fd=0&_sc=1

pw: rowwho

Appreciate your help!

[Moeed]

Hey @BonFeet 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[BonFeet]

Hi @Moeed 

The website is: https://jvxnja-sv.myshopify.com/?_ab=0&_fd=0&_sc=1

pw: rowwho

Appreciate your help!

[Moeed]

Hey @BonFeet 

Follow these Steps:

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

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

<style>
main#MainContent {
    background: #ffffff !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[BonFeet]

Hi @Moeed ,

Thanks for your quick reply. I tried your solution but it didnt work unfortunately. See screenshots. Did i enter the code in the wrong location? Also, in your screenshot I see that the blogposts are still pink and not white?

Thanks for your help!

[websensepro]

Hi @BonFeet , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[BonFeet]

Hi @websensepro , 

The website is: https://jvxnja-sv.myshopify.com/?_ab=0&_fd=0&_sc=1

pw: rowwho

Appreciate your help!

[ZestardTech]

Hello @BonFeet ,

Could you please provide the URL/ password  to your store so that I can check it and provide you with the exact solution?

[BonFeet]

Hi @ZestardTech , 

The website is: https://jvxnja-sv.myshopify.com/?_ab=0&_fd=0&_sc=1

pw: rowwho

Appreciate your help!

[ZestardTech]

Hello @BonFeet,

I have checked the blog page, and the issue has already been resolved. I am providing you with the CSS for the FAQ page. Please add the code below to your current theme and let me know if there are any issues.

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

section#shopify-section-template--24723075072347__collapsible_content_nC6g6V .color-scheme-1.gradient {
    background: white;
}

[namphan]

Hi @BonFeet,

Please send the website link, I will check it for you

[BonFeet]

Hi @namphan  , 

The website is: https://jvxnja-sv.myshopify.com/?_ab=0&_fd=0&_sc=1

pw: rowwho

Appreciate your help!

[namphan]

Hi @BonFeet,

Please go to Actions > Edit code > layout > theme.liquid file and add the code before '</head>':

{%- if template contains 'blog' or template contains 'faq' -%}
      <style>
        body.gradient {
          --gradient-background: #ffffff !important;
        }
      </style>
{%- endif -%}

[BonFeet]

Hi @namphan 

Thanks for your tip, i have added the code and the background is gone at the blog section, but not the faq page. see link https://jvxnja-sv.myshopify.com/pages/veel-gestelde-vragen and on the blog page blog post blocks still have a pink background. any idea how i can fix this? 

Thanks, appreciate your help!

Best, Lise

[namphan]

Hi @BonFeet,

You can try again with the following code:

{%- if template contains 'blog' or page.handle contains 'veel-gestelde-vragen' -%}
      <style>
        body.gradient {
          --gradient-background: #ffffff !important;
        }
      </style>
{%- endif -%}

[BonFeet]

Thanks @namphan the solution from Websensepro worked but i appreciate your efforts. and i had to pick one.. I will buy you a coffee, though, cos appreciate the trouble. cheers

[namphan]

Hi @BonFeet,

Thanks and nice to meet you 😊

[namphan]

Hi @BonFeet,

Please add code:

{%- if page.template contains 'Standard Page' -%}
      <style>
        body.gradient {
          --gradient-background: #ffffff !important;
        }
      </style>
{%- endif -%}

[websensepro · Accepted solution]

Hi @BonFeet 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.card.article-card.card--card.article-card__image--small.card--media.color-scheme-1.gradient {
    background: #fff !important;
}
section#shopify-section-template--24723075072347__collapsible_content_nC6g6V .color-scheme-1 {
    background: #ffff !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[BonFeet]

Excellent, it worked! Many thanks

[BonFeet]

Hi @websensepro 

I have another page that needs to change to white, actually, i want all pages assigned to the 'Standard Page' template to have a white background in stead of the pink it is now. See the frequently asked questions page on the site. (do you still have the details?) can you please help me with the code? Many thanks!

[websensepro]

Tell me which pages are pink?

[websensepro]

Hi @BonFeet 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.content-for-layout.focus-none {
    background: #ffff !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[BonFeet]

Perfect! it worked, thanks very much