New home › Forums › Pro Add-on › Change CSS Style – Category Filter
- This topic has 3 replies, 1 voice, and was last updated 3 years, 1 month ago by Steven.
-
AuthorPosts
-
October 14, 2020 at 1:47 pm #61107BenjaminGoParticipant
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.October 14, 2020 at 3:12 pm #61110StevenModeratorHi 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 BeerOctober 14, 2020 at 7:21 pm #61112BenjaminGoParticipantthank you very much 🙂 it works 🙂
and how can i erase the automatic number behind the word?
Ausbau (3) <- This (3)
Thank you 😉
October 14, 2020 at 7:36 pm #61113BenjaminGoParticipantand 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 🙂
October 15, 2020 at 7:59 am #61123StevenModeratorHi 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 BeerOctober 16, 2020 at 10:17 am #61152BenjaminGoParticipantyes – it works. thank you very much! 🙂
October 16, 2020 at 1:09 pm #61157StevenModeratorHi 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 -
AuthorPosts
- You must be logged in to reply to this topic.