🔹 Card-mod - Add css styles to any lovelace card

Markdown with images:

type: markdown
content: |-
  ![Image](/local/images/test/blue.jpg)
  xxx
  ![Image](/local/images/test/blue.jpg)
  yyy
card_mod:
  style:
    ha-markdown $: |
      img:nth-of-type(2) {
        height: 100px;
        filter: opacity(0.5);
      }

Markdown with a table:

image

type: markdown
content: |
  <div class="tg-wrap">
    <table width=100%>
      <tbody>
        {%- for i in range(5) -%}
          {{
            '<tr>
              <td>
                <ha-icon icon="mdi:bell"></ha-icon>' +
                '<span>' +
                states("sun.sun") +
                '</span>' +
              '</td>
              <td>' +
                states("sun.sun") +
              '</td>
            </tr>'
          }}
        {%- endfor -%}
      </tbody>
    </table>
  </div> 
card_mod:
  style:
    ha-markdown $: |
      tr td:nth-child(2) {
        color: red;
        text-align: right;
      }
      tr:nth-child(2n) {
        background-color: rgba(33,33,33,0.2);
      }
      tr:nth-child(2) td:nth-child(1) {
        color: magenta;
      }
      tr:nth-child(3) td:nth-child(1) ha-icon {
        color: orange;
      }
      tr:nth-child(4) td:nth-child(1) span {
        color: magenta;
      }
1 Like

I am hoping someone can give me some guidance. I am using the markdown card. I would like to change the default td vertical alignment so that in the screenshot, the mdi bell icon and the timestamp text are both vertically aligned to the top instead of the middle/center.

I’m not sure; but from what I can see in my web browser’s Developer Tools, it shows that td{} veritical alignment is being forced by the user agent stylesheet to inherit. I could be wrong.

In any case, I would like to know what is preventing me from changing this; and, the easiest way to change this.

Interesting, Ildar.

I wonder if my original method will now work again, because I did something similar to what you did here when that broke for me. In the end I had to go for another hack.

I’m more reporting my various solutions and attempts here to document it than asking for help. Sharing out of interest.

This was the original approach and the cleanest in my opinion.

(I only see now I posted it under the theme post for some reason. Oops.)

But then that broke, either due to something with card-mod’s compatibility with HA or a UI change in HA.

I then tried the HTML in markdown as you did here, but couldn’t get it working completely, so in the end I used the custom button card as an HTML container with some JS to build the table, with the styling applied by card-mod.

Can we extend the entity name space to the right to use the free/white area?

With longer names the text is usually cut off (and putting it in another line below is not nice either). Reducing the number field size/padding on the right unfortunately does not extend the entity name to make it expand and make use of the additional free space.

See red box area.

grafik

First, thank you for your “content” code.
I never used markdown for tables till yesterday/day before, so had ho idea how to draw tables in markdown.


Regarding card-mod.
Sometimes - very rarely - I see some instability for markdown.
What I noticed is (and told about it earlier) - using this

  style:
    ha-markdown:
      $: |

is better than

  style:
    ha-markdown $: |

While playing with card-mod for tables in markdown, I created 3 similar cards (code will be posted later), all 3 cards seem to be have stable styles. So, cannot find a reason of instability…

As I said many times, I am not an expert in CSS, only deal with it for card-mod.
Mainly my CSS knowledge comes from “try-fail-try-success”.


Regarding your code.

                  table {
                    border-spacing: 0;
                    width: 100%;
                    padding: 8px;
                    border-radius: var(--ha-card-border-radius);
                  }

This “border-radius” seems to be not working:
– there is a “padding” defined;
– “overflow” is default (w/o clipping),
so it does not change borders.
Later I will post a method to define borders.

Next, for this:

                  th:first-child {
                    border-top-left-radius: var(--ha-card-border-radius);
                  }
                  th:last-child {
                    border-top-right-radius: var(--ha-card-border-radius);
                  }

This way to define “border-radius” is preferable if:
– you need to define “border-radius” for the “thead” only;
– due to some reasons you cannot define “border-radius” for “table” (in this case you will have to define “border-radius” for the last row as well).

Next, for this:

                  tr:nth-child(even) {
                    background-color: var(--table-row-background-color);
                  }

The “tr” element is inside “thead” too.
So, use “tbody tr:nth-child(even)” path.


BTW, your code for table may be a bit “optimized”:

    content: >-
      Domain | Count
         :---|---:
      {% for domain in (states | groupby('domain'))[:5]  -%}
        {%- set name = domain[0].replace('_', ' ') | title -%}
        **{{ name }}** | {{ states[domain[0]] | count }} {{"\n"}}
      {%- endfor %}
1 Like

Some more examples for styling tables in Markdown
(the initial idea of @parautenbach)

Here only background defined for a “thead” & “tbody”:

type: markdown
content: >
  Domain | Count
     :---|---:
  {% for domain in (states | groupby('domain'))[:5]  %} {% set name =
  domain[0].replace('_', ' ') | title %} **{{ name }}** | {{ states[domain[0]] |
  count }} {# leave blank line below otherwise table won't render #}

  {% endfor %}
card_mod:
  style:
    ha-markdown $: |
      table {
        width: 100%;
      }
      th {
        background-color: orange;
      }
      tbody tr {
        background-color: cyan;
      }

image


More styles:
– globally defined “border-radius”;
– removed spacing between cells;
– paddings for text;
– colored header text;
– odd & even rows have diff. background.

card_mod:
  style:
    ha-markdown $: |
      table {
        width: 100%;
        border-radius: 6px;
        border-spacing: 0;
        overflow: hidden;
      }
      th {
        background-color: orange;
        color: white;
        padding: 4px;
      }
      td {
        padding: 4px;
      }
      tbody tr:nth-child(even) {
        background-color: grey;
      }
      tbody tr:nth-child(odd) {
        background-color: cyan;
      }

image


Here how to define “border-radius” in a case when the “globally” defined “border-radius” does not work:
– we need to keep spacings between cells;
– have to define “border-radius” for “thead” & last row.

card_mod:
  style:
    ha-markdown $: |
      table {
        width: 100%;
      }
      th {
        background-color: orange;
        color: white;
        padding: 4px;
      }
      td {
        padding: 4px;
      }
      tbody tr:nth-child(even) {
        background-color: grey;
      }
      tbody tr:nth-child(odd) {
        background-color: cyan;
      }
      th:first-child {
        border-top-left-radius: 6px;
      }
      th:last-child {
        border-top-right-radius: 6px;
      }
      tbody tr:last-child :first-child {
        border-bottom-left-radius: 6px;
      }
      tbody tr:last-child :last-child {
        border-bottom-right-radius: 6px;
      }

image


Also more examples/ideas may be found here:
styling flex-table-card

4 Likes

Kind of this?
image

code
type: entities
entities:
  - entity: input_number.number_float
    name: some long long long long long
  - entity: input_number.number_float
    name: some long long long long long
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            white-space: unset !important;
          }
  - entity: input_number.number_float
    name: some long long long long long
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            flex: 1 1 50% !important;
          }
2 Likes

Ah, it’s defined in my custom.js. It’s from the time when HA didn’t have rounded corners on cards. They since introduced it, but with a larger radius, so I’ve kept mine.

Yes, that’s what I want in my case: only the top left and right corners of the head row must be rounded.

Thanks. Indeed. The whitespace control of Jinja can catch one out. Your version is a bit more maintainable and explicit.

Exactly. But how to apply this on this point (next to the existing

                    :host {
                      --ha-textfield-input-width: 50px;
                      #--text-field-padding: 0px;
                    }

inside auto-entities)?

Full code
type: grid
columns: 1
square: false
title: 🔧 Konfiguration
cards:
  - type: custom:collapsable-cards
    title: 🏃‍♂️ Bewegungsmelder
    defaultOpen: false
    buttonStyle: 'font-size: x-large'
    cards:
      - type: entities
        title: null
        state_color: true
        show_header_toggle: false
        entities:
          - type: custom:text-divider-row
            text: Dauer (Trigger-/Aktiv-Zeit) *
            align: center
            style: |
              :host {
                #--text-divider-color: red;
                --text-divider-font-size: 16px;
                #--text-divider-line-size: 3px;
                #--text-divider-margin: 1em 0;
                #margin-bottom: 20px;
              }
          - type: custom:auto-entities
            card:
              type: entities
              title: null
              state_color: true
              show_header_toggle: false
              card_mod:
                style:
                  .: |
                    ha-card {
                      border-width: 0px;
                      margin-bottom: -5px;
                      margin-top: -10px;
                      margin-left: -15px;
                      margin-right: -15px;
                    }
            entities: null
            filter:
              include:
                - entity_id: number.motion_*_duration
                  options:
                    secondary_info: last-changed
                    card_mod:
                      style: |
                        :host {
                          --ha-textfield-input-width: 50px;
                          #--text-field-padding: 0px;
                        }
              exclude: []
            show_empty: true
            unique: true
            sort:
              method: name
              reverse: false

In short: how to combine :host with hui-generic-entity-row in this case?

Unrelated to the issue: this is a wrong commentary style.
Should be:
/* --text-divider-color: red; */

1 Like

1st post → bla bla bla, you know the rest, and your point is:
image

1 Like

Fantastic. Only took me 3 minutes this time - getting used to it and therefore hopefully faster - (very) slowly… :wink:

This is my final working snippet
            - entity_id: number.motion_*_duration
              options:
                secondary_info: last-changed
                card_mod:
                  style:
                    .: |
                      :host {
                        --ha-textfield-input-width: 50px;
                        /* --text-field-padding: 0px; */
                      }
                    hui-generic-entity-row $: |
                      .info {
                        flex: 1 1 50% !important;
                      }

Since you provided no minimal code, I tested with this:

  - type: markdown
    content: |
      <div class="tg-wrap">
        <table width=100%>
          <tbody>
            <tr>
              <td><ha-icon icon="mdi:bell"></ha-icon></td>
              <td>long long long long long long long long long long long long long long long long long long long long</td>
              <td>xxxxxxx</td>
            </tr>
          </tbody>
        </table>
      </div> 

image

The “ha-icon” & text elements need to be in different “td”, otherwise with this

<td><ha-icon icon="mdi:bell"></ha-icon>long long long long long long long long long long long long long long long long long long long long</td>

you will see this:
image

With these examples I found a bit tricky to get stable results.
This was unstable:

    card_mod:
      style:
        ha-markdown:
          $: |
            table tbody tr td {
              vertical-align: top;
            }

and this (contrary to my expectations) was stable:

    card_mod:
      style:
        ha-markdown $: |
          table tbody tr td {
            vertical-align: top;
          }

This one may be used as well:

    card_mod:
      style:
        ha-markdown $: |
          :first-child {
            vertical-align: top !important;
          }

image

2 Likes

Hi, I would like to change the title and sensor text color of this card, but already playing with it for hours and can’t find it, some css guru here that can help with this?

Thanks in advance!

Kind regards, D

Can you show your current yaml/card_mod, what you have tried and what is the status quo and what is not working as expected?

I’m new to Home Assistant and on a steep learning curve and in need of some help please.

I have this sensor card with large font setup but the header is cutting the text.

Here is the code-

graph: line
type: sensor
entity: sensor.heating_hot_water_tank_735
name: Hot Water Tank
style: |
  ha-card
   {
  --accent-color: red;
    }
  .header .name {
  color: #959595;
  font-size: 12px;
  font weight: bold
  }
  .header .icon {
  color: #red;
  --mdc-icon-size: 28px;
  }
  .info .value {
  color: white;
  font-size: 68px;
  font-weight: light
  }
  .info .measurement {
  color: white;
  font-size: 12px;
  }
detail: 2

Is there a way the free header space can be reduced?

Thanks Steve

(unrelated) this is wrong, use simply this
color: red;
or - if you need to comment:
/* color: red; */

1 Like

code
type: vertical-stack
cards:
  - type: sensor
    entity: sensor.xiaomi_cg_1_co2
    graph: line
    hours_to_show: 1
    detail: 1
    card_mod:
      style: |
        .info .value {
          font-size: 74px;
        }
  - type: sensor
    entity: sensor.xiaomi_cg_1_co2
    graph: line
    hours_to_show: 1
    detail: 1
    card_mod:
      style: |
        .info .value {
          font-size: 74px;
        }
        .info {
          line-height: 60px !important;
        }
1 Like

Thank you that’s great. Much appreciated