How can I change the background color of my custom html section?

[tritonebear]

I’ve seen a few different forums with solutions to my problem but I what ever I try doesn’t seem to work.

I have a custom html section on my front page - Fatfender.com - which is for searching products, specifically year make and model. I dont like that the section is white. It makes it look like the custom html is floating there and I dont think it fits well with my theme.

I really want the background color for the section to be the same as the custom html app.

I would love any help. I have a 2.0 theme.

Thank you so much.

[GabrielS]

Hello,

You could change the background of that section through custom CSS, as below:

div#shopify-section-template--15786995613886__1663731291050ffdb1 {
  background: #333131 !important;
}

Adding the above code at the end of your theme.min.css file should be working as expected.

To get rid of the white bar you could make use of the below:

div#shopify-section-template--15786995613886__1663731291050ffdb1 {
  background: #333131 !important;
  margin-top: -15px !important;
}

Let me know if this answered your question.

Cheers!

[ZenoPageBuilder]

Hello @tritonebear

In Shopify Admin, you can go to Themes, Edit code, open file theme.css (or theme.scss, theme.css.liquid, theme.scss.liquid) and add this code snippet at the bottom

#shopify-section-template--15786995613886__1663731291050ffdb1 {
    background: rgba(51,49,49,1)!important;
    margin-top: -16px !important;
}

The result

Hope that helps!