I'm trying to style buttons inside my table. I'm referring to a column that has urls that are displaying as buttons.
I already tried using the "Button Color in Modals", but it didn't affect the styling.
I've tried using the custom CSS in the column settings, but I'm really getting stuck. I'm somewhat novice at CSS, so maybe I'm missing something really obvious.
I tried using the class .wpdt-c button, which changes all the buttons inside of WP Data Tables (not good!). I also tried .wpdt-c html input[type="button"], which didn't work. I tried creating my own class in the WP Data Tables settings using
<style>
.my-button
{
blahblah
}
</style>
This also didn't work.
I would also love the CSS for hovering over the button.
Would you mind giving me a screen shot of how I would add hover CSS for the text styling example you gave? THANKS!
When I had tried my own CSS (I had tried it with and without <style> in the custom CSS) the problem was that I had a period in the class in the table. In your example you wrote "test". I was doing all the same steps but instead had ".test" so it didn't work! So simple. Grr.
I'm trying to style buttons inside my table. I'm referring to a column that has urls that are displaying as buttons.
I already tried using the "Button Color in Modals", but it didn't affect the styling.
I've tried using the custom CSS in the column settings, but I'm really getting stuck. I'm somewhat novice at CSS, so maybe I'm missing something really obvious.
I tried using the class .wpdt-c button, which changes all the buttons inside of WP Data Tables (not good!). I also tried .wpdt-c html input[type="button"], which didn't work. I tried creating my own class in the WP Data Tables settings using
<style>
.my-button
{
blahblah
}
</style>
This also didn't work.
I would also love the CSS for hovering over the button.
Please help! Thank you!
Hello Jodi
Thank you for your purchase.
Have you added a custom class in the column settings?
If you add a class name, like this, then you can go to main settings of wpDataTables/Custom JS and CSS/Custom CSS field, and style it there, like:
.test { border: none; color: white; background-color: wheat; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 120px; }And the buttons would look like this:
You can also add the hover styling to this CSS.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
This was SO helpful and SO easy. Thank you!
Would you mind giving me a screen shot of how I would add hover CSS for the text styling example you gave? THANKS!
When I had tried my own CSS (I had tried it with and without <style> in the custom CSS) the problem was that I had a period in the class in the table. In your example you wrote "test". I was doing all the same steps but instead had ".test" so it didn't work! So simple. Grr.
I figured out how to do the hover. Thanks again!
I use this online CSS generator and it works just fine with wpdatatables -
https://www.bestcssbuttongenerator.com/
Thanks for sharing that Srinath
I'm sure everyone will have use of that
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables