HELP! How to change the product page background color in Debut theme?

Excursionist
24 0 1

Hi everyone,

 

I am using the Debut theme. I preferred my landing page/home page in black color so I change the background color to black. All the other pages were changed automatically to black background too.

 

However, I want my catalogue and product page to be white and the font color to be black.

 

A user in a different thread suggested that I posted these codes:

 

.template-collection,
.template-product {
  background-color: white;
  color: black;

  * {
    color: black;
  } 
}

 

It did work but the main navigation font color at the top changed too, making it invisible.

 

Here is the link to the collection: https://angstrom-watches.myshopify.com/collections/men

Here is the link to a specific product: https://angstrom-watches.myshopify.com/collections/men/products/classic-windward

 

NOTICE THAT THE MAIN NAVIGATION FONT COLOR AT THE TOP CHANGED TOO MAKING IT INVISIBLE

 

I am using the DEBUT theme.

 

 

How can I change this? Anyone?

 

 

Thanks.

 

 

 

 

0 Likes
Trailblazer
233 27 29

add this css to end of your css file and check

 

.template-collection .site-nav__label, .template-product .site-nav__label{

color: #fff !important;

}

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
1 Like
Excursionist
24 0 1

Hello. Thank you. It worked.

 

However, the text on my button for "ADD TO CART" was black and became invisible. As well as my check out, it became all black.

 

Please see my screenshot below or you can go the link here https://angstrom-watches.myshopify.com/collections/men/products/classic-windward.

 

I have tried changing the colors in the visual THEME SETTINGS but nothing happened.


1.jpg

0 Likes
Trailblazer
233 27 29

add this css at end of the file, do not remove any previous data... even it looks bit complicated, it is added specifically for collection and product pages,hence copy them

 

.template-collection .product-form__cart-submit span, .template-product .product-form__cart-submit span,

.template-collection .cart-popup-item__title, .template-product .cart-popup-item__title,

.template-collection .product-details, .template-product .product-details,

.template-collection .cart-popup-item__quantity span, .template-product .cart-popup-item__quantity span

{

color: #fff !important;

}

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
1 Like
Excursionist
24 0 1

Hi. It did work. Thank you very much. The button came back but the check out was still all black. Also the magnifying glass button and the bag button was gone if you go to each collections. Probably they are converted to black so they just became invisible.

 

 

Please see my screenshot below.

 

2.jpg3.jpg

0 Likes
Trailblazer
233 27 29

for glass and bag button - add this and check, do not remove any old code, 

 

.template-collection svg.icon:not(.icon--full-color) path,

.template-product svg.icon:not(.icon--full-color) path

{color#fff !important;}

 

if it works then you are welcome to donate a small amount of your choice on my pypl and mark my messages as solution

https://paypal.me/suyashpatankar?locale.x=en_GB

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Trailblazer
233 27 29

for subscribe button

 

.template-collection .newsletter__submit-text--large,

.template-product .newsletter__submit-text--large

{color#fff !important;}

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Highlighted
Excursionist
24 0 1

Hi suyash1. 

 

Thank you for your help. I appreciate it genuinely. 

 

 

All the codes you have provided works. However, when I click the bag and view all the items in the "My Cart" it converted to black. I want it to be white and the font to be black. Please see the screenshot for details.

 

Also, when I click "Add to Cart" the pop-up box on the right hand corner is all black. I want it to be white and the font to be black. Please see the screenshot for details. The black box with red circle.

 

Also, even though I clicked the Add To Cart, the number is gone in the bag. Probably because it is a black font.

 

z.jpgX.pngc.jpg

0 Likes
Trailblazer
233 27 29

number is visible

Screenshot 2019-09-18 17.46.43.png

 

add this css too

 

.btn--secondary-accent {background-color: #000; color: #fffborder-color: #fff;}
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes