Impulse Theme: How to change background color on featured collection of my home page

[onlybeyu]

Hello! i want to change the background color of my featured collection to white on my home page. The rest of the page i want to keep black. Can someone show me how to do this? thank you! my website is www.onlybeyu.com

 I want the white background of each product to lay on top of a white background just in the featured collection area.

 this is what i want it to look like. I also need the words to be black in this area only.

[onlybeyu]

 I want to change the background color of the area where the products are. I want a white background so you cant see the white boxes of each product featured.

[RJK90]

Hi @onlybeyu,

You can add custom CSS for the Featured Collection section, navigate to Theme -> Customize -> Home page -> select Featured Collection section -> Custom CSS.

Select the section class and add the following CSS to set the background color to white to section class:

background-color: #ffffff;

This will give you a white background for the selected section.

[onlybeyu]

hello, thank you for the reply. I have updated my first question with images. If you could check it out that would be great!

[RJK90]

Hi @onlybeyu,

You can add the below CSS for make background as your requirement.

#shopify-section-template--17050546241749__featured-collection{
	background-color: #ffffff;
}
#shopify-section-template--17050546241749__featured-collection .grid__image-ratio{
	background-color: #ffffff !important;
}

[onlybeyu]

 Its telling me to correct the errors before i can publish

[RJK90]

Try this.

#CollectionSection-template--17050546241749__featured-collection {
  background-color: #ffffff;
}
#CollectionSection-template--17050546241749__featured-collection
  .grid__image-ratio {
  background-color: #ffffff !important;
}

[onlybeyu]

 It wouldnt let me add it

[RJK90]

Hi @onlybeyu,

Please check like this. See the screenshot. Check my last previous post for css.

[onlybeyu]

I fixed it again and it is still saying that it cant be published

[RJK90]

Hi @onlybeyu ,

Did you try this?

#CollectionSection-template--17050546241749__featured-collection {
  background-color: #ffffff;
}
#CollectionSection-template--17050546241749__featured-collection
  .grid__image-ratio {
  background-color: #ffffff !important;
}

[onlybeyu]

 so the background code worked thank you. How do i change the product title words to black?

[onlybeyu]

Also How do I moved my images back leveled. Now it seems one is higher than the other and the prices are not aligned.

[onlybeyu]

ok the first code finally worked. I dont know why its acting weird. How do i get the words to be black just the words not the prices? thank you !!

[RJK90]

Hi @onlybeyu ,

You're most welcome! If the solution works for you, kindly consider liking and accepting it. This will help others find quality solutions more easily.

[Made4uo-Ribe · Accepted solution]

Hi @onlybeyu 

Check this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• 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-template--17050546241749__featured-collection, .grid__image-ratio {
    background: white !important;
} 
.index-section {
    padding: 75px 0;
    margin: 0px !important;
}
.custom__item {
    margin-bottom: 0px !important;
}
div#shopify-section-template--17050546241749__featured-collection .text-link, a {
    color: black !important;
}

• And save. 
• Result:
• 
• 

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

[onlybeyu]

this worked perfectly and i can edit the padding! thank you !!! xoxo

[Made4uo-Ribe]

Welcome. Oh, I just change the margin into padding. And its the actual size of it. 

[onlybeyu]

Ok new issue lmao when changing the text to black it changed my header text black and the words inside click buttons on my slide shows black. How do i turn those parts back white ?

 

[onlybeyu]

Can someone help me alter the header, the words inside my click boxes inside my slide shows, the menu tab words, and the header in the collections area color back to white (everything circled in red) ? I have attached the original code i was given and it was added to the bottom of my theme.css file