I would like to adjust the styling of the filter that I have placed in the header of a table. Specifically the font colour and background colour (to make it different than the table header).
I can not find where to adjust the CSS to make this happen.
I have attached a screen shot. I can't give you a URL, because the site is under construction, however I can send you log in details if that would help?
I didn't tell you how I want it to change, because I would like to adjust the colours depending on the look. If you pick a random colour, I can adjust the HEX code etc.. to my liking.
I would like to adjust the styling of the filter that I have placed in the header of a table. Specifically the font colour and background colour (to make it different than the table header).
I can not find where to adjust the CSS to make this happen.
Thanks in advance.
Hello Heather
Can you please take a screenshot of it, and show me what you would like to change, and to what?
Also, please provide me the URL where the table is located, so I can find the correct CSS selectors for you.
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
I have attached a screen shot. I can't give you a URL, because the site is under construction, however I can send you log in details if that would help?
I didn't tell you how I want it to change, because I would like to adjust the colours depending on the look. If you pick a random colour, I can adjust the HEX code etc.. to my liking.
Hi again Heather
Sure, admin log-in details would help.
I need to find the correct CSS selector for you, and after that you'll be able to simply change it, like you mentioned.
Please keep in mind that this is a public ticket, so you need to enable the PRIVATE response.
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
Here is the page. https://animalsonstamps.com/amphibian-reptile-printable-search/
Again, it is the section under the header.
Hi again Heather.
To change the filter's background color, you need this:
#table_1 > thead > tr:nth-child(2) > th { background-color: red !important; }To change the color of the text in the filters:
.wpDataTablesWrapper th .text_filter, .wpDataTablesWrapper th .text_filter:focus, .wpDataTablesWrapper th .text_filter:hover, .wpDataTablesWrapper th .number_filter, .wpDataTablesWrapper th .number_filter:focus, .wpDataTablesWrapper th .number_filter:hover, .wpDataTablesWrapper th .wdt-select-filter > .btn-default, .wpDataTablesWrapper th .wdt-select-filter > .btn-default:focus, .wpDataTablesWrapper th .wdt-select-filter > .btn-default:hover, .wpDataTablesWrapper th .wdt-multiselect-filter > .btn-default, .wpDataTablesWrapper th .wdt-multiselect-filter > .btn-default:focus, .wpDataTablesWrapper th .wdt-multiselect-filter > .btn-default:hover, .wpDataTablesWrapper th .wdt-datepicker, .wpDataTablesWrapper th .wdt-datepicker:focus, .wpDataTablesWrapper th .wdt-datepicker:hover, .wpDataTablesWrapper th .wdt-datetimepicker, .wpDataTablesWrapper th .wdt-datetimepicker:focus, .wpDataTablesWrapper th .wdt-datetimepicker:hover, .wpDataTablesWrapper th .wdt-timepicker, .wpDataTablesWrapper th .wdt-timepicker:focus, .wpDataTablesWrapper th .wdt-timepicker:hover, .wpDataTablesWrapper th .number-range-filter, .wpDataTablesWrapper th .number-range-filter:focus, .wpDataTablesWrapper th .number-range-filter:hover { color: green !important; }The placeholder text for filters would need to be changed with innerHTML, and it's not something I can provide easily.
But I believe this is what you were looking for to achieve.
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 is exactly what we were after! THANK YOU!
You're welcome Heather
If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.
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