Okay
  Public Ticket #3742420
Set cell font colour
Closed

Comments

  • Jon Draper started the conversation

    I'd like to be able to change the font color of text on a conditional basis.

    I couldn't see any tutorial for this in help guides or examples. Though it seems it should be possible via custom cell css.

    I tried adding this in my tables custom CSS

    .green-black-text {
        background-color: green !important; /* Set background to green */
        color: black !important; /* Set text color to black */
    }

    Then setup a conditional formatting for one of the columns.

    [if contains] [yes] [set Cell CSS class] [green-black-text]


    But this does not work and I cannot see why.


    I can set the cell colour, using this conditional formatting using:

    'if contains' 'yes' set cell colour (to a green colour). 

    but I'd like to set text colour instead, rather than having overly powering coloured blocks.:


    Thanks for your help.


    Two other things... are there plans to support settings for rows rather than just columns. As I've had to work around stuff to have the platforms listed along the top but it's not ideal.

    I tried the beta, fixed header / row options. They work fine on desktop but bugged out on mobile with juddery motion when scrolling down the page, and some things visible when scrolling sideways below the fixed left row. (*So I've disabled that for now).

  •  1,851
    Miloš replied

    Hi Jon,

    1. In regards to setting text color for specific cells based on value via Conditional Rules, we can do it via Custom CSS class, as you tried.
      Maybe there is some style on your WP Theme which overrides it - so try adding an !important clause when applying text color.

    Here is a more detailed example we made from our test table, of how you can achieve to set a Conditional rule on the column that will set different color text if the cell has certain content.

    If I have a column like this with some countries :

    9030176545.png

    First we make a couple of Conditional rules like this :

    9851449705.png

    Then we add this custom CSS to the table Customize/Custom CSS:

    td.Green {   
    color: green !important; } td.Red {
    color: red !important; }

    And now the text of the cells that contain my condition in the content,  have changed text color :

    4397674577.png

    Let me know if that makes sense, and if that works for you.


    2. Are there plans to support settings for rows rather than just columns. As I've had to work around stuff to have the platforms listed along the top but it's not ideal.
    I am sorry, but I am not fully understanding what you mean by this part.
    If you mean to make conditionals which affect a row, we can easily do this.
    You can add a CSS class to the entire row - if your condition is matched;


    3. I tried the beta, fixed header / row options. They work fine on desktop but bugged out on mobile with juddery motion when scrolling down the page, and some things visible when scrolling sideways below the fixed left row. (*So I've disabled that for now).
    I guess you mean the Fixed Header option?
    We are not able to reproduce any issue - that feature works fine for us on desktop and mobile screens.
    Can you please record a Video of your screeen to show us how you configured your Table and how it looks on the front-end when you see the issue?
    If the Video can't be sent here, just upload to weTransfer and you can send it as a download link.
    If any sensitive data is shown, please mark the reply as PRIVATE.

    If you can please also try multiple/different browsers - let me know if that only happens on a specific browser.
    If so, please confirm which browser and which version you have installed - and which device is used.

    Thank you.


    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    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

  •   Miloš replied privately