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 is split from https://toolset.com/forums/topic/renaming-pagination-buttons-on-glossary-page/
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| - | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | - |
| - | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | - |
Supporter timezone: Asia/Karachi (GMT+05:00)
This topic contains 7 replies, has 2 voices.
Last updated by Waqar 2 years, 8 months ago.
Assisted by: Waqar.
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
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
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!
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
