How to change the text color in only collections and product pages (Gravity Theme)

Store Design
1

How do I change the text color to black only on collection and product pages, without changing it on the whole site?

https://meninthearena.org/collections/all

https://meninthearena.org/products/helmet-t-shirt

1 Like
2

@MITACJ

Please add the following code at the bottom of your assets/theme.css file.

Show More

body. template-product, body. template-collection{

Show More

color: #000 ! important;

Show More

}

Hope this works.

3

Hi @dmwwebartisan , thanks so much for the help! I tried adding this. Unfortunately, it didn’t work. =/

4

@MITACJ - try this

.template-product, .template-collection{
color: #000 ! important;
}
5

Thank you for your help, @suyash1 !

Interestingly, that worked a little bit, but not completely, and also broke something:

  1. It turned the product name on the product page black, but not the description text: https://meninthearena.org/products/men-in-the-arena-leather-wallet

  2. It also turned some of the top bar navigation items black, but not all of them, on both the product and collection pages, but not elsewhere on the site. (Edit: I just noticed that the navigation elements it turned black are all of the ones that have pull-down menus.)

  3. It did not change anything on the collection page, other than the top bar navigation items: https://meninthearena.org/collections/all

Check it out!

I really appreciate your help!

6

@MITACJ - please remove above given css and add this

.template-product .product-single__title{color: #000;}
.template-product .price-item{color: #000;}
.template-product .product-single__description{color: #000;}

.template-collection .grid-view-item__link{color: #000;}
.template-collection .price-item{color: #000;}
1 Like
7

@suyash1 Thank you again for your help!

This solution is much closer! Pull-down menus are now all consistent.

Collection page: https://meninthearena.org/collections/all

  • Prices are now black!, but product titles still grey.

On SOME individual product pages, most text black! except “Color” and “More payment options”
Examples: Men in the Arena - Equipping Christian Men
Men in the Arena - Equipping Christian Men

But on other product pages, title and price black!, but description text still grey.
Example: Men in the Arena - Equipping Christian Men
https://meninthearena.org/products/double-handled-coffee-mug-men-in-the-arena

Thank you again for working with me on this!

8

please add this css

.template-collection .product-card__title{color: #000;}
.product-form__item label {color: #000;}
.template-product .product-single__description p{color: #000;}
9

@suyash1 Just wanted to say thank you so much for all of your help!

1 Like