Change Layout of tick box to button style

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 Ernest Marcinko 1 year, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #31848
    theonlyit59
    theonlyit59
    Participant

    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 Ahmed

    Attachments:
    You must be logged in to view attached files.
    #31862
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi 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 :)


    #31875
    theonlyit59
    theonlyit59
    Participant

    Hi,

    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 Ahmed

    Attachments:
    You must be logged in to view attached files.
    #31887
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    I’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 :)


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.