Return to previous page

Font Colors for Add to Cart, ProductTitles, NAV and Mobile Menu are All the Same

This topic has 3 replies, 2 voices, and was last updated 6 years, 3 months ago ago by Olga Barlow

kybalio

Participant

September 17, 2018 at 10:38

Hi, I hope you can help.

Since upgrading to the new Theme 4.4, I’ve noticed that the Nav menu bar, main Product Title and The Add to Cart Buttons all use the Main font.
The problem is poor visibility/contrast.. that Titles are on White bg, Button Text is on Blue bg, Mobile Nav is on black bg and Nav is on Black BG using the same font style/color when perhaps there should be a few styles being used.

I have had to set the main font to grey because it seems to be at least visible on all backgrounds, however, it’s too light for a strong Title and if I darken it, it gets lost on the navigation backgrounds and the Add to Cart button.

I’ve looked at this code through the code inspector and cannot isolate any of these styles to make them suitable for their respective backgrounds, eg: main font seems to be used for all these situations.
Also, can you see the green drop-down menu from the main nav, I can’t find where that is derived from, I would like to make it white.

am I missing something obvious here?

best regards

Ky

#199548 Copied

2 Answers

kybalio

Participant

September 17, 2018 at 10:52

Here’s a product page to check, thanks
https://werone.co/eng/product/lemon-balm-tea-organic-60g

#199549 Copied
Olga Barlow

Support staff

September 18, 2018 at 08:51
Hello,

All these elements used the main font color even before the 4.4 update because we did not change these styles in that update.
Inspecting your site I see that you added custom code that duplicates almost all the styles from the parent theme except background color http://prntscr.com/kvoisa It’s not right. You need to add only styles that you need to change, for example,
```
button, .button, input[type=button], input[type=submit], .wishlist_table .add_to_cart.button, .btn-black, .btn.btn-black, .subscription-toggle {
    background-color: #028389 !important;
    border-radius: 5px;
    font-size: 15px;
}
```
You don’t need to copy whole the styles to child theme http://prntscr.com/kvokgr

2) Some styles in your custom CSS conflicts http://prntscr.com/kvoku9 Why do you use the different color for the same element button for example?
3) If you don’t want to change the main font color remove it and just send me screenshots of the elements where you want to change the color. If you don’t like color of the Add to cart button then just remove the color: #000 from your custom, I have already mentioned it on the screenshots.
4) “green drop-down menu” – the same situation, you have added this background in custom CSS http://prntscr.com/kvonhy Also, I see that you made changed directly in theme styles. We don’t recommend to do this. Reupload source style.css of the WooPress parent theme!

Regards
#199600 Copied
Viewing 3 results - 1 through 3 (of 3 total)