Change CSS Style – Category Filter

New home Forums Pro Add-on Change CSS Style – Category Filter

Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #61107
    BenjaminGo
    Participant

    Hi,

    i would like to change the css of the category filter.
    I have choose checkbox and now i would like to style it like a button.

    Is this possible?
    you can find the map and filter here: https://b3774v.myraidbox.de/referenzen/

    Thx 🙂

    Attachments:
    You must be logged in to view attached files.
    #61110
    Steven
    Moderator

    Hi there,

    Thank you so much for getting back to us.

    Could I kindly ask you to remove the following custom CSS from your custom CSS field?

    .wpgmza_cat_checkbox_item_holder {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border: 1px solid;
    display: flex;
    padding: 20px 20px 20px 20px;
    }

    Once complete, kindly paste the following custom CSS:

    .wpgmza_checkbox {
    position:absolute;
    visibility:hidden;
    opacity:0;
    }
    .wpgmza_cat_checkbox_item_holder input[type=checkbox] + label {
    color: #f4f4f3;
    font-style: italic;
    background: #2099cc;
    margin: 5px;
    padding: 5px;
    border-radius: 2px;
    }
    .wpgmza_cat_checkbox_item_holder input[type=checkbox] + label:hover {
    background: #032955;
    cursor: pointer;
    }
    .wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked + label {
    background: #032955;
    }
    .wpgmza_cat_checkbox_item_holder {
    display: flex;
    }

    Please then click save and kindly let me know if this aesthetic was what you are aiming for?

    I look forward to hearing back from you.

    Kindest Regards,
    Steven De Beer

    #61112
    BenjaminGo
    Participant

    thank you very much 🙂 it works 🙂

    and how can i erase the automatic number behind the word?

    Ausbau (3) <- This (3)

    Thank you 😉

    #61113
    BenjaminGo
    Participant

    and one thing 🙂 How could it be responsive? among each other and not next to each other when its responsive. Now it comes a scrolling bar.

    thx 🙂

    #61123
    Steven
    Moderator

    Hi again,

    Thank you so much for getting back to me.

    It seems you managed to remove the quantity count, is this correct?

    Could I kindly ask you to add the following CSS in addition to the previous CSS?

    @media only screen and (max-width: 795px) {
    .ct-section-inner-wrap {
    padding-left: unset;
    padding-right: unset;

    }
    .wpgmza_cat_checkbox_item_holder input[type=checkbox] + label {
    margin-right: 0px;
    width: 100%;
    margin-bottom: 5px;

    }
    .wpgmza_cat_checkbox_holder {
    max-height: unset;
    }
    .wpgmza_cat_checkbox_holder ul:first-child {
    display: block;
    }
    }

    Kindly confirm once complete?

    Kindest Regards,
    Steven De Beer

    #61152
    BenjaminGo
    Participant

    yes – it works. thank you very much! 🙂

    #61157
    Steven
    Moderator

    Hi there,

    Thank you so much for getting back to me.

    I am glad to hear this has helped.

    Do have a great weekend ahead!

    Kindest Regards,
    Steven De Beer

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.