Filters Title Customization

[Alex Meda]

Hi,
Please in which part of the settings can I customize the “font-size” of the Search Filters Titles as I red-highlighted on the screenshot below.

[Ernest Marcinko]

Hi,

Those are inherent in most cases from the theme, but you can customize it by using this custom CSS:

.asp_w fieldset legend {
    font-size: 14px !important;
}

[Alex Meda]

Hi,
Things were working fine until now and I don’t know exactly where the issue is with my ChildTheme but users can’t check the filters anymore. Please Watch This

[Ernest Marcinko]

Is there a page where I can take a look at this? It looks like some sort of a CSS conflict, but I am not sure. Thank you!

[Alex Meda]

Hi,
You can find it On The Landing Page or On This One

Thank you

[Ernest Marcinko]

Thanks!

I’m seeing this custom CSS causing the issue:

label {
    font-size: medium;
    color: black;
    display: contents!important;
}

The problem is the third line. You can either track down this rule, or use this custom CSS to override that:

.asp_w.asp_s label,
.asp_w.asp_sb label {
    display: inline !important;
}

[Alex Meda]

You’re right !! The issue has successfully resolved so thanks a looot!
Now I wondering how to change the color of these labels. I already tried this :

.asp_w fieldset legend {
font-size: 14px !important;
color: black !important;
}

But it’s not working yet.

[Ernest Marcinko]

You are welcome 🙂

Use this for the option labels:

.asp_w.asp_s .asp_option_label,
.asp_w.asp_sb .asp_option_label {
    color: red !important;
}

[Alex Meda]

Hi 🙂
Thanks for the details but I think that I didn’t explain myself well,
I was indeed talking about the titles that I highlighted in red on the screenshot about: “Generic Filter”, ” Global Filter” , “Price Range” etc

[Ernest Marcinko]

Oh, I’m sorry, I thought you meant that other thing.

In that case your custom CSS is 100% correct. I tried it on the inspector stylesheet and it has the effect (even with a different color):

.asp_w fieldset legend {
  font-size: 14px !important;
  color: #0c71c3 !important;
}

Make sure to clear the site cache/browser cache, usually that causes the issue.

[Alex Meda]

I truly thank you a lot for your remarkable work! It’s working perfectly as I wanted it all 🙂

[Ernest Marcinko]

You cannot access this content.

[Alex Meda]

You cannot access this content.

[Author]

Posts