Okay
  Public Ticket #2508251
cell formatting using css classes
Closed

Comments

  • brett started the conversation

    Documentation spends a lot of time talking about what I can do and very little telling me how. Where do I add this css class when using cell formatting. Below is from your documentations:

    1. Formatting operation – “What to do when a match is found?”. This defines the type of formatting to apply if the cell matches the condition defined in 1. and 2. You are given the following options:
      • Set cell color. This changes the current cell’s color to one defined in the rule.
      • Reset cell color to default. If any previous conditional formatting rule defined a cell color, it will be reset.
      • Set cell content. Override the actual cell contents with some custom HTML. This is useful if for example, you want to replace company names with logos, or status messages with icons. Please note that sorting and filtering will be applied before the conditional formatting takes place, so if you choose to set a cell’s content to “zzz” when it’s actual value is “aaa”, it’s still going to be on top when you sort, because sorting is done against the original data set.
      • Set cell CSS class. Adds a defined CSS class (or several classes if they are entered separated by a space) to cells which match the conditional formatting rule. Useful for custom highlighting (custom font, font size, alignment, etc.)
      • Remove cell CSS class. Removes a given CSS class (or several classes if entered separated by a space) from a cell, if it matches the rule.
      • Set row color. Sets the whole row color to the color provided if a cell matches the rule.
      • Reset row color to default. If a previous conditional formatting rule defined a row color, it will be reset.
      • Set row CSS class. Adds a CSS class (or several classes if entered separated by a space) to all cells within this row, if a cell in this column matches the rule. This is useful for custom highlighting (custom font, font size, alignment, etc.)
      • Remove row CSS class. Removes a given CSS class (or several classes if entered separated by a space) from all cells within the current row, if the cell content in the current column matches the rule.
      • Set column color. Sets the whole column color to a provided one if one cell (within the visible range for tables with server-side processing) matches the rule. This operation has the highest priority. It will override other color-setting operations if they have been defined.
      • Set column CSS class. Adds a CSS class to all cells within this column (within the visible range for tables with server-side processing) if at least one cell in this column matches the rule. This is useful for custom highlighting (custom font, font size, alignment, etc.)
    2. Operation value. Color for highlighting (defined with a colorpicker), for coloring operations, or as a value for defining CSS classes or resetting cell values.
    3. Delete button. Clicking the “X” button will delete the entire row.

    Can you please tell me where I can find info on setting custom css for cells conditions? 

  •  2,572
    Aleksandar replied

    Hello Brett

    We don't cover stuff not developed by us in our documentation, so you will never find detailed explanations on how to use HTML, CSS, SQL, JS, etc. CSS is something you need to know in order to use it in our plugin. 

    I assume, you're talking about this: 

    Set cell CSS class

    Set row CSS class

    Set column CSS class

    So,  add a CSS class to cell, row or a column. Then, the CSS class needs to be defined in wpDataTables settings/Custom JS and CSS/Custom CSS field.

    To play around with a table with Conditional Formatting in our Sandbox, click here or here to tweak the back-end configuration.

    You can also see an examplee of Conditional Formatting in our Cryptocurrency Table tutorial.

    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