How to change background color of collection grid?

[PrintsCharming1]

Hello, could someone kindly help me change the background to my collection items from white to hex #424242 grey?

I have tried within the theme settings, however it changes other areas of the page background too... I only want the area behind the product images to be grey.

I will also need to change all the text on this section to white, so it can be readable!

Here's the webpage link: https://printscharming.com/collections/in-the-gallery

Thanks in advance for your help!

[devcoders]

Hello @PrintsCharming1 
You want like this.

[PrintsCharming1]

Hi! The only background I want to be grey is the box "In The Gallery" which contains all the product images, if that's possible?

[devcoders]

Right ?

[PrintsCharming1]

Yes that's right, plus the titles will need to be black instead of white

[Made4uo-Ribe]

Hi @PrintsCharming1 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

div#shopify-section-collection-template .layout__section .collection * {
    background:#424242;
    color: white;
} 

• And Save.
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[PrintsCharming1]

Hi, thank-you for your advice! This is very close to what I'm looking for, although I was hoping to keep the background to the top of the section in white (where it reads In The Gallery and has drop down selectors).... also, I would like the prices to remain in green. Is that possible with CSS?

[Made4uo-Ribe · Accepted solution]

Replace on this code. 

div#shopify-section-collection-template .layout__section .collection * {
    background:#424242;
} 

.collection__header-inner *, .product-item__info a, 
.collection__toolbar.collection__toolbar--bordered *, .collection__dynamic-part .pagination {
    color: white;
}

And Save, 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[PrintsCharming1]

Thank-you so much for your help!

[LizHoang]

Hi PrintsCharming1

- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

span.price {
    color: green !important;
}

Result: 

Best,
Liz