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

[Bittabola]

Hi @Ildar_Gabdullin,

I am trying to change the font size and padding of card titles but this code isn’t working:

show_name: false
show_icon: true
show_state: true
type: glance
entities:
  - entity: sensor.outdoor_temperature_sensor_temperature
  - entity: sensor.outdoor_temperature_sensor_humidity
  - entity: sensor.wind_sensor_wind_speed
state_color: true
title: Outdoor temps
card_mod:
  style: |
    ha-card .card-header {
      color: red;
    }

Can you point me to the mistake?

Thanks a lot!

[Ildar_Gabdullin]

1. 1st post → link at the bottom → styles for Glance
2. Please avoid using “@” for pinging people.

Update: I noticed you asked about card-header.
I updated that post, styles have to be changed - .card-header went deeper into shadowRoot (probably this change).

[Bittabola]

Thanks a lot!

[Doniu (Dominik)]

Hi,
Little offtopic but is this code (except card mod) working for you?
supposed to be like that i think:
Am i wrong?

type: conditional
conditions:
  - entity: input_select.example_entity_1
    state: Example State
card:
  type: custom:template-entity-row
  entity: light.example_entity_2
  name: "{{ states('light.example_entity_2') }}"
  tap_action:
    action: none
card_mod:

[Mariusthvdb (Marius)]

You’d better move that to the correct topic indeed, because it is not very clear why you would want the state as name…

[4integration]

Hi,

I cannot understand what is wrong here. Very basic attempt to set background color of a card. Using this

show_name: true
show_icon: true
type: button
style: |
  ha-card {
    background-color:
    {% if is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'disarmed') %} 
      red; 
    {% elseif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_away') %} 
      blue;
    {% elseif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_night') %}
      green;
    {% else %}
      yellow;
    {% endif %}
  }
tap_action:
  action: none
entity: alarm_control_panel.9000_aaa_zone_1_alarm
icon: mdi:bell
show_state: true
hold_action:
  action: none

If I have the below it works:

show_name: true
show_icon: true
type: button
style: |
  ha-card {
    background-color: red;
  }
tap_action:
  action: none
entity: alarm_control_panel.9000_aaa_zone_1_alarm
icon: mdi:bell
show_state: true
hold_action:
  action: none

Any ideas?
Not even yellow

[arganto]

@4integration

elseif

Try your templates in developer tools template section and it will show you the problems.

And please don’t post full problems several times.

[4integration]

Thanks arganto

[parautenbach (Pieter Rautenbach)]

I’m a bit stuck… I had working code prior to the UI updates from December 2022. It’s the last remaining thing I haven’t been able to fix.

My old (now broken) modifications:

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

In short, this added some rounding to the header and footer rows and gave alternating rows differing colours.

I’ve inspected the DOM and I can only see a top-level <card-mod>, which probably means I can’t style any inner elements anymore, unless there’s some trick I’m missing.

I can still apply something like a scrollbar via this top-level element, but can’t seem to reach anything else. The last example of markdown card changes is one by Mariusthvdb and some comments by Ildar, but that’s prior the UI updates.

Is this kind of change definitely not possible anymore?

[Ildar_Gabdullin]

Try with

card_mod:
  style:
    ha-markdown $:
      ha-markdown-element: |

@parautenbach

min(var(--ha-card-border-radius)/2, 5px)

Does this code work?
Shouldn’t you use “calc()” here?
I may be wrong.

Also, I suggest you to define a “default” value:
var(--ha-card-border-radius, 4px)

[Mariusthvdb (Marius)]

why are you using card_mod on the button-card? you can set those directly in the styles section of the button-card itself?

wait, nvermind me. I didnt see the well hidden

@4integration

type: button

right there in the middle of the card config…

sorry

[Mariusthvdb (Marius)]

@parautenbach

The last example of markdown card changes is one by Mariusthvdb and some comments by Ildar,

Not so sure about that, Ive never used the ha-markdown-element: yet, but, just this day, no such thing as coincidence, I wondered if we could card_mod per section in a markdown card. Is that what this does?

because if so, Id love to be able to change this mod:

    - type: markdown
      card_mod:
        style: |
          ha-card.type-markdown {
            overflow-y: scroll;
            height: 450px;
          }
      content: >
        ### Components: {{state_attr('sensor.overview_components','Components')}}

        Per domain:

        {{state_attr('sensor.overview_components','per domain')}}

to starting the scroll section below the Per domain line.

the template that follows is a huge list of ordered components in the system, and Id love to keep the ‘header’ in sight.

I might be able probably to fake that, and use 2 stacked cards, but it would be very nice to be able to target sections inside a markdown card?

[Ildar_Gabdullin]

  - type: markdown
    content: |-
      <p>Read:</p>
      <p>The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.</p>
      
      End!
    card_mod:
      style:
        ha-markdown $: |
          p:nth-child(2) {
            max-height: 200px;
            overflow-y: auto;
          }

[sdavides (p)]

elif Instead elseif

[sdavides (p)]

type: vertical-stack
cards:
  - type: alarm-panel
    states:
      - arm_night
      - arm_away
    entity: alarm_control_panel.9000_aaa_zone_1_alarm
    card_mod:
      style:
        .: |
          ha-card {
            background-color:
            {% if is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'disarmed') %} 
            red; 
            {% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_away') %} 
            blue;
            {% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_night') %}
            green;
            {% else %}
            yellow;
            {% endif %}
            }
        ha-chip:
          $: |
            div:nth-child(1) {
                {% if is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "disarmed") %}
                  background-color: green;
                {% elif is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "armed_away") %}
                  background-color: red;
                {% elif is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "armed_night") %}
                  background-color: orange;
                {% elif is_state("alarm_control_panel.9000_aaa_zone_1_alarm", "triggered") %}
                  background-color: red;
                {% else %}
                  background-color: grey;{% endif %} }

[arganto]

I know. And the reason for quoting it as well. And the hint to check template playground in dev-tools.
Helping people help themselves. And as he already replied with thanks and heart, it was solved already.

[Mariusthvdb (Marius)]

@sdavides

            {% if is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'disarmed') %} 
            red; 
            {% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_away') %} 
            blue;
            {% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_night') %}
            green;
            {% else %}
            yellow;
            {% endif %}

those templates can be made a lot simpler, and cut all that repetitive code, try something like this:

{% set status = states('alarm_control_panel.9000_aaa_zone_1_alarm') %}
{% set colors = {'disarmed':'red','armed_away':'blue','armed_night':'green'} %}
{{colors.get(status,'yellow')}}

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

  - type: markdown
    content: |-
      <p>Read:</p>
      <p>The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.<br>
      The quick brown fox jumps over the lazy dog.</p>
      
      End!
    card_mod:
      style:
        ha-markdown $: |
          p:nth-child(2) {
            max-height: 200px;
            overflow-y: auto;
          }

that Is a cool mod, and yes, I get it to work on actual lines of text. However, using that on a template returning a long list if text doesnt work.

I did play around bit in the markdown, as adding a white line here or there makes a lot of difference. I could not get it to get better than this though:

    - type: markdown
      card_mod:
        style:
          ha-markdown $: |
            p:nth-child(2) {
              max-height: 200px;
              overflow-y: auto;
            }
      content: |-
        <p>

        {% set comp = state_attr('sensor.overview_components','components') %}
            {% set sub = state_attr('sensor.overview_components','subdomains') %}
            Components: {{comp}} | Subdomains: {{sub}}

        </p>

        <p>

        {{state_attr('sensor.overview_components','per domain')}}

        </p>

compare that to the post above with the unformatted template card, or this somewhat more elaborate card using some folding and separate markdowns:

type: entities
title: Components and domains
card_mod:
  class: class-header-margin
entities:
  - type: custom:hui-element
    card_type: markdown
    card_mod: &no-box
      style: |
        ha-card.type-markdown {
          box-shadow: none;
          margin: 0px -16px;
        }
    content: >
      {% set comp = state_attr('sensor.overview_components','components') %}
      {% set sub = state_attr('sensor.overview_components','subdomains') %}
      Components: {{comp}} | Subdomains: {{sub}}
  - type: custom:fold-entity-row
    head:
      type: section
      label: Per domain
      card_mod: &label
        style: |
          .label {
            margin-left: 0px;
          }
    padding: 0
    entities:

      - type: custom:hui-element
        card_type: markdown
        card_mod: &scroll
          style: |
            ha-card.type-markdown {
              box-shadow: none;
              overflow-y: scroll;
              height: 450px;
              margin: 0px -16px;
            }
        content: >
          {{state_attr('sensor.overview_components','per domain')}}

  - type: custom:fold-entity-row
    head:
      type: section
      label: Per Subdomain
      card_mod: *label
    padding: 0
    entities:

      - type: custom:hui-element
        card_type: markdown
        card_mod: *scroll
        content: >
          {{state_attr('sensor.overview_components','per subdomain')}}

[sdavides (p)]

Your answer doesn’t help anyone, if you don’t feel like it don’t

[alladyn21 (Alan)]

Hi, can I add some perspective to state-label? I would like the text to match the perspective of the wall that is underneath