Need Help Changing Background Color of Rich Text Section - Responsive Theme

Technical Q&A
1

I’ve added a rich text section to my store homepage and I’d like to change the background color to black. The Responsive theme doesn’t offer built-in functionality for changing just this section and I have zero knowledge of custom coding. Can someone please provide some guidance on how I can make this change manually? Any help would be greatly appreciated!!

2

hello @RM00316

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

3

Website is ellovatestore.com and PW should be paga2388. Just and FYI - I’m still in the middle of building the website so it’s still very bare right now. Thanks and look forward to your response!

4

@RM00316

Kindly send a screenshot of the section you wish to change the background color.

5

RM00316_0-1625012328276.png
RM00316_0-1625012328276.png1828×213 6.38 KB

Here is a snapshot of the section that I’m referring to. It’s just below the hero image. Thanks!

6

hello @RM00316

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-1480990842836    {
      background: #d6d2d2ba;
      padding :20px;
      }
      #shopify-section-1480990842836   h2.section-header.home {
          border-bottom: transparent !important;
      }
7

@RM00316 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > styles.css and paste this at the bottom of the file:
.shopify-section--rich-text[id]{
    background-color: #000000;
    padding-bottom: 0 !important;
    padding-top: 40px !important;
    margin-top: -9px !important;
    margin-bottom: 0 !important;
    border-bottom: unset !important;
    padding-bottom: 30px !important;
    border: unset !important;

}

.shopify-section--rich-text *{
    color: #ffffff !important;
}

#slideshow-slideshow{
    padding-bottom: 0 !important
}

diego_ezfy_0-1625592929601.png
diego_ezfy_0-1625592929601.png1583×732 71.8 KB

You can change the background color by changing the value #000000
You can change the text color by changing the value #FFFFFF

Please let me know whether it works.

Kind regards,
Diego

8

Hi Diego,

Your suggestion worked perfectly! Is there any way for me to manually change the color of the divider line within that section as well? Thank you for all your help.

  • Ryan