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.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| - | 12:00 – 17:00 | 12:00 – 17:00 | 12:00 – 17:00 | 12:00 – 17:00 | 12:00 – 17:00 | - |
| - | 18:00 – 21:00 | 18:00 – 21:00 | 18:00 – 21:00 | 18:00 – 21:00 | 18:00 – 21:00 | - |
Supporter timezone: Asia/Karachi (GMT+05:00)
This topic contains 2 replies, has 2 voices.
Last updated by emilyr 6 years, 7 months ago.
Assisted by: Noman.
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
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
