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

[kels (Kelly)]

I’m trying to add an animation to the native badges. The animation code works in cards but I can’t get it to work in badges. I’ve can’t figure out the element to select it seems. Any help would be appreciated.

Here’s the badge YAML, the animation part works in cards but not this badge.

type: entity
show_name: false
show_state: true
show_icon: true
entity: sensor.dishwasher_current_status
color: ""
visibility:
  - condition: state
    entity: sensor.dishwasher_current_status
    state_not: power_off
  - condition: state
    entity: sensor.dishwasher_current_status
    state_not: power_fail
  - condition: state
    entity: sensor.dishwasher_current_status
    state_not: cancel
  - condition: state
    entity: sensor.dishwasher_current_status
    state_not: initial
  - condition: state
    entity: sensor.dishwasher_current_status
    state_not: unavailable
  - condition: state
    entity: sensor.dishwasher_current_status
    state_not: unknown
state_content:
  - state
  - last_changed
tap_action:
  action: none
card_mod:
  style: |
    ha-state-icon {
      animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
      transform-origin: 50% 75%;
    }
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
      40% { transform: translateY(-1.2px) rotate(5deg); } 
      60% { transform: translateY(-1.1px) rotate(-4deg); } 
    } 
    @keyframes wash {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
    }

[Ildar_Gabdullin]

@kels

animation to the native badges.

Try this:

  - type: custom:mod-card
    card:
      type: custom:hui-entity-badge
      ... your badge options
      entity: ...your entity
    card_mod:
      style:
        hui-entity-badge:
          $: |
            ha-state-icon {
              animation: xxx;
            }
            @keyframes xxx {
              ...
            }

Also, styles for badges are described here: 1st post → link at the bottom title “fantastic” → badges 2024.8

[HA-one]

I’ve looked through many examples of this mod but haven’t found an answer yet to my particular question: Is there a way to make just the text state of an entity a certain color?

I posted about my specific situation here:

Can I change the state text on a timer-bar-card? Or even just in general?

I recently came across the timer-bar-card frontend (GitHub - rianadon/timer-bar-card: A progress bar display for Home Assistant timers) and have been gleefully finding places to insert it in my existing cards. I have a script that runs an air filter for 10 minutes. The top is the original script entity card, the bottom is how the timer-bar-card entity looks. [image] If I activate it, it then looks like this: [image] Is there a way to alter the “Off” in the timer-bar-card to “RUN,” so it lo…

In this screen shot, the top is the standard script entity card. The blue RUN is the default color for this.

The bottom is a timer-bar-card where I’ve swapped out the state text from “Off” to “RUN.”

I’m looking just to make the bottom “RUN” text blue again, not the whole entity.

EDIT: Many thanks to @LiQuid_cOOled who developed an answer

Can I change the state text on a timer-bar-card? Or even just in general?

You can adjust the colors with card_mod if the timer-bar-card is embedded in an entities card type: entities entities: - type: custom:timer-bar-card sync_issues: fix state_color: true entity: timer.timer translations: idle: RUN card_mod: style: timer-bar-entity-row: $: div.generic-entity-row: | div.text-content.value.pointer { color: blue !important; padding-right:10px …

[Balu88 (Robert)]

Hello good Morning!
I’m new to this forum as a writer, but learning and reading since more than 2 years, as i daily use my HA installation really intensive.

I was really happy with card_mod, until last weekend, where some Update popped up. HA update to 2025.2.1 Core / 2025.02.0 Supervisor / 14.2 OS / 20250205.0 Frontend.

Solar Dashboard is stuffed with info, but works for me so far, i liked the compressed look of so much detailed infom without icons in every line.

Summarized in one pic:
how it looks now, which code i used, and how poerfect it looked before the update.

Could someone help in this case?
Is there another option, to have line spacing at minimum to get a smaller picture?
Thanks a lot,
best regards,
Robert

[Ildar_Gabdullin]

Yes, there were changes in a basis UI element hui-generic-entity-row, scroll up a bit for my “Warning” post. So, probably styles for “thinned rows” should be revised (I have no idea what “thinning” styles did you have).

[kels (Kelly)]

I’m struggling trying to figure this out or do anything basic. I’ve searched this thread and looked at the links. Something simple as changing the icon color isn’t working for me when I have this code in my badge. If I select the the ha-state-icon element in dev tools and add a color property there, it changes the icon. I don’t know what I’m missing.

type: entity
show_name: true
show_state: true
show_icon: true
entity: person.kelly
color: ""
tap_action:
  action: none
card_mod:
  style:
    hui-entity-badge:
      $: |
        ha-state-icon {
          color: red !important;
        }

[LiQuid_cOOled (Not really a...)]

Try this…It’s straight from Ildar’s guide in this thread.

card_mod:
  style: |
    .header .icon {
      color: red;
      }

[Balu88 (Robert)]

Thnaks a lot, tried some lines i found in several threads - at the moment its working. Added these lines in every entities, now it looks OKish, but its never nice that it works and i dont know HOW it works, if i want to change sth to it

[kels (Kelly)]

This didn’t work

[LiQuid_cOOled (Not really a...)]

What card_mod version are you using?

If it’s v3.5, that version was recalled. Please install v3.4.4.

The code I provided works

type: entity
entity: person.xxxx
name: ME
attribute: friendly_name
card_mod:
  style: |
    .header .icon {
      color: red;
      }

[Scarriffle (Guido)]

@Ildar_Gabdullin

          @keyframes resizing {
            0% {
              --mdc-icon-size: 10px;
            }

i am trying to rotate an icon. but it does not work, it does not work even if i add the keyword ‘card_mod’

type: entities
title: Common style
icon: mdi:car
entities:
  - entity: sensor.node_scarriffle_disk_free
    name: Common style
  - entity: sensor.node_scarriffle_disk_free
    name: Common style
card_mod:
  style: |
    hui-generic-entity-row:
      $: |
        state-badge  {
          color: orange;
          animation: rotation 0.5s linear infinite;
        }
        @keyframes rotation {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }

[LiQuid_cOOled (Not really a...)]

@Scarriffle

type: entities
title: Common style
icon: mdi:car
entities:
  - entity: sensor.node_scarriffle_disk_free
    name: Common style
  - entity: sensor.node_scarriffle_disk_free
    name: Common style

Use

card_mod:    
  style:
    hui-sensor-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            state-badge {
             color: orange;
               animation: rotation 0.5s linear infinite;
               }
             @keyframes rotation {
             0% {
             transform: rotate(0deg);
             }
            100% {
              transform: rotate(360deg);
             }

I’d suggest researching the proper use of $: |

[Scarriffle (Guido)]

Is there no way to animate the icon of a tile card?

[LiQuid_cOOled (Not really a...)]

Yes you can animate tile icons

[Scarriffle (Guido)]

how can i do that? i dont find a tutorial of it

[LiQuid_cOOled (Not really a...)]

An example…

type: tile
entity: light.xxxx
icon: mdi:mushroom
name: Bounce
hide_state: true
card_mod:
  style: |
    ha-state-icon {
    color: red;
      animation: bounce 1s infinite linear;
      }
       @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
        40% { transform: translateY(-1.2px) rotate(5deg); } 
        60% { transform: translateY(-1.1px) rotate(-4deg); } 

[Scarriffle (Guido)]

Thank you!

[Scarriffle (Guido)]

is there a way that i can set different icons on different states of the entity in the tile card?

[sveni_lee]

I guess the answer will be very simple.
I would like to have the content of moded card in the middle.

type: horizontal-stack
cards:
  - type: custom:auto-entities
    styles:
      card:
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
           background-color: rgba(0,0,0,0);
           box-shadow: 1px 1px 5px 5px rgba(90,90,90.10);
           max-height: 40px;
          }
      state_color: false
    filter:
      include:
        - entity_id: sensor.victoria
      exclude: []
  - type: custom:auto-entities
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            background-color: rgba(0,0,0,0);
            box-shadow: 1px 1px 5px 5px rgba(90,90,90.10);
            max-height: 40px;
          }
    filter:
      include:
        - entity_id: sensor.sven
      exclude: []

[Fedemax21 (Federico)]

Hello to all,

Is there anyone able to help me? I´ve been trying for 2 month to have this issue solved but I cannot find the correct selector to make the button show the complete name. I only see the “…”. I have the correct css structure to modify it, but I cannot get it applied.

I have it here modified but I cannot make it point to .primary.

I do not understand if it is not possible or I am way too uninstructed in css to make it happen.

Could someone help me?

Thank you!