[Resolved] Customizing Search Buttons with additional css

[Author]

Posts

[matthiasP-2]

Hello,

I want to design a specific a doctors study search site with Toolset. It should be possible to sort the different studys as shown in the pictures.

I already started creating a view with the wordpress block editor and was able to customize the search results close to the original design. But I came upon a lot of problems customizing the search buttons in a way that is close to my original design. So here are my questions:

1. Is it possible to design the search Buttons with custom css inside the Block editor in a way that comes close to my Design?
2. The studys are sorted by color. The organ search buttons should have different colors and have to turn grey when another organ search button is active. Do I need to use/create a javascript for this?
3. If it is not possible to customize the search buttons inside the wordpress block editor, can i design the search view inside the classic toolset view editor to customize the search with css and html? Can I still create the search results view inside the wordpress block editor and combine both views somehow afterwards?

I hope you can help me with my question, thanks in advance for your help!
David Voges

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - Using Toolset, you are free to add custom CSS and JS to views, content templates and archives.

Here is the doc:
- https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/
- https://toolset.com/course-lesson/adding-custom-javascript-to-views-templates-and-archives/

Where you can add your custom CSS and JS as per your requirement and use those custom CSS class/IDs to target your specific block. With most of the block you will find a "Advanced" tab on right panel where you can define the custom CSS class and IDs.

[matthiasP-2]

Hello Minesh,

thank you for your answer. I read the two articles you send me but I still have a few questions. I know that I can add custom css and js to my View inside the block editor. But here is my problem:

It is about the checkboxes (Magen, Darm, Speiseröhre, Brust, Sonstiges) which you can see in the screenshot that I sent you. All these checkboxes have the same class (div class="form-check") but I want to customize each button invidualy with css. I want to change background color, hover color, the color when the checkbox is not active etc. (a little bit like in this example: hidden link ). I added a Screenshot of how it should work/look like eventually.

Is it possible to design each of the checkboxes individualy? And how can I do that?

Thanks for your help!

[Minesh]

You will have to totally customize it and there is no easy way to style the checkboxes.

If you search the forum you will find number of tickets with where user has added custom CSS on their own or if you want custom programming for your project you are welcome to contact our certified partners:
=> https://toolset.com/consultant/

[matthiasP-2]

Hi Minesh,

so there is no way to style the checkboxes, when you’re not a professional programmer?

Maybe I can create multiple different checkboxes, so that each individual checkbox is a custom post type? Than I should be able to customize each individual checkbox right?

When I do that, is it also possible to activate multiple checkboxes at the same time?

Thanks for helping

[Minesh]

There is no easy way to style checkboxes field. You should have HTML+CSS+jQuery+Javascript knowledge.

Do you want to filter the posts by post type? and for that you want the checkboxes field? If yes, again there is no native way to filter the posts by post type, you will have to add additional code/filter.

As shared - you can always consult our certified partners for any custom programming requirement:
- https://toolset.com/consultant/