Skip Navigation

[Resolved] checkboxes as separate buttons

This thread is resolved. Here is a description of the problem and solution.

Problem:
Want to display checkboxes as buttons in Custom Search View.

Solution:
Modify and add the following CSS in your theme’s style.css file OR add it in View >> CSS editor section:

.checkbox {
    background: black none repeat scroll 0 0;
    border-radius: 5px;
    display: inline-block !important;
    margin: 0 10px;
    padding: 10px 20px;
}
 
.page-id-36 .form-group {
 width:100% !important;
}
 
.checkbox input {
 display:none !important;
}
 
.checkbox label {
 padding-left:0 !important;
}

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 replies, has 2 voices.

Last updated by emilyr 4 years ago.

Assigned support staff: Noman.

Author
Posts
#569994
Screen Shot 2017-09-14 at 9.21.34 AM.jpg

hi– i've set up a view along with a custom search. everything is working properly, however i'd like the checkboxes to appear as seperate buttons at the top of the view instead of stacked on top of one another (see image).

how can i achieve this?

site is here: hidden link
user: njch
pass: trenton

#570059

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Result.png

Hi Emily,

Thank you for reaching out to us. You can modify checkboxes style using custom css. I have written example CSS below, please modify and add the following CSS in your theme’s style.css file OR add it in View >> CSS editor section:

.checkbox {
    background: black none repeat scroll 0 0;
    border-radius: 5px;
    display: inline-block !important;
    margin: 0 10px;
    padding: 10px 20px;
}

.page-id-36 .form-group {
 width:100% !important;
}

.checkbox input {
 display:none !important;
}

.checkbox label {
 padding-left:0 !important;
}

It will give you result something like in attached screenshot. You can add more styles and design as needed in above css.

Thank you

#570098

just the nudge i needed, thanks noman!