Return to previous page

Font Colour Issue - by manojsarang - on WordPress WooCommerce support

This topic has 12 replies, 2 voices, and was last updated 6 years, 1 months ago ago by Rose Tyler

manojsarang

Participant

November 2, 2018 at 15:47

Hello there, I am struggling with two issues:
1. In the attached screenshot, I am not able to find the right place to change the font colour so that these words can be read on a black background.
2. Second, I want to change the words “MY ACCOUNT” to something else. How can I do that?

Link to screenshot: https://www.dropbox.com/s/4yd09v7z41jk9ct/Web%20font%20colour%20issue.JPG?dl=0

Thanks a lot for your help

Manoj

#202253 Copied Theme version: 4.7 WooCommerce version: 3.4.7

11 Answers

Rose Tyler

Support staff

November 2, 2018 at 16:03

Hello,

1. Theme Options > Header Settings > Header color scheme
2. You can change text using translation files. Please try to install Loco translate plugin https://www.8theme.com/documentation/xstore/theme-translation/base-theme-translation/ create English translation for Royal theme, change strings, for example, http://prntscr.com/ldlhxd and disable the plugin.

Regards

#202254 Copied

manojsarang

Participant

November 2, 2018 at 20:09

1. the color setting doesn’t change the font colour. I have attached the theme font settings but it still doesn’t display the text in white

screenshots:
1. https://www.dropbox.com/s/rh840o8p9145nzq/font-color-issue-1.JPG?dl=0
2. https://www.dropbox.com/s/x2ke1nn0evcojr8/font-color-issue-2.JPG?dl=0
3. https://www.dropbox.com/s/rgqw2qmfjpmvb8h/font-color-issue-3.JPG?dl=0

Thanks, Manoj

#202260 Copied

Rose Tyler

Support staff

November 5, 2018 at 11:16

Hello,

1. https://prnt.sc/lejpzq

Regards

#202348 Copied

manojsarang

Participant

November 5, 2018 at 21:23

Thanks, it made it a bit better but I still have issues. Please see screencap.

https://www.dropbox.com/s/g25abg2gr8y8nj6/issue-menu-font-colour.png?dl=0

The live site is here for your review: https://mojoeroasters.com/

#202429 Copied
Rose Tyler

Support staff

November 6, 2018 at 10:01
1)
```
.header-wrapper.color-light.header-type-11 .top-links li a {
    color: white;
}
```
2) Theme Options > Header Settings > Fixed header color scheme > Light.

Regards
#202475 Copied
manojsarang

Participant

November 6, 2018 at 13:53

Thanks, that worked. The last issue is with the cart – when hovering over the cart, the white font on white background is not readable. How do I change that to black?

Thanks!

#202505 Copied

Rose Tyler

Support staff

November 6, 2018 at 14:04

You’re welcome!
https://www.8theme.com/topic/editing-background-and-font-color-on-woocommerce-pages/#post-202508

Regards

#202511 Copied

manojsarang

Participant

November 8, 2018 at 13:51

Thanks, that fixed most of the issues but still the following text remain unreadable:

1. Shop page – the title text of the product
(https://mojoeroasters.com/shop/)
2. Shop page – quick view – white font on white background
(https://mojoeroasters.com/shop/)
3. Product page – a lot of the text on the product page is still black on black
(https://mojoeroasters.com/product/bronze-3-month-membership/)
4. Product page – Review text box – when a user types, it is in white font and can’t be read
(https://mojoeroasters.com/product/bronze-3-month-membership/)

I have not generated screenshots for these issues but left the website live so you can see. Really appreciate your help with this issue.

Thanks, Manoj

#202649 Copied
Rose Tyler

Support staff

November 8, 2018 at 14:10
Please change this code https://gyazo.com/d8cf2c1df852bdf60a680a5a6e9036c9 to:
```
.st-pusher, .step-title span,
.register-link .register-popup .popup-title span,
.login-link .login-popup .popup-title span,
.cart-popup-container, .register-link .register-popup, 
.login-link .register-popup, .register-link .login-popup, 
.login-link .login-popup, .meta-title span,
.quick-view-popup, .product-navigation .product-arrows, .comment-reply-title span {
    background-color: black !important;
}
.btn:hover {
    color: white;
    border-color: white;
}
.shop-table .table-bordered td.product-price span, 
.shop-table .table-bordered td.product-subtotal span,
.shop_table .order-total td, .order-list .media-heading a,
.shopping-container .big-coast, .woocommerce-shipping-calculator a,
.product-title a, .product-navigation .next-product:before,
.product-information .yith-wcwl-add-to-wishlist a, .must-log-in a,
.product-information .email-link:before, .product-images .email-link:before,
.product-information .email-link, .tabs .tab-title.opened {
    color: white;
}
form .form-row input.input-text, 
form .form-row textarea,
.coupon input[type=text], .quantity input[type="number"] {
    color: #333333;
}
.order-review .step-title span {
    background-color: #333333 !important;
}
.meta-title:after {
    background-color: white;
}
```
4. Please provide temporary wp-admin access http://prntscr.com/lfvkna

Regards
#202652 Copied
manojsarang

Participant

November 8, 2018 at 20:26

Thanks, I have added the code and it has made most of the font colour issues go away but I still have some places where the font and the background have the same colour.

The requested temp admin info is in the private content

Thanks, Manoj

Please, contact administrator
for this information.

#202698 Copied
Rose Tyler

Support staff

November 9, 2018 at 10:07
Please change the code to:
```
.st-pusher, .step-title span,
.register-link .register-popup .popup-title span,
.login-link .login-popup .popup-title span,
.cart-popup-container, .register-link .register-popup, 
.login-link .register-popup, .register-link .login-popup, 
.login-link .login-popup, .meta-title span, .comment-reply-title small,
.quick-view-popup, .product-navigation .product-arrows, .comment-reply-title span {
    background-color: black !important;
}
.btn:hover {
    color: white;
    border-color: white;
}
.shop-table .table-bordered td.product-price span, 
.shop-table .table-bordered td.product-subtotal span,
.shop_table .order-total td, .order-list .media-heading a,
.shopping-container .big-coast, .woocommerce-shipping-calculator a,
.product-title a, .product-navigation .next-product:before,
.product-information .yith-wcwl-add-to-wishlist a, .must-log-in a,
.product-information .email-link:before, .product-images .email-link:before,
.product-information .email-link, .tabs .tab-title.opened,
.woocommerce-MyAccount-navigation li a {
    color: white;
}
form .form-row input.input-text, 
form .form-row textarea, #commentform textarea,
.coupon input[type=text], .quantity input[type="number"] {
    color: #333333;
}
.order-review .step-title span {
    background-color: #333333 !important;
}
.meta-title:after {
    background-color: white;
}
.woocommerce-MyAccount-content a {
    color: #ea9e60;
}
```
Do not forget to clear cache before checking the result. Please provide screenshots for better understanding where colors need to be changed also.

Regards
#202746 Copied
Viewing 12 results - 1 through 12 (of 12 total)