Product category widget font color

This topic has 24 replies, 2 voices, and was last updated 6 years ago by Elise Noromit.

Viewing 25 posts - 1 through 25 (of 25 total)

Author

Posts
December 16, 2018 at 8:56 am #96405

[email protected]
Participant

How to change the font color of product category?

December 16, 2018 at 10:27 am #96416

Elise Noromit
Member

Hello,

You can change the font color in Advanced Typography in the Theme Settings > Typography > Advanced typography https://xtemos.com/docs/woodmart/advanced-typography-settings/

If you have difficulties provide the page URL.

Best Regards

December 20, 2018 at 12:08 pm #97248

[email protected]
Participant

I have Provided two links, I want to change the font color

Attachments:
You must be logged in to view attached files.

December 20, 2018 at 2:16 pm #97285
Elise Noromit
Member
Hello,

Add this code to the Theme Settings > Custom CSS
```
body .woodmart-product-categories .category-nav-link>a {
    color: red;
}
body .category-nav-link .category-products-count {
    color: red;
}
```
Change the color as per your needs.

Best Regards
December 20, 2018 at 2:27 pm #97292

[email protected]
Participant

PRODUCT CATEGORY WIDGET FONT COLOR IS NOT WORKING

December 20, 2018 at 2:54 pm #97310
Elise Noromit
Member
Hello,

Your screen shows categories in the page title not in the widget.

The code provided below is for these categories http://prntscr.com/lxi2qa
```
.widget_product_categories .product-categories li a {
    color: red;
}
```
Best Regards
December 20, 2018 at 3:01 pm #97316

[email protected]
Participant

Please gone through my home page. I want to change that element color.

Attachments:
You must be logged in to view attached files.

December 20, 2018 at 8:48 pm #97436
Elise Noromit
Member
Hello,

Add this code:
```
body .category-grid-item .wrapp-category .hover-mask .category-title{
    color: red;
}
```
Best Regards
December 22, 2018 at 8:57 am #97720

[email protected]
Participant

it works .. thank you.but:-
1. I want to set rgb color to this css code, for this what will be the CSS code
2. I want to change the word ‘load more button’ to ‘ show more’.
3. I want to add some gradient effect to the show more button. Please can you provide CSS for that.

December 22, 2018 at 10:43 am #97740

Elise Noromit
Member

Hello,

1. Convert HEX to RGB and insert https://www.rgbtohex.net/hextorgb/

2. You can translate all theme and plugin texts via PO file in WordPress. Here is a video tutorial that should help you translate your website texts with a Loco Translate plugin https://www.youtube.com/watch?v=D3NsDdMzsls&list=PLMw6W4rAaOgKKv0oexGHzpWBg1imvrval&index=3

3. Here is gradient creator http://www.colorzilla.com/gradient-editor/

Best Regards

December 22, 2018 at 12:16 pm #97754

[email protected]
Participant

No. 1 and 2 has been solved but how to use 3rd option. I mean should I just paste the code?

December 22, 2018 at 12:39 pm #97761

[email protected]
Participant

A piculiar problem arises.. Some of my friend told me that the cart is not showing in their website but in my laptop the cart is showing. But after I log out from my admin panel the both cart and logo were not visible to me also but I have set cart in my header. What could be the issue?

December 22, 2018 at 5:08 pm #97786

Elise Noromit
Member

Hello,

I am checking your site in logged off status https://gyazo.com/64918697ff37d9b918092215a86a01a3

I see logo and cart. Please clarify your questions.

Best Regards

December 22, 2018 at 5:10 pm #97788

[email protected]
Participant

Yes it’s ok now…some of my friends told me that my cart is not showing but it ok now…
Please give reply for my previous message about Css code.

December 22, 2018 at 5:35 pm #97796

Elise Noromit
Member

Hello,

You replace red; with RGB value and gradient is usually used on background, in this case, write ackground-color:yourgradientcode;

Best Regards

December 23, 2018 at 5:38 am #97866

[email protected]
Participant

Sorry but I am not able to under stand this. Please can you put this CSS through my admin access. See the attachment. I want to add this gradient to this button

December 23, 2018 at 9:14 am #97911

Elise Noromit
Member

Hello,

Create the gradient you need and provide so that I could insert.

Best Regards

December 23, 2018 at 11:37 am #97940

[email protected]
Participant

http://colorzilla.com/gradient-editor/#b2e1ff+12,66b6fc+67 */
background: rgb(178,225,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(178,225,255) 12%, rgb(102,182,252) 67%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(178,225,255) 12%,rgb(102,182,252) 67%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(178,225,255) 12%,rgb(102,182,252) 67%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#b2e1ff’, endColorstr=’#66b6fc’,GradientType=0 ); /* IE6-9 */

Did you mean this . I have created this from colorzilla

December 23, 2018 at 3:54 pm #97981
Elise Noromit
Member
Hello,

Here is how the code would look like:
```
body .category-grid-item .wrapp-category .hover-mask .category-title{
color: rgb(178,225,255); /*text color*/
background:background: -moz-linear-gradient(top, rgb(178,225,255) 12%, rgb(102,182,252) 67%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(178,225,255) 12%,rgb(102,182,252) 67%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(178,225,255) 12%,rgb(102,182,252) 67%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#b2e1ff’, endColorstr=’#66b6fc’,GradientType=0 ); /* IE6-9 */
}
```
Best Regards
December 24, 2018 at 3:09 am #98050

[email protected]
Participant

The code you provided not worked Instead it has worked on Product Categories element but I want this to be worked at Product Grid or Carousel’s Load More Button Which I have changed to show more.

Attachments:
You must be logged in to view attached files.

December 24, 2018 at 2:27 pm #98168

Elise Noromit
Member

Hello,

Please note custom CSS is not covered by our support policy, nevertheless we often provide custom CSS just to help our users. So, it would be great if you describe your issue more precisely. You provide different screenshots starting from categories in shop page heading and now you want product grid showing categories again. What element would you like to change? Please provide the page URL and screenshot. Hope for understanding.

Best Regards

December 24, 2018 at 3:35 pm #98186

[email protected]
Participant

Ok, sorry for misleading you. Look at the screenshot. I want to change just Show More button in product tab element(see the 1st attachment), but the code you gave earlier was for product categories element(see the 2nd attachment) which I dont want.

Attachments:
You must be logged in to view attached files.

December 24, 2018 at 6:29 pm #98238
Elise Noromit
Member
Hello,

Please add this code to the Theme Setting > Custom CSS
```
body .woodmart-load-more {
    background: linear-gradient(rgb(178, 225, 255) 12%, rgb(102, 182, 252) 67%);
    border-color: transparent !important;
}
```
Best Regards
December 25, 2018 at 10:41 am #98301

[email protected]
Participant

Thank you

December 25, 2018 at 11:49 am #98309

Elise Noromit
Member

You are welcome! If you have any questions please feel free to contact us.

Best Regards
Author

Posts