Title of Item is white on white

[allshukup]

I am having alot of trouble with my website. 

The Item title is white on a white background ( I want a white background with black words).

The add to cart button is black with black wording ( I want Maroon background like my home bar with white words)

Lastly, the drop down menu for the things that have subcatagories the drop down is white with white words ( I want maroon with white words as well)

Thanks

[BSS-TekLabs]

Hi @allshukup,

Could you kindly provide us with your store URL and the protected password (if applied), so that our team can offer you the necessary support?

[allshukup]

allshukup.com

[vinh0225]

Hi @allshukup Please follow these steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.

To update product title color
3. Open the file assets/theme.scss.css and find the following:

.grid-view-item__title {
    margin-bottom: 0;
    color: #fff;
}

4. And update color to "black", so it should be:

.grid-view-item__title {
    margin-bottom: 0;
    color: black;
}

5. In the same file, find the following:

.product-single__title {
    margin-bottom: .5rem;
}

6. And add color style in it:

.product-single__title {
    margin-bottom: .5rem;
    color: black;
}

To update "Add to cart" button style

7. Find the following in the same file:

.product-form__cart-submit, .shopify-payment-button .shopify-payment-button__button--unbranded {
    display: block;
    width: 100%;
    line-height: 1.4;
    padding-left: 5px;
    padding-right: 5px;
    white-space: normal;
    margin-top: 0;
    margin-bottom: 10px;
    min-height: 44px;
}

8. And update this by adding background and color styles:

.product-form__cart-submit, .shopify-payment-button .shopify-payment-button__button--unbranded {
    display: block;
    width: 100%;
    line-height: 1.4;
    padding-left: 5px;
    padding-right: 5px;
    white-space: normal;
    margin-top: 0;
    margin-bottom: 10px;
    min-height: 44px;
    background: #931a59;
    color: white;
}

To update dropdown background

9. And find the following in the same file:

.site-nav__dropdown {
    display: none;
    position: absolute;
    padding: 11px 30px 11px 0;
    margin: 0;
    z-index: 7;
    text-align: left;
    border: 1px solid black;
    background: #fff;
    left: -1px;
    top: 41px;
}

10. And update the background style:

.site-nav__dropdown {
    display: none;
    position: absolute;
    padding: 11px 30px 11px 0;
    margin: 0;
    z-index: 7;
    text-align: left;
    border: 1px solid black;
    background: #931a59;
    left: -1px;
    top: 41px;
}

Please let me know if you have any concern.

Hope it will help you.
Vinh