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

LiQuid_cOOled · March 11, 2025, 3:21am

Let’s reset. After looking at your code, it appears some of it appears to have no effect on the card.

The code I provided first pinpointed the hour and minute fields, but we can target a level above with the same results.

Test out this version and let me know what needs adjusted or what you feel is missing.

type: entities
entities:
  - entity: input_datetime.test
    card_mod:
      style:
        ha-time-input $ ha-base-time-input $: |
          ha-textfield:nth-of-type(1) {
            width: 30px;
            }
          ha-textfield:nth-of-type(2) {
            width: 25px;
               }
        ha-date-input:
          $:
            ha-textfield $: |
              .mdc-text-field__input {
                align-self:center;
               }
        hui-generic-entity-row $: |
          state-badge {
           display: none;
           }
        hui-generic-entity-row ha-date-input $:
          ha-textfield $: |
            span#label {
             display: none;
             } 
        .: |
          :host {
            --mdc-text-field-fill-color: transparent;
            --mdc-select-fill-color: transparent;
            --mdc-text-field-idle-line-color: transparent;
            --mdc-text-field-hover-line-color: transparent;
            --mdc-select-idle-line-color: transparent;
            --mdc-select-hover-line-color: transparent;
            --mdc-theme-primary: transparent;
          }

Ildar_Gabdullin · March 11, 2025, 11:28am

Away from PC these days, will check in a week hopefully.

jmfargas · March 11, 2025, 4:40pm

@LiQuid_cOOled No, it’s not working… I’ll try to make some changes in your code to see if I can fix something…?
That’s what I get (I changed the color and the position of the previous cards, but they should be the same as before…

The point I explained before is that the code is also used by other cards, this is why it has some code which is not used by this card…
Many thanks!

TheGsus · March 11, 2025, 8:04pm

Got it. Now it works. Awesome.
I didn’t expect I have to use this ‘special’ method.
Thank you very much for ur fast reply and hint!

yngwiebach · March 11, 2025, 8:40pm

Hello geniuses,
I once again need some help.

I have found these awesome animations and have implemented them succesfully…well oke fair enough the guide was so good I just to copy paste it and tweak a few simple things. So hats of to Mr Lopez

So I want the animation to activate when the power measured by the smart plug is >0

The smart plug is always on. So the on/off variable used usually in these cards is useless.

How do I change the on to a value of the sensor.

For testing purposes I have now typed in =0 since the washing machine is not running. When all works well I will change that to > 0.

Can someone help me please?

type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: |-
  {{ 'grey' if (states("switch.wasmachine_smart_plug") == 'off') else
     'white' if (states("switch.wasmachine_smart_plug") == 'on') else
     '#FFC107' if (states(entity) == 'unavailable')
  }}
primary: "{{states(\"sensor.wasmachine_smart_plug_power\") | round(0)}} W"
entity: sensor.wasmachine_smart_plug_power
card_mod:
  style: |
    ha-state-icon {
      {% if is_state(config.entity, '=0') %}
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      {% else %}

      {% endif %}
    }
    @keyframes shake {
      0%, 100% { transform: translate(0, 0) rotate(0); }
      20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
      40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
      60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
      80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
    }
    @keyframes drum {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
    }

The end result should be that when the power shown is higher than zero the washing machine should shake like crazy. And then stop when the value is back to zero.

To help you guys out a little I have split the code to the bit where the problem is, specifically the if is state statement is where the help is needed.

card_mod:
  style: |
    ha-state-icon {
      {% if is_state(config.entity, '=0') %}
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      {% else %}

      {% endif %}
    }

jmfargas · March 11, 2025, 10:58pm

@LiQuid_cOOled I was finally able to integrate your code in mine to solve some issues by adding the following line:

                ha-time-input $ ha-base-time-input $ ha-textfield $: |
                  .mdc-text-field {
                    height: 20px !important;
                  }

And at the end of your code I had to take out the following line, which had a strange effect on the menu list:

--mdc-theme-primary: transparent;

I don’t know if there is a better way to simplify the first part of the code to define the height of the text field, but the code works:

                ha-time-input $ ha-base-time-input $ ha-textfield $: |
                  .mdc-text-field {
                    height: 20px !important;
                  }

Many thanks!

VietNgoc · March 12, 2025, 12:19am

yngwiebach:

card_mod:
  style: |
    ha-state-icon {
      {% if is_state(config.entity, '=0') %}
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      {% else %}

      {% endif %}
    }

check if is number…

    ha-state-icon {
      {% set state = states(config.entity) %}
      {% if is_number(state) and state | float > 0 %}
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      {% endif %}
    }

yngwiebach · March 12, 2025, 12:39am

Thank you so much. That did the trick.

Strangely enough when I wanted to test it and changed the > to = it did not work. But when I added another = to either the > or the = it worked.

ha-state-icon {
      {% set state = states(config.entity) %}
      {% if is_number(state) and state | float == 0 %}
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      {% endif %}
    }

For people wanting to steal the code, change the == 0 to a value you prefer with either > or < added.

@VietNgoc thank you so much, I can continue with the dashboard now. You are indeed a genius.

VietNgoc · March 12, 2025, 1:20am

==
Compares two objects for equality.

!=
Compares two objects for inequality.

>
true if the left hand side is greater than the right hand side.

>=
true if the left hand side is greater or equal to the right hand side.

<
true if the left hand side is lower than the right hand side.

<=
true if the left hand side is lower or equal to the right hand side.

https://jinja.palletsprojects.com/en/stable/templates/#comparisons

pmgsrosa · March 12, 2025, 11:59am

Hi there,

With the last update (2025.3) the following code stopped working:

    card_mod:
      style:
        ha-tile-icon$: |
          .shape { 
            border-radius: 15px !important;
            height: 50px !important;
            width: 50px !important;       
          }

This changed the background round shape size:

You can see in the image that the shape is now too small for the icon.
I believe that this could be something that was deprecated.

Thanks.

Tadies · March 12, 2025, 6:39pm

Also The Background on tile card icon i can’t get rid of anymore…
(saw and looked for many solutions etc posts…)
after last few updates the code below is not working anymore…

          style: |
            ha-card {
            border: none !important;
            }
            ha-tile-icon$: 
            .shape::before { 
            background-color: unset !important;
            }
            .shape {
            --mdc-icon-size: 20px;
            margin-top: -8px!important;
            }

it can be posted alot…but im not sure about it…
some help would be appreciated…
greetz…T

FLaKas · March 13, 2025, 12:18pm

basically we are having the same issue… after upgrading HA Core.

I have reinstalled the card-mod several times and I still have the same problem. The only way I got it working again was to do the HA restore to old version

LiQuid_cOOled · March 13, 2025, 12:58pm

@flakas @tadies Use this as an example.

type: tile
entity: fan.bedroom_fan
icon: mdi:fan
name: Example
hide_state: true
features_position: bottom
vertical: false
card_mod:
  style: |
    ha-card {
     --tile-color: dodgerblue !important;
               }
    ha-state-icon {
      color: orange !important;
               }

Remove icon background --tile-color: none !important;

Increase icon size with --mdc-icon-size: 50px important;

    ha-state-icon {
      color: orange !important;
      --mdc-icon-size: 50px important;
               }

FLaKas · March 13, 2025, 1:03pm

LiQuid_cOOled · March 13, 2025, 1:04pm

Can you add your code or some context? Not just a pic…

Are you still on an older HA version

FLaKas · March 13, 2025, 3:05pm

I just put the image with the code you gave.
I’m currently on the latest version and that’s why it’s not working.

Tadies · March 13, 2025, 4:08pm

Thank You LiQuid_cOOled!
Keep rocking sir!

Pascal76480 · March 13, 2025, 5:08pm

Does anyone have any ideas to help me?

pmgsrosa · March 13, 2025, 9:31pm

Yes, I know, my problem is the background shape (round) size (and even form, with borde-radius). Do you know the new syntax?
Thanks.

LiQuid_cOOled · March 14, 2025, 1:45am

@pmgsrosa My post wasn’t in reply to your post.

Test this example out

type: tile
entity: sensor.home_assistant_supervisor_cpu_percent
features_position: bottom
vertical: false
card_mod:
  style: 
    ha-tile-icon $: |
      div.container {
      background: lightblue;
      height: 65px ;
      width: 65px;
      border-radius: 100%;
        }