We're Moving to a New Support Platform – Starting June 1st!

We’re excited to let you know that starting June 1st, we’ll be transitioning to a new support system that will be available directly on our product websites – Amelia, wpDataTables, and Report Builder. In fact, the new support platform is already live for Amelia and wpDataTables, and we encourage you to reach out to us there.

You'll always be able to reach us through a widget in the bottom right corner of each website, where you can ask questions, report issues, or simply get assistance.

While we still do not offer live support, a new advanced, AI-powered assistant, trained on our documentation, use cases, and real conversations with our team, is there to help with basic to intermediate questions in no time.

We're doing our best to make this transition smooth and hassle-free. After June 1st, this current support website will redirect you to the new "Contact Us" pages on our product sites.

Thanks for your continued support and trust – we’re excited to bring you an even better support experience!

Okay
  Public Ticket #1786353
Change color of advanced filter text?
Closed

Comments

  • LaGwana started the conversation

    How can I change the color of the font in the advanced filter? I have it rendering in my header but with the color that I want the header to be, the dark grey and black don't show up well. I was able to change the header font to white and that works great.

    I want to change both the active filter font color and the not active filter font color.

  •  2,576
    Aleksandar replied

    Hello LaGwana.

    Thank You for Your purchase.

    You need to add a line of code in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpDataTables.
    The following code changes the font color for everything (text, dropdown, checkboxes, etc.):

    .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: gray !important;}

    This will affect all tables, but if You want to change the color for specific one, then insert this code on the page where that table is, between the style tag (<style>CODE HERE</style>).

    <style>
    .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: gray !important;}
    </style>
    

    Please let me know if this helped.

    Best regards.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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