Documentation request: CSS

[Tom-ahawk]

Being a total N00b, I don’t understand most part of the documentation.

Could you please document:

• Custom color for a column
• Custom color for a row
• Custom color for column name
• Coloring a cell depending a cell valueCheers.

[Markus Meissner]

I would generally avoid documenting CSS here, but there are alot of documentation sources available online. E.g., cssreference.io or w3schoools.com/cssref.

You can also simply check the CSS-style applied by the custom-card, to be found in the code at line 217. Apart from that using a Chromium-ish browser you can simply right-click on the e.g., table-header and click "Inspect". The developer console will open and on the rightmost side you'll find all CSS properties to play around and modify for testing colors and stuff.

Once you come up with the right CSS properties you should apply them like this:

    type: custom:flex-table-card 
    title: your title

    /* select some entities */
    entities:
        include: zwave.*

    /* actual CSS portion, the `key` (left part of each line, separated by a ":") is always */
    /* representing the left side of the CSS-properties you'll find inside the above linked code-listing */
    /* the right side then defines the properties for the `key` (called selector) */
    css: 
        /* custom color (`#4eb`) for a column (by index, here `1`) */
        'tbody tr td:nth-child(1)': 'background-color: #efb'

        /* custom color for full row (`#a3b`) include `!important` to enable overwriting of default colors */
        tbody tr: 'background-color: #a3b !important'

        /* custom color (`#aaa`) for column  header, change font-color using simple `color:` */
        thead th: 'background-color: #aaa'
        /* apply to only specific columns by index, similar to the 1st CSS-property above */
        'thead th:nth-child(2)': 'background-color: #5f3'

Hope this is a good starting point for you, nevertheless different (background)colors based on contents are afaik not possible with only CSS. This is anyway pretty hacky, but for these cases there is modify:, it allows you to execute arbitrary JavaScript code on any cell.

[Markus Meissner]

check #20 and #19 for modify based condition-evaluation and cell-contents alteration...

[Markus Meissner]

closing due to inactivity, feel free to re-open if needed...