Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Change Layout of tick box to button style
This topic contains 3 replies, has 2 voices, and was last updated by Ernest Marcinko 3 years, 6 months ago.
- AuthorPosts
- March 1, 2021 at 8:47 am #31848
Hi,
I have changed the layout of filter check boxes to button style, I want to change background color on active check box, please let me know how to achieve this. Please see attachment for reference.
Thank you
Regards,
Shayan AhmedAttachments:
You must be logged in to view attached files.March 1, 2021 at 3:05 pm #31862Hi Shayan,
Well you can change the actual tick background colors here: https://i.imgur.com/P4gWGiH.png
However that may no longer be true to your case, if you already customized that. While we can not guarantee anything for customizations, I can check that out for you, maybe I can recommend a custom CSS or something – if that option does not work.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
March 1, 2021 at 6:55 pm #31875Hi,
I hope you are doing well. I think there is a little bit of confusion. Actually, I hide all the checkboxes as you can see in the above attachment, and apply a little bit of CSS in the search settings -> category level 1 -> option label. Just to make this more clear, this is the CSS I have used.
div.asp_w.asp_sb_2_1.searchsettings .asp_option_inner, div.asp_w.asp_sb_2_1.searchsettings fieldset legend{ display: none; } .asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-0 .asp_option_label, .asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-0 .asp_option_label{ padding: 10px 20px; text-align: center; color: #ffffff; font-family: "SofiaPro", Sans-serif; font-weight: 400; font-size: 14px; line-height: 18px; border-radius: 50px; background-color: #1a1962; box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 50%); } .asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-1 .asp_option_label, .asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-1 .asp_option_label{ padding: 10px 20px; text-align: center; color: #858383; font-family: "SofiaPro", Sans-serif; font-weight: 400; font-size: 14px; line-height: 18px; border-radius: 50px; background-color: #e6e6e6; box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 50%); } .asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-1 .asp_option_label:hover, .asp_w.asp_sb_2_1.searchsettings .asp_option_cat_level-1 .asp_option_label:hover{ padding: 10px 20px; text-align: center; color: #ffffff; font-family: "SofiaPro", Sans-serif; font-weight: 400; font-size: 14px; line-height: 18px; border-radius: 50px; background-color: #1161b7; box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 50%); }
Everything works fine, all I need is when the child category gets checked it changes the child category option label background as you can see in the attachment.
Thank you
Regards,
Shayan AhmedAttachments:
You must be logged in to view attached files.March 2, 2021 at 11:24 am #31887I’m afraid you can’t do that via custom CSS. The label and the checkbox are within different parent nodes, and there is no way to target parent nodes via CSS. The only way to do that is using javascript code. Using probably a click event handler on the labels to check the checkbox statuses and adding classes is the easiest way to go.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
- AuthorPosts
You must be logged in to reply to this topic.