PluginUs.Net - Business Tools for WooCommerce and WordPress

[realize your idea - make your dreams come true]

Support Forum

You need to log-in to create request (topic) to the support

Custom CSS needed to change Colors

The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday. If you have problems with registration ask help on contact us page please
If you not got email within 24~36 business hours, firstly check your spam box, and if no any email from the support there - back to the forum and read answer here. DO NOT ANSWER ON EMAILS [noreply@pluginus.net] FROM THE FORUM!! Emails are just for your info, all answers should be published only here.
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday.
mink667(@mink667)
10 Posts
Customers
October 13, 2023, 07:15

I just purchased the premium version of this plugin (HUSKY - Products Filter Professional for WooCommerc)

I need to change a few of the filters/settings to #83c4aa which is one of the primary colors of our website.   You can reference https://talialmogpaintings.com/originals/ so you can see your plugin in action

1. For"product size"  I am using"Label".  What custom CSS would I need in order to change the color upon hoover to #83c4aa
a) would I need any additional custom CSS to change the color of the count that shows up within the Labels?

2. For color of the"Search by Price" filter what custom CSS would would I need in order to change the color from one of your default choices to #83c4aa

3. For"Radio and Checkboxes skin" what custom CSS would would I need in order to change the color from one of your default choices to #83c4aa

4. Upon hoover of the"Filter" box what custom CSS would would I need in order to change the color from the default grey color to #83c4aa

6. Why do I see"Husky Filter" on the top of my widget on the page and how do I either delete or change that text?

#1
Pablo Borysenco(@pavlo_borysenco)
34,196 Posts
October 13, 2023, 13:31

Hello

1)

.woof .woof_list_label li .woof_label_term:hover, .woof .woof_list_label li .woof_label_term.checked {

 background-color: #83c4aa;

border-color: #83c4aa;

}
.woof .woof_label_count {
background-color: #83c4aa;
border: 1px solid #ddd;
color: #fff;
}
2)
.woof .irs--round .irs-bar {
background-color: #83c4aa;
}
.woof .irs--round .irs-handle {
border: 4px solid #83c4aa;
}
.woof .irs--round .irs-from, .woof .irs--round .irs-to, .woof .irs--round .irs-single {
background-color: #83c4aa;
}
.woof .irs--round .irs-from:before, .woof .irs--round .irs-to:before, .woof .irs--round .irs-single:before {
border-top-color: #83c4aa;
}
3 Unfortunately checkboxes use sprites so you need to change the image to change the color
4
.woof .woof_submit_search_form_container button:hover{
background-color: #83c4aa;
}
6 This is the widget title, change this in the widget settings
#2
mink667(@mink667)
10 PostsTopic Author
Customers
October 13, 2023, 14:41

Thank you for the quick response. I am almost done with this ticket.  A few more questions:

1. You stated that if  I want to change the color of the"Radio and Checkboxes skin" from one of your default choices to #83c4aa I need to change the sprite image.
My questions on this topic are:
a) Were in specific do I change the sprite image and
b) Where can I grab a copy of the existing sprite image so I can change the color?  I suppose I can do a capture of the Sprite image on the live site but I think there may be a better solution on the backend?

2.  You gave me the custom css to change the color of the"Filter" box upon hoover.

My question is: what custom CSS would would I need in order to change the color of the text upon hoover of the"Filter" box from black (which is default) to white.

 

#3
Pablo Borysenco(@pavlo_borysenco)
34,196 Posts
October 16, 2023, 12:11

Hello

1  In folder - \wp-content\plugins\woocommerce-products-filter\js\icheck\skins\

2

.woof .woof_submit_search_form_container button:hover{
background-color: #83c4aa;
color: #fff;
}
#4
mink667(@mink667)
10 PostsTopic Author
Customers
October 16, 2023, 15:23

Almost done... With the above code upon hoover border is black.  I added the following code but only the top an left border change to #83c4aa;

.woof .woof_submit_search_form_container button:hover{
background-color: #83c4aa;
color: #fff;
border-color: #83c4aa;

}

What am I doing wrong to get all 4 border sides of the filter button to be #83c4aa?

#5
Pablo Borysenco(@pavlo_borysenco)
34,196 Posts
October 17, 2023, 11:41

Hello

Please  add border:none;

.woof .woof_submit_search_form_container button:hover{
background-color: #83c4aa;
color: #fff;
border:none;

}

 

#6