Text Color Issue: White Background Makes Text Invisible

I changed my background to white, and as a result, the text color is also white. I’m not sure where I can change the text color. There is a video and some supporting screenshots that illustrate what I’m referring to.

The first instance is at the top of the shop product page.
The second instance is at the bottom of the shop product page, where it indicates how many pages of products are available. The ‘1-page’ button is visible, but the text color for ‘2-page’ and beyond, as well as the ‘next’ button, cannot be seen.

Attachments:

You must be logged in to view attached files.

Hello,

Go to Dashboard >> Theme Settings >> Custom CSS >> Global Custom CSS and paste the below code:

.woocommerce-breadcrumb a, .yoast-breadcrumb a, .woocommerce-breadcrumb, .wd-products-per-page, .wd-products-per-page .per-page-variation, .woocommerce-ordering.wd-style-underline select, .wd-products-shop-view a, .wd-products-per-page .per-page-title, nav[class*="-pagination"] li .page-numbers {
	color: yellow !important;
}

Change the color as per your need.

Best Regards.

After I applied your custom code, it did resolve the previous issue. However, it has led to another problem, which I will describe below:

1. The highlighted text is displayed in black, and I can remove the black background to make it visible. But I’m unsure how to change the text within the red circles from white to black.

2. When I click the ‘default sorting’ option, all text inside the bar becomes invisible due to the black background.

3. Upon hovering over the ‘page.no2’ button, the text becomes unreadable. Do you have any suggestions on how to change the text color during hover?

Attachments:

You must be logged in to view attached files.

Hello,

You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards.

Even using the method you advise, there have no way to change the color text (I circle with red color shown as attachment) but only title and price only.

Attachments:

You must be logged in to view attached files.

What is this called? Is it the background for breadcrumbs sorting? I can’t find any related name to change the background color.

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the administrator login details of your site so I will check the issues and solve it on the site?

Your given login details are not the admin logins.

Best Regards.

I have changed to role from edit to admin. Please check.

Hello,

You have enabled the dark theme from theme settings > Styles and colors > Styles that is why the background is black.

For that Go to Theme Settings > Typography > basic > and change the fonts color.

Best Regards.

I’m not sure which one question you are talking about, I try to emphasize the question here again.

1. Even using the method you advise, there have no way to change the color text (I circle with red color shown as attachment) but only title and price only.

2. What is this called? Is it the background for breadcrumbs sorting? I can’t find any related name to change the background color.

And here is to answer your last message, even I changed from Theme Settings > Typography > basic > to all become white color text, it doesn’t work for question 2.

Attachments:

You must be logged in to view attached files.

Hello,

1. Please use the below custom CSS code:

.product_meta span.sku_wrapper span {
    color: red;
}
.product_meta span.posted_in a {
    color: red;
}
.product_meta span.posted_in span {
    color: red;
}
.product_meta span.tagged_as span {
    color: red;
}
.product_meta span.tagged_as a {
    color: red;
}
.product_meta span.tagged_as a {
    color: red;
}

2. Solved. Please check the site after removing the browser cache.

Best Regards.

1. Still haven’t solve complete yet, please check the photo I have attached.

2. It’s solved, may I know how you did it?

Attachments:

You must be logged in to view attached files.

Hello,

1. Can you please clear me one thing, do you want to apply the dark theme or light theme to the site?

2. I have added the small custom CSS code in the Theme Settings.

Best Regards.

1. I’m a little confused about whether to use a dark theme or a light theme. What I want is for this specific ‘section’ to have a white background, while the rest should be in black to make it stand out. The buttons and the default purple price color should remain as they are.

2. Can you show me the whole CSS code here? So if next time I want to remove it, I can find it by myself.

Attachments:

You must be logged in to view attached files.

Hello,

1. So can you please explain or clear to me which part you want to change the color so I can give you the custom CSS code accordingly?

2. The below custom CSS code I have added in the theme settings:

select option {
    background-color: #fff;
}

Best Regards.

1. Check the image I have circle it with red color, make it appear will do.

2. Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

1. Please use the below custom CSS code:

.wd-product-nav-btn {
    color: rgb(90,95,222);
}

div.quantity input[type="button"] {
    background: rgb(90,95,222);
}
input[type='email'], input[type='date'], input[type='search'], input[type='number'], input[type='text'], input[type='tel'], input[type='url'], input[type='password'], textarea, select {
    border: var(--wd-form-brd-width) solid rgb(90,95,222);
    background-color: rgb(90,95,222);
}
.wd-action-btn>a:hover {
    color: rgb(90,95,222);
}
.wd-action-btn>a {
    color: rgb(90,95,222);
}
.wd-social-icons.icons-design-default.icons-size-small.color-scheme-light.social-share.social-form-circle.product-share.wd-layout-inline.text-left a {
    color: rgb(90,95,222) !important;
}

Best Regards.

Great, but there have two part not yet.

Attachments:

You must be logged in to view attached files.

Hello,

Please use the below custom CSS code:

.wd-social-icons.wd-layout-inline .wd-label {
    color: rgb(90,95,222);
}
.wd-product-nav-btn {
    color: rgb(90,95,222) !important;
}

Best Regards.

it worked, but how to remove this hover effect? Just left customer able to click left or right will do, no need to show next product during hover.

Attachments:

You must be logged in to view attached files.

Hello,

Please use the below custom CSS code:

.wd-products-nav .wd-dropdown {
     display: none;
}

Best Regards.

it’s worked, but some still appear, not sure is it cache issue. Are you able to test from your side?

Hello,

Solved. I have updated the custom CSS code in the theme settings. Please check the site now after removing the browser cache.

Best Regards.

Thanks, it\’s workded.

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.

Have a great day.
Topic Closed.

Best Regards.

[Author]

Posts