Is it possible to add a custom class to a filter?

  • I have 4 filters set up that each include a different set of categories. I have been able to use CSS to style the filter title, bottom border and the icon. I’ve been able to set the color of the filter title in Divi using the text box I use for the shortcode. However, I would like to have the bottom border of the filter match the color of the filter title. Is there a way to add a custom class to each filter in order to accomplish this? Or do you know another way to accomplish it? I tried using this code using ninth child but it had no affect:

    .wpf_items_grouped .wpf_grouped_label:nth-child(1) {
font-weight: 500 !important;
border-bottom: 3px solid #6757a3 !important;
}
.wpf_items_grouped .wpf_grouped_label:nth-child(2) {
font-weight: 500 !important;
border-bottom: 3px solid #00afef !important;
}
.wpf_items_grouped .wpf_grouped_label:nth-child(3) {
font-weight: 500 !important;
border-bottom: 3px solid #1f4b8e !important;
}
.wpf_items_grouped .wpf_grouped_label:nth-child(4) {
font-weight: 500 !important;
border-bottom: 3px solid #6757a3 !important;
}

    Also, when I select “Show Category Hierarchy”, the filter title shows but none of the categories. Is there a glitch?

    Thanks for any help you can give me.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author themifyme

    (@themifyme)

    Hi,

    How I see you already changed the bottom border of the filters: https://share.getcloudapp.com/2NulNY26 by using the below Custom CSS:

    .wpf_items_grouped .wpf_grouped_label {
    font-weight: 500!important;
    border-bottom: 3px solid #00afef!important;
}

    or these are not the borders you were referring to? If not, please send us a screenshot and point out which border(s) you would like to change.

    Thread Starter EcstaticDesign

    (@ecstaticdesign)

    Hi, yes, those are the borders I’m wanting to change. My current code changes all of them to be alike. I’m hoping to be able to change them so that each one is a different color. That’s why I was wondering if it’s possible to add a custom class to each individual filter so that I could style them independently.

    Thanks!

    Plugin Author themifyme

    (@themifyme)

    How I see you added the filters in separate page-builder text elements, so you can use these element’s class to separate them to apply different border-colors, but do a general one like this:

    .wpf_items_grouped .wpf_grouped_label {
    font-weight: 500!important;
    border-bottom: 3px solid #00afef !important;
}

    then use this CSS to change just the border-colors:

    .et_pb_text_1 .wpf_items_grouped .wpf_grouped_label {
    border-color: #f00 !important;
}

.et_pb_text_2 .wpf_items_grouped .wpf_grouped_label {
    border-color: #00f !important;
}

.et_pb_text_3 .wpf_items_grouped .wpf_grouped_label {
    border-color: #0f0 !important;
}

.et_pb_text_4 .wpf_items_grouped .wpf_grouped_label {
    border-color: #000 !important;
}

    Please let me know how it works.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Is it possible to add a custom class to a filter?’ is closed to new replies.