[Resolved] Help styling search buttons independently

[Author]

Posts

[matthiasP-2]

I also have a similiar problem with another toolset based page im currently working on. It is a specific a doctors study search site where you can sort the different studys shown with buttons. The studys are sorted by color and so should be the buttons.

Heres another video where you can see how the site already works: hidden link

I created the view with the wordpress block editor and you can see that I 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. The different "organ" buttons (Magen, Darm, etc.) are all summarized under one css class, so I cant customize each button individually.

Is there a way to assign each button an individual css class? Or do you know some other way to fix this problem?

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

[Waqar]

Hi David,

Thank you for contacting us and I'd be happy to assist.

There is no built-in option available to conditionally apply different styles/classes, so this will require some workaround.

Can you please share temporary admin login details along with the link to the page where this view can be seen? I'll be in a better position to suggest the next steps accordingly.

Please also include details about the criteria based on which the results need to be grouped into different colors.

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[matthiasP-2]

Hey Waqar, were you able to take a look at my site? Did not here from you for a while...

regards,
David

[Waqar]

Hi David,

Thank you for waiting and I apologize for the delay in getting back on this.

I was on vacation, but not sure how this ticket was somehow lost in the forum, earlier.

I've noticed that you've included conditional blocks in the view, to show different types of organs in different color results.

To make the button inside these results to also show in distinct colors, you can follow these steps:

1. In the container block within each conditional block you can include a special class named, with that organ's value.

For example, inside the conditional block for the organ value equal to "3", you can include the class named "organ-3" to the container block that immediately follows.
(example screenshot attached)

Similarly, you can add the classes with the value in the name, to the containers with other conditional blocks too.

2. Once all your results have the correct class names in the container, you can target the button inside the container, for each organ type like this:

.wp-block-toolset-blocks-container.organ-1 .tb-button__link {
    background-color: rgba( 54, 166, 133, 1 ) !important;
    color: #ffffff !important;
}

.wp-block-toolset-blocks-container.organ-2 .tb-button__link {
    background-color: rgba( 250, 166, 59, 1 ) !important;
    color: #ffffff !important;
}

.wp-block-toolset-blocks-container.organ-3 .tb-button__link {
    background-color: rgba( 50, 92, 158, 1 ) !important;
    color: #ffffff !important;
}

.wp-block-toolset-blocks-container.organ-4 .tb-button__link {
    background-color: rgba( 238, 96, 64, 1 ) !important;
    color: #ffffff !important;
}

You can include this custom CSS in the view's custom CSS field.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[matthiasP-2]

Hi Waqar,

thanks for your reply. I think there was a misunderstanding. I do not want to customize the buttons inside the search results ("weitere Informationen"), I want to customize the searching checkboxes ("Magen, Darm, Speiseröhre, Brust"). In the first screenshot that I am sending with this message, you can see how the sites search view currently looks. The second screenshot shows how it should eventually look.

Is there a way to customize the searching checkboxes individually? Maybe you could take another look at the site?

Let me know, if you need more Information.

Thanks for helping!

[Waqar]

Thanks for writing back and for sharing further details.

To customize the look of the organ field's search filter checkboxes, you can use the custom CSS code approach as suggested by Christian, in the other ticket.
( ref: https://toolset.com/forums/topic/styling-search-buttons-independently/#post-2145221 )

For example:

.form-check-input[name="wpv-wpcf-organ[]"] {
z-index: 1;
position: relative;
margin: 0px !important;
width: 20px !important;
height: 20px !important;
}

.form-check-input[name="wpv-wpcf-organ[]"] + label {
display: inline-block;
font-size: 14px;
padding: .5em 1.5em .52em;
cursor: pointer;
line-height: 1.3!important;
z-index: 10;
position: relative;
margin-left: -20px;
border: 2px solid transparent;
}

.form-check-input[name="wpv-wpcf-organ[]"]:checked + label {
border: 2px solid;
}

.form-check-input[name="wpv-wpcf-organ[]"][value="1"] + label {
background-color: rgba( 201, 229, 210, 1 );
}

.form-check-input[name="wpv-wpcf-organ[]"][value="2"] + label {
background-color: rgba( 255, 234, 179, 1 );
}

.form-check-input[name="wpv-wpcf-organ[]"][value="3"] + label {
background-color: rgba( 227, 235, 254, 1 );
}

.form-check-input[name="wpv-wpcf-organ[]"][value="4"] + label {
background-color: rgba( 254, 210, 207, 1 );
}

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[matthiasP-2]

Hello Waqar,

thank you very much for the css code. That helped a lot. The searching bar also works pretty well now. Heres a screencast video of the current website:

hidden link

In the video you can see, that the saving function of the wordpress block editor stopped working. When I want to save the page, the saving progress does not stop and I can not view my changes in a new tab. That is why I had to transfer all the css code to the customizer (also shown in the video). Now I am currently editing my view in the customizer.

I am almost finished with the site but there is one last problem: In the attached screenshot you can see that the buttons should be able to turn grey, when another button is active. Do you know how to do this in css? Or is there a javascript that I can use?

regards,
David

[Waqar]

Thanks for the update.

I can't think of a simple CSS approach through which you can turn all non-selected checkboxes to grey, when selection is changed. However, you can update the CSS code from my last message slightly, to keep all the buttons grey and turn only the selected one into the colored state:

.wpv-filter-form .wpv-custom-search-filter-reset input[type="button"] {
background-color: rgba(23, 22, 26, 0.04);
color: #2e3b47;
font-weight: 500;
border: 2px solid transparent;
}

.form-check-input[name="wpv-wpcf-organ[]"] {
z-index: 1;
position: relative;
margin: 0px !important;
width: 20px !important;
height: 20px !important;
}
 
.form-check-input[name="wpv-wpcf-organ[]"] + label {
display: inline-block;
font-size: 14px;
padding: .5em 1.5em .52em;
cursor: pointer;
line-height: 1.3!important;
z-index: 10;
position: relative;
border: 2px solid transparent;
margin-left: -8px;
background-color: rgba(23, 22, 26, 0.04);
}
 
.form-check-input[name="wpv-wpcf-organ[]"][value="1"]:checked + label {
background-color: rgba( 201, 229, 210, 1 );
}
 
.form-check-input[name="wpv-wpcf-organ[]"][value="2"]:checked + label {
background-color: rgba( 255, 234, 179, 1 );
}
 
.form-check-input[name="wpv-wpcf-organ[]"][value="3"]:checked + label {
background-color: rgba( 227, 235, 254, 1 );
}
 
.form-check-input[name="wpv-wpcf-organ[]"][value="4"]:checked + label {
background-color: rgba( 254, 210, 207, 1 );
}

For even more ideas and customization suggestions, you can consult someone from our list of recommended contractors:
https://toolset.com/contractors/