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

sTaNy · March 17, 2025, 1:19pm

@Mariusthvdb you are right! Big shout out to @VietNgoc as well!!!

@LiQuid_cOOled
Just for the sake of completeness. To change the badges (with numbers) I have to use:

    :host .badge {
      background-color: dodgerblue;
      color: white;
      font-weight: 700;
      width: 50px;
      font-size: 1.5em;
      font-weight: bold; /* or 700 */
    }

or for example

    span.badge {
      font-size: 1.5em;
      font-weight: bold; /* or 700 */
    }

only calling the class .badge was not working for me.

LiQuid_cOOled · March 17, 2025, 1:30pm

You are correct. Span will apply the CSS to all badges or you can seperate them

card_mod:
  style: |
   .tomorrow .icon-container {
      animation: spin 4s linear infinite;}
   .tomorrow .badge {
      font-size: 1.5em;
      font-weight: bold;
      background: purple;}
      
   .today .icon-container {
      animation: spin 4s linear infinite;}
   .today .badge {
      font-size: 1.5em;
      font-weight: bold;
      background: blue;}
      
      @keyframes spin {
        100% {
        transform: rotate(360deg);}}

FLaKas · March 17, 2025, 3:18pm

This is the part of code I have in my theme.yaml And according to the thread you sent it will be something here, I can’t get my bottom bar background to black.

      color-tint: "0.20"
      # Contrast RGB variables
      contrast1-RGB: 255,255,255
      card-mod-theme: Rounded

  card-mod-view-yaml: |

    hui-masonry-view:
      $: |

        /* Swipe-card full width on mobile */

        @media screen and (max-width: 599px) {
          #columns .column swipe-card {
            margin-left: -4px;
            margin-right: -4px;
          }
        }

  card-mod-card-yaml: |

    .: |

      /* General changes */ 

      ha-card {
        transition: none !important;      
      }

      /* Graph card style */

      .graph {
        background: var(--blue-tint);
        display: flex;
        overflow: hidden; /* Temporary fix for graph overflow bug */
        height: 120px
      }
      
      .graph .name {
        font-size: 12px;
        line-height: 18px;
        background: var(--black);
        color: var(--white);
        padding: 6px 10px;
        border-radius: 100px;
        z-index: 1;
      }

      .graph .icon {
        display: none;
      }

      .graph .info {
        margin-top: 0;
        padding: 24px 24px 0 24px;
        order: 1;
      }

      .graph hui-graph-header-footer {
        order: 3;
      }

      .graph .header {
        padding: 0 24px;
        order: 2;
        margin: 4px 0 -48px 0;
        z-index: 1;
      }
        card-mod-root-yaml: |

    .: |

      /* ___________ Bottom tabbar ___________  */

      #view {
        margin-top: 0 !important;
        height: calc(100vh - 80px - env(safe-area-inset-top)) !important;
      }
      .header {
        top: auto !important;
        bottom: 0;
        background-color: rgba(var(--contrast1-RGB),0.6) !important;
      }
      :host([scrolled]) .header {
        box-shadow: none !important;
      }
      .toolbar {
        height: 80px !important;
        padding: 4px 4px 16px 4px !important;
      }
      paper-tab {
        color: var(--contrast10);
        border-radius: 16px;
      }
      paper-tab.iron-selected {
        color: var(--contrast20);
      }
      ha-menu-button, ha-button-menu {
        color: var(--contrast10);
      }
      ```

FLaKas · March 17, 2025, 3:19pm

LiQuid_cOOled · March 17, 2025, 3:27pm

Your initial posts never indicated you were making the mods via a theme.

This thread is where I’d suggest posting your inquiry.

Ildar_Gabdullin · March 17, 2025, 6:23pm

Just returned home, will check these posts.
(+ your markdown question)

FLaKas · March 18, 2025, 9:18am

Thank you @LiQuid_cOOled !
Thanks to your tips, I deleted all the lines from theme.yaml related to card mod and now everything is working. Thanks

VietNgoc · March 18, 2025, 1:50pm

Sometimes it’s better to look for the simplest solution than to complicate things

mpschr · March 18, 2025, 10:28pm

Ok I have a question… I was searching up and down, but did not find an example…

I’d like to color the background of an entity-row (entity-card) depending on the state.

The following works like a charm: a hard-coded state value, the background changes according to the state value

type: entities
card_mod:
  style:
    hui-sensor-entity-row:
      $: |
        hui-generic-entity-row {
          background-color: 
            {% set col = '200,200,0' %}
            {% set col2 = '3,200,200' %}
            {% set state = 50 %}
            {% if 10 >= state %}
              rgba({{col }},0.9);
            {% else %}
              rgba({{col2}},0.9);
            {% endif %} 

        }  
entities:
  - entity: sensor.phone_battery
  - entity: sensor.tablet_battery

Now if I try to bring the sensor state into play, the whole thing does not work anymore:

type: entities
card_mod:
  style:
    hui-sensor-entity-row:
      $: |
        hui-generic-entity-row {
          background-color: 
            {% set col = '200,200,0' %}
            {% set col2 = '3,200,200' %}
            {% set state = int(states(config.entity)) %}            
            {% if 10 >= state %}
              rgba({{col }},0.9);
            {% else %}
              rgba({{col2}},0.9);
            {% endif %} 
        }  
entities:
  - entity: sensor.phone_battery
  - entity: sensor.tablet_battery

The state value works again, when I apply the card-mod onto a single entity. But I would like to specify the styling only once, as I have a card with 30 entities. Is this possible? If, what am I doing wrong?

type: entities
entities:
  - entity: sensor.phone_battery
  - entity: sensor.tablet_battery
    card_mod:
      style: |
        hui-generic-entity-row {
          background-color: 
            {% set col = '200,200,0' %}
            {% set col2 = '3,200,200' %}
            {% set state = int(states(config.entity)) %}            
            {% if 30 >= state %}
              rgba({{col}},0.9);
            {% else %}
              rgba({{col2}},0.9);
            {% endif %} 
          }

VietNgoc · March 19, 2025, 2:03am

you can use yaml anchor to avoid repetition in code

type: entities
entities:
  - entity: sensor.phone_battery
    card_mod: &cardmod
      style: |
        hui-generic-entity-row {
          background-color: 
            {% set col = '200,200,0' %}
            {% set col2 = '3,200,200' %}
            {% set state = int(states(config.entity)) %}            
            {% if 30 >= state %}
              rgba({{col}},0.9);
            {% else %}
              rgba({{col2}},0.9);
            {% endif %} 
          }  
  - entity: sensor.tablet_battery
    card_mod: *cardmod

mpschr · March 19, 2025, 5:58am

Oh my - that’s a neat trick

That helps a lot, thank you. Altough I noticed that when saved, the anchor is replaced by the text. So If I were to change a detail I need to remove the text again and replace it with anchors… is this intended behaviour?

Ildar_Gabdullin · March 19, 2025, 5:47pm

About styling a header in Markdown.
It is similar to a header in some other cards:

type: markdown
title: tttt
content: xxx
card_mod:
  style:
    $: |
      .card-header {
        color: red !important;
      }

VietNgoc · March 19, 2025, 8:54pm

Yeah, that’s probably because of the UI editor. In yaml mode anchors remain…

jcrowegitHu8 · March 19, 2025, 10:10pm

Hi, I’m trying to use this card to show a drop down state next to a related feature toggle switch.

This is the current card.

I want to hide the div.info.pointer.text-content that holds the main entity title

I’m unable to get the card_mod code to work. I’m not sure what I’m doing wrong. Any help is appreciate.

CARD-MOD 3.4.3
MULTIPLE-ENTITY-ROW 4.5.1

    type: conditional
    conditions:
      - condition: state
        entity: input_boolean.notify_front_door
        state: "on"
    card:
      type: custom:multiple-entity-row
      entity:  input_select.alexa_front_door_notify
      card_mod:
        style:
          hui-generic-entity-row:
            $: |
              div.info.pointer.text-content {
                display: none;
              }
      entities:
        - entity: input_boolean.notify_front_door
          name: Disable
          toggle: true

VietNgoc · March 20, 2025, 12:22am

jcrowegitHu8:

    card:
      type: custom:multiple-entity-row
      entity:  input_select.alexa_front_door_notify
      card_mod:
        style:
          hui-generic-entity-row:
            $: |
              div.info.pointer.text-content {
                display: none;
              }
      entities:
        - entity: input_boolean.notify_front_door
          name: Disable
          toggle: true

you have to put the custom:multiple-entity-row in entities card…

type: conditional
conditions:
  - condition: state
    entity: input_boolean.notify_front_door
    state: "on"
card:
  type: entities
  entities:
    - entity: input_select.alexa_front_door_notify
      type: custom:multiple-entity-row
      card_mod:
        style:
          hui-generic-entity-row $: |
            .text-content {
                display: none !important;
              }

jcrowegitHu8 · March 20, 2025, 8:53am

Thanks for the quick response. However it still doesn’t appear to be working.

type: conditional
    conditions:
      - condition: state
        entity: input_boolean.notify_front_door
        state: "on"
    card:
      type: entities
      entities:
        - entity: input_select.alexa_front_door_notify
          type: custom:multiple-entity-row
          card_mod:
            style:
              hui-generic-entity-row $: |
                .text-content {
                    display: none !important;
                  }

Is giving me this result.

I have copied and pasted your result and diffed it to the original to make sure I’m following the solution you provided.

I have tried removing the conditional card as well still to no joy.

Any other thoughts as to why it’s not working?

VietNgoc · March 20, 2025, 9:02am

try update card mod to 3.4.4

LiQuid_cOOled · March 20, 2025, 9:11am

I was going to suggest the same, but your code should work on that version as well. If it was v3.5.0, that would be a different story!

andrewjswan · March 20, 2025, 10:19am

Can you tell me how this can be done?
I was able to make a template, but I can’t display the icon…

        {%- set PERSON = entity  -%}
        {%- set TRACKER = state_attr(PERSON, 'source') -%}
        {%- set PICTURE = state_attr(TRACKER, 'entity_picture') -%}
        {%- set BATTERY = state_attr(TRACKER, 'battery_level') -%}
        {%- if BATTERY is not none -%}
          {% if BATTERY < 10 %}
            mdi:battery-outline
          {% elif BATTERY < 100 %}
            mdi:battery-{{ BATTERY // 10 * 10 }}
          {% else %}
            mdi:battery
          {% endif %}
        {% else %}
          {%- if PICTURE is not none -%}
          ...
          {%- endif -%}
        {%- endif -%}

Ildar_Gabdullin · March 20, 2025, 12:19pm

Displaying an icon is a different thing(((. You can add an image as a background to a pseudo element. But for an icon you need to create an “icon” element which cannot be done by card-mod.