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

mkanet · August 19, 2023, 3:03am

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.

parautenbach · August 19, 2023, 6:37am

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.

github.com/thomasloven/lovelace-card-mod

No injection of card-mod styles beyond the first level of ha-markdown cards

opened 07:46PM - 07 Mar 23 UTC

closed 07:23PM - 20 Jan 24 UTC

parautenbach

My Home Assistant version: 2023.2.3 My lovelace configuration method (GUI or …yaml): YAML What I am doing: Applying a custom style by colouring alternating rows of a table in a markdown card. The example YAML below precedes the big UI changes of 2022.12. I know I'll need to change some variables. The problem seems to be that the `<card-mod>` element is only injected at the top. Usually, there will be a `<card-mod>` element at each level. <img width="378" alt="Screenshot 2023-03-07 at 21 40 11" src="https://user-images.githubusercontent.com/743320/223535593-9be3ba69-76d2-4f68-b711-54e3af765cbe.png"> What I expected to happen: A blue header, with white text, and a table where every other row has a background colour. What happened instead: Nothing. **Minimal** steps to reproduce: ```yaml card_mod: style: ha-markdown: $: ha-markdown-element: | table { border-spacing: 0; width: 100%; padding: 8px; border-radius: var(--ha-card-border-radius); } th { background-color: var(--state-icon-color); color: white; padding: 4px; } th:first-child { border-top-left-radius: min(var(--ha-card-border-radius)/2, 5px); } th:last-child { border-top-right-radius: min(var(--ha-card-border-radius)/2, 5px); } td { padding: 4px; } tr:nth-child(even) { background-color: var(--table-row-background-color); } ``` Error messages from the browser console: None --- **By putting an X in the boxes ([]) below, I indicate that I:** - [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/). - [x] Have made sure I am using the latest version of the plugin. - [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins. - [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

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.

github.com

parautenbach/Home-Automation/blob/a702ac9039f10f7d04012a7b2011b0d896693590/home_assistant/ui-lovelace/devices.yaml#L346


      
              - entity: light.hallway
                name: Hallway
              - entity: light.foyer
                name: Foyer
              - entity: light.front_door
                name: Front Door
              - entity: light.garage
                name: Garage
              - entity: light.backyard
                name: Backyard
          - type: custom:button-card
            show_label: true
            label: >
              [[[
                // https://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript
                function toTitleCase(str) {
                  return str.replace('_', ' ').replace(
                    /\w*/g,
                    function(txt) {
                      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                    }

e-raser · August 19, 2023, 1:46pm

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

Ildar_Gabdullin · August 19, 2023, 2:15pm

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 %}

Ildar_Gabdullin · August 19, 2023, 2:26pm

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;
      }

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;
      }

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;
      }

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

Ildar_Gabdullin · August 19, 2023, 2:54pm

Kind of this?

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;
          }

parautenbach · August 19, 2023, 8:21pm

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.

e-raser · August 19, 2023, 9:39pm

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?

Ildar_Gabdullin · August 19, 2023, 9:43pm

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

Ildar_Gabdullin · August 19, 2023, 9:45pm

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

e-raser · August 19, 2023, 10:42pm

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

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;
                      }

Ildar_Gabdullin · August 20, 2023, 1:07pm

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>

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:

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;
          }

dmertens · August 20, 2023, 7:58pm

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

arganto · August 21, 2023, 6:09am

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?

TheStealth · August 21, 2023, 10:16am

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

Ildar_Gabdullin · August 21, 2023, 10:19am

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

Ildar_Gabdullin · August 21, 2023, 10:34am

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;
        }

TheStealth · August 21, 2023, 10:52am

Thank you that’s great. Much appreciated

dmertens · August 21, 2023, 10:54am

Hi, I tried searching online, using the chrome inspect option, but I can only find these values, no option to change the title, subtitle color, that said I’m no dev guy and all this template, CSS stuff is quite hard for me, but with the help of the community, trial and error I’m getting there

Thanks in advance!

card_mod:
  style: |
    ha-card {
    font-size: 1em; 
    height: 300px;
    font-size: 2cm !important;
    font-family: Helvetica;
    line-height: 50px;
    text-transform: capitalize;
    font-style: italic;
    font-weight: 900 !important;
    letter-spacing: 0.20em !important;
    word-spacing: 3px;
    --mdc-icon-size: 50px;
    }

The white is just, well, too white :-P, so I would like to change it more to the font, color like the top bar title colors

Jeroennl · August 21, 2023, 11:53am

hi, I’m trying to change the font-weight of the value in a auto-entities card, but for some reason I can’t get it to work. What am I missing here? The

      ha-card .entities .entity:
        $: |
          div:not(.name) {
            font-weight: bold;
          }

in:

type: custom:auto-entities
card:
  type: glance
  card_mod:
    style: |
      ha-card {
        padding: 0px;
      }
      ha-card .entities {
        padding: 0px;
      }   
      ha-card .entities.no-header {
        padding: 0px;
      }
      ha-card .entities .entity:
        $: |
          div:not(.name) {
            font-weight: bold;
          }                      
filter:
  include:
    - entity_id: sensor.afvalwijzer_*
      attributes:
        days_until_collection_date: <= 10
      options:
        tap_action:
          action: none
sort:
  attribute: days_until_collection_date
  method: attribute
  numeric: true

isn’t working.