Color of the background

[damien68]

Hi everyone, I have changed my shopify Theme, and now that I have the Craft theme, I can't change the color of my contact page and my blog page. I already tried with the options that offers Shopify, but it didn't work. 

Could you please help me to resolve the issue ? This is the link to my contact page : https://ma-tasse-en-bois.fr/pages/contact and yo my blog page : https://ma-tasse-en-bois.fr/blogs/articles-de-blog. I would like to have the white color instead of the brown one. Thank you .

[BSSCommerce-HDL · Accepted solution]

Hi @damien68, 

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

Step 2: Search theme.liquid
Step 3: Before close head tags. Pls insert this code: 

{% assign full_url = request.host | append: request.path %}
  {%- if full_url contains 'contact' or full_url contains 'articles-de-blog' -%}
    <style>
      body.gradient {
        background: white !important;
      }
    </style>
  {%- endif -%}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[damien68]

Hi @BSSCommerce-HDL  it worked perfectly thank you 🙂

[Ashraful]

Since the theme customizer options aren't working, you can use custom CSS code. Here's how:

1. Access your Shopify theme code:

Login to your Shopify admin dashboard.
Click on "Online Store" and then "Themes".
Find the "Craft" theme and click on "Actions" then "Edit code".

2. Identify the CSS file:

In the "Assets" folder, look for a file named "theme.css" or "style.css". This is where you'll add the custom code.

3. Target specific elements (optional):

If you only want to change the background color, you can target the general page class.
But, for more control, you can target specific elements like the contact form section or blog post container using their class names.

4. Add the CSS code:

At the bottom of the chosen CSS file, paste the following code and adjust the color value:

/* Target the entire page (background color) */
.page {
background-color: #ffffff; /* White color code */
}

/* OR (Target specific elements) */
/* Find the class name for your contact form section (replace with actual class name) */
.contact-form-section {
background-color: #ffffff; /* White color code */
}

/* Find the class name for your blog post container (replace with actual class name) */
.blog-post-container {
background-color: #ffffff; /* White color code */
}

5. Save the changes:

Click on "Save" in the theme editor.

Additional tips:

If you're unsure about the class names for specific elements, you can inspect the page elements in your browser's developer tools to find them.
You can change the color code (#ffffff) to any other color you prefer. You can find color codes online using a color picker tool.

Caution: Editing theme code requires some understanding of CSS. If you're not comfortable with it, consider hiring a Shopify expert to make these changes for you.

[PageFly-Henry]

Hi @damien68 

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 base.css

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

body.gradient, .color-scheme-1.gradient {

    background: white !important;

}

In addition, on the banner page of the home page, you can add "shop now" buttons and headings so that users can easily identify and redirect to collection pages.

Hope that my solution works for you.

Best regards,

Henry | PageFly