Skip Navigation

[Closed] Styling search buttons independently

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.

Our next available supporter will start replying to tickets in about 0.19 hours from now. Thank you for your understanding.

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 3 months, 1 week ago.

Assigned support staff: Christian Cox.

Author
Posts
#2144963

Hello Christian,

first of all, thank you very much for helping me with my glossary page. It works really well now.

I also have a similar 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 also help me with this question, your last advise helped me a lot!
David

#2145221
Screen Shot 2021-08-17 at 6.25.58 PM.png

Is there a way to assign each button an individual css class? Or do you know some other way to fix this problem?
When you say "buttons", are you referring to the checkbox inputs, or something else? You can use CSS class and attribute selectors to target individual checkbox inputs based on their name and value. This code shows how you would target each Organ checkbox by class, name and value together. I'm attaching a screenshot to show where you can find this information in the browser inspector.

.form-check-input[name="wpv-wpcf-organ[]"][value="1"] {
  /* your CSS for the organ checkbox with value=1 */ 
    height: 50px;
    width:50px;
    box-shadow: 0px 0px 20px lime;
}
.form-check-input[name="wpv-wpcf-organ[]"][value="2"] {
  /* your CSS for the organ checkbox with value=2 */ 
}
.form-check-input[name="wpv-wpcf-organ[]"][value="3"] {
  /* your CSS for the organ checkbox with value=3 */ 
}

https://stackoverflow.com/questions/12340737/specify-multiple-attribute-selectors-in-css

The topic ‘[Closed] Styling search buttons independently’ is closed to new replies.