Product grid background wont change colour

[GraemeC]

Hey, I'm having an issue with the product grid background, it won't change colour from the Refresh themes light grey.

Ive tried to set my own theme colours and everything changes apart from the product grid colour on every product page. Also, I want to change the text colour from blue to white it won't do that either.

I want to change the background image to the colour behind "Fudge".

To add to this even the product pages' Product Information sections are the Refresh colour, I don't understand why the rest of the website is the colours I want apart from product info and product grid.

Can anyone help?

 

 

[Made4uo-Ribe · Accepted solution]

Thank you for the information. 

Try 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:

section#shopify-section-template--20993090912539__main {
    background: #250301;
}
product-info#ProductInfo-template--20993090912539__main {
    color: white;
}
.product__title>* {
    color: white;
}
.price.price--large.price--show-badge {
    color: white;
}

• And Save. 
• Result:
• 

[Made4uo-Ribe · Accepted solution]

Oh, I see. Try this one then.

Same Instruction.

• 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:

.product__description.rte.quick-add-hidden * {
    color: white;
}
.section-template--20993090093339__product-grid-padding {
     background: #250301;
}
aside#main-collection-filters * {
    color: white;
}

• And Save.
• Result:
• 
• 

[Made4uo-Ribe]

Hi @GraemeC 

Would you mind to share your Store URL website? with password if its protected. Thanks!

[GraemeC]

Hello, my website URL is www.devil-delights.co.uk

The background colour for filters for each collection is white and links are blue and I'm unable to change them, also I still have the same issues as yesterday.

Sorry for the late reply!

[Made4uo-Ribe · Accepted solution]

Thank you for the information. 

Try 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:

section#shopify-section-template--20993090912539__main {
    background: #250301;
}
product-info#ProductInfo-template--20993090912539__main {
    color: white;
}
.product__title>* {
    color: white;
}
.price.price--large.price--show-badge {
    color: white;
}

• And Save. 
• Result:
• 

[GraemeC]

Hey,

Yup that worked thanks very much!

Only issue I have now is that the Filter/Sort by is still blue text with a light greyish background.

Also, there's some H1, H2, description texts, and links that won't change from blue.

Is there a way I can make ALL text on the website white?

 

 

Thanks

[Made4uo-Ribe · Accepted solution]

Oh, I see. Try this one then.

Same Instruction.

• 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:

.product__description.rte.quick-add-hidden * {
    color: white;
}
.section-template--20993090093339__product-grid-padding {
     background: #250301;
}
aside#main-collection-filters * {
    color: white;
}

• And Save.
• Result:
• 
• 

[GraemeC]

Hey, thats those pages are fixed now! just a few things like titles, h1, and links are still blue but I think I can figure those out after looking at the code you sent.

thanks!

[Made4uo-Ribe]

Which one still blue? the shipping and the share link I didnt change it, cause you said before leave the link with blue color. Maybe Im wrong. 😅

[GraemeC]

Did i? My mistake 😣 It looks like most links a blue but id like them white.

Also if you click on Allergen Information there's a few things that are blue aswell that wont go white its a bit of a nightmare!

[Made4uo-Ribe · Accepted solution]

Check this one. Same Instruction. 

.product__tax.caption.rte a {
    color: white;
}
button.share-button__button {
    color: white;
}
h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
color: white;
}

And Save.

[Made4uo-Ribe]

Try this one also for the drop down in the filters. 

div#Facet-2-template--20993090093339__product-grid,
div#Facet-1-template--20993090093339__product-grid {
    background: #250301;
}
.facet-checkbox>svg {
    background: #250301;
}
input#Filter-Price-GTE,
input#Filter-Price-LTE,
option {
    background: #250301;
}

And Save. 

[GraemeC]

im not sure if that changed this but this has happened.