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

[Mariusthvdb (Marius)]

on theming badges with card_mod 3.5.0:

type: entity
entity: sensor.lightning_strikes_near_time
color: rgb(231,92,9)
hold_action:
  action: navigate
  navigation_path: /ui-overzicht/weer
visibility:
  - condition: numeric_state
    entity: sensor.lightning_strikes_near_time
    above: 0
card_mod:
  style:
    ha-badge:
      $: |
        .badge {
          border: 2px solid var(--badge-color) !important;
        }
      .: |
        ha-state-icon {
          --mdc-icon-size: 24px;
          --card-mod-icon-color: var(--badge-color);
          animation: blink 2s ease infinite;
        }
        @keyframes blink {
          50% {opacity: 0.2;}
        }
        state-display {
          font-size: 14px;
          color: var(--badge-color);
        }
    .: |
       hui-entity-badge {
        --ha-card-background: rgb(18,46,129);
       }

# pre 3.5.0
# type: custom:mod-card
# card:
#   type: custom:hui-entity-badge
#   entity: sensor.lightning_strikes_near_time
#   color: rgb(231,92,9)
#   hold_action:
#     action: navigate
#     navigation_path: /ui-overzicht/weer
# visibility:
#   - condition: numeric_state
#     entity: sensor.lightning_strikes_near_time
#     above: 0
# card_mod:
#   style:
#     hui-entity-badge:
#       $:
#         ha-badge:
#           $: |
#             .badge {
#               border: 2px solid var(--badge-color) !important;
#             }
#         .: |
#           ha-state-icon {
#             --mdc-icon-size: 24px;
#             --card-mod-icon-color: var(--badge-color);
#             animation: blink 2s ease infinite;
#           }
#           @keyframes blink {
#             50% {opacity: 0.2;}
#           }
#           state-display {
#             font-size: 14px;
#             color: var(--badge-color);
#           }
#     .: |
#        ha-badge {
#         --ha-card-background: rgb(18,46,129);
#        }

[mirekmal (Mirek Malinowski)]

@Mariusthvdb

but why? Button-card hardly ever requires card_mod because of its native options to style anything?

So far I was using:

card_mod:
  style: |
    ha-card {
      background: none !important;
    }

and it was working fine.

Now I found another solution, using native custom button-card styling:

styles:
  card:
    - background-color: transparent

which is probably more proper way of handling background transparrency.
BUT! It works only in editor mode:

As soon as I switch from editing card to dashboard edit or later to normal dashboard view I get this:

More over, in 3.5.0 also card height is not respected after quiting rditor. As you can see difference on screenshots. Card height is handled on parent picture-elements card by following code:

card_mod:
  style: |
    ha-card {
      height: 150px !important;
      top: 0px;
    }

So for me (at lest for now) combination of HA 2025.1 and card-mod 3.5.0 is no go… until my issues can be handled by other code.

[Mariusthvdb (Marius)]

yes, 3.5.0 has several serious challenges, and maybe some left over issues…
but… I’ve already managed to fix all of my theme classes, and all badges.

next up are my stack cards and indeed some grid backgrounds showing my custom:button-card configs.

button-card itself seems untouched (at least, in my rather extensive config, all buttons seems correct as far as I can see now) and you should really be able to set the background to none, did you try that too?

[nj_cucci (Lou)]

I am trying my darnest to change the color of the ‘swing’ button on the theromstat card (yellow arrow pointing to it in my screenshot). My yaml is below and the html I am going off is also attached.

I have read the docs and still can’t manage to do it!

Would appreciate any help!

type: thermostat
entity: climate.living_room
features:
  - type: climate-hvac-modes
    style: icons
    hvac_modes:
      - "off"
      - heat
      - dry
      - fan_only
  - type: climate-fan-modes
    style: dropdown
    fan_modes:
      - auto
      - speed 1
      - speed 2
      - speed 3
      - speed 4
      - speed 5
      - speed 6
  - type: climate-swing-modes
    style: icons
    swing_modes:
      - "off"
      - vertical
name: CUSTOM TEMP CARD
show_current_as_primary: false
card_mod:
  style: |
    hui-card-features$
        hui-card-feature$
           hui-climate-swing-modes-card-feature$
              ha-control-select$: |
                   #option-vertical.option.selected {
                            --control-select-color: red !important;
                          }

[mf19862]

Hi There!

I’m trying to do a blink effect on my bagdes (eg when a door is open). I got successful with the following code, but this applies the “blink”-effect to the whole badge including text and icon.

Question: How can i restrict the effect just to the background color without having text and icon blink as well?

card_mod:
  style:
    ha-badge $: |
      .badge {
         {% if is_state('binary_sensor.mysensor', 'on') %}  
            --ha-card-background: red;
            --card-mod-icon-color: white;
            animation: blink 1.3s ease-in-out infinite;
            }
            @keyframes blink { 50% { opacity:0.1; } }
          {% else %}
            --ha-card-background: blue;
            --card-background-color: blue;
            --card-mod-icon-color: blue;
          {% endif %}
        }

[VietNgoc (Ngoc John)]

@mirekmal

Now I found another solution, using native custom button-card styling:

styles:
  card:
    - background-color: transparent

use css var…

    styles:
      card:
        - --card-background-color: transparent

[Mariusthvdb (Marius)]

another day, another challenge: card-mod 3.5.0 is removed, we need to downgrade to the new 3.4.4 now.
I did ask for something like that, but sincerely hope the successful migration out of mod-card, and the badges still holds…

exciting days

[Mariusthvdb (Marius)]

@Mariusthvdb

next up are my stack cards and indeed some grid backgrounds showing my custom:button-card configs.

btw, this was an easy fix too with 3.5.0.
lets see what happens after upgrading

my hope is we can see this reverted, no box-shadow: none, or the margins set of the embedded cards.

[arganto]

It would have hold, if there were not all the complains “not working anymore” in githup without at least trying to change the code to hui_card instead of ha_card.

Ofc you have to rework some parts and start 1-2 level above the old structure, but the benefit was big with this approach.

[Mariusthvdb (Marius)]

agreed, it looked very promising.

@arganto

there were not all the complains “not working anymore” in githup without at least trying to change the code to hui_card instead of ha_card

that’s why I tried to post as many successful examples I saw relevant.

However, there also were several (rather important) non tested changes that caused trouble in entities cards, as my screen above illustrates.

I figure Thomas will now try to mitigate those and release several minor updates fixing those

update

well, this is a bit of a pain now…
not all 3.5.0 left over challenges are reverted, but also many of its improvements are no longer there… classes, badge stylings, no more mod-card for stacks…

not sure what to do now.
since there are no release notes on the actual changes we have to find out ourselves, and that is not an easy task

[GTunney]

The problem with this approach is whilst its fine for people who know about coding for those of us that are less experienced no documentation or guidance was provided on how to change from ha-card to hui-card.

I’m more than happy to go through my dash changing things over if I knew how but I simply don’t. I have a lot of stack in cards on my dash and they hall broke when using 3.5.0.

Some also use mod-card which I believe is also being depreciated.

If there is a better of way doing the below then I’m all ears and more than happy to modify my dash.

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: custom:mod-card
        card:
          type: custom:mushroom-title-card
          title: Yesterdays Cost
          subtitle: ""
        card_mod:
          style:
            mushroom-title-card$: |
              .title {
               --card-primary-color: rgb(var(--rgb-black));  
                --title-font-size: 15px;
                --title-font-weight: 350;
                text-align: center;

              }
              .subtitle {
               --card-secondary-color: rgb(var(--rgb-red));  
                --subtitle-font-size: 32px;
                --subtitle-font-weight: bolder;
              }
              .header {
                --title-padding: 0px 5px 5px;
                margin-top: -5px;
                
              }
      - type: custom:mushroom-template-card
        primary: "   £{{ '%.2f'|format(states('sensor.yesterday_energy_cost')|float(default=0.0)|round(2)) }}"
        icon: ""
        tap_action:
          action: more-info
        entity: sensor.energy_total_cost
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                text-shadow: 0px 0px 0px black;
                --card-primary-font-weight: 400;
                --card-primary-color: 
                  {% set demand = states('sensor.yesterday_energy_cost') | float %}
                  {% if demand < 3.00 %}
                    green;
                  {% elif 3.00 <= demand <= 4.50 %}
                    orange;
                  {% else %}
                    red;
                  {% endif %};
                --card-primary-font-size: 35px;
                text-align: center;
                margin-top: -25px;
                padding-top: 5px;
                padding-bottom: 5px;
              }
            .: |
              ha-card { 
                padding: 2px;
                background: rgba(var(--rgb-primary-text-color), 0.00);
                box-shadow: none;
                border-radius: 15px;
                background-color: white;
              }
card_mod:
  style: |
    ha-card {
      padding: 2px;
      background: rgba(var(--rgb-primary-text-color), 0.00);
      box-shadow: 1px;
      border-radius: 15px;
      background-color: white;
      height: 75px;
    }

[Mariusthvdb (Marius)]

thing is, we’re in a bit of an interbellum right now…

the mod-card change was an easy change, (and I too have been editing all of my cards yesterday…)

But this has now been reverted, and nobody knows whether they will return anytime soon. In other words, what to do.
Easy doesn’t mean not a lot of work. So here we are. do we again edit all of the cards to get it working for now, only to expect a reinstatement in the next few days/weeks, or…

@GTunney

If there is a better of way doing the below

because of the above, there is no sound advice I am afraid, you’d probably be best off with your former configs if you still have them and wait and see

(personally, I just reinstated 3.5.0 which I had saved, and enjoy the improvements. Maybe I can still find a way to fix the box-shadow and margins in the entities cards after all. If not, Ill rewrite some of those cards and modernize them )

[GTunney]

Yes I have re-added mod-card for now, I did try to update a few yesterday and remove mod-card but then this also broke other things like you say such as margins, font size, font weight etc.

I’ll hang fire for now until the recommended way is defined as like you I would also like to modernise. I normally just need to see a few examples then I can grasp the concept pretty well.

[arganto]

@Mariusthvdb

not all 3.5.0 left over challenges are reverted

Why do you thinks so? There is only one change between 3.4.3 and 3.4.4

Comparing v3.4.3...v3.4.4 · thomasloven/lovelace-card-mod

@Mariusthvdb

that’s why I tried to post as many successful examples I saw relevant.

For me not needed. Thomas said, that it now starts with hui-card and not ha-card from now.

But I didn’t read anyone update their code from

.: |

to something like (not updated and tested, but something like this should be the only needed change as just the starting point would be more above) before just posting “old way not working anymore”.

hui-entities-card $ ha-card $: |

or most probably just generic

$ ha-card $: |

But I fear Thomas will not jump into it again, if no one (it’s not against you personally, there were other/differen examples in the last days) tries to adapt to the (great!) changes before just posting "not working). If I were him, I wouldn’t feel like it either. But I have just seen a “will be” from him. So fingers coressed.

[Mariusthvdb (Marius)]

tbh, you have a lot of words for the people that actually did jump in, and tested, tried and reported back, without updating yourself, and watching others try to understand the actual changes.

the very short description we got might be understandable for the savvy card-modders amongst us, but it is more than understandable many didnt fully grasp the extent of the major and breaking update.

as you say yourself:

@arganto

something like (not updated and tested, but something like this should be

makes it clear you’re also uncertain, or merely supposing.

Why not jump in yourself and help out the community with this great update.

@arganto

Why do you thinks so?

to answer that, well, because I did test all of that, and noticed that the successful changes from 3.5.0 (badges/mod-card gone for stacks/classes) are also reverted in 3.4.4

as said, Ive re-updated to 3.5.0 and for now am in the process of rewriting stacked entities cards to vertical-stacks, as that is fully supported and straightforward.
Hoping to find a way to get the borders and margins back on entities cards with embedded cards.

there are some challenges left, like the tile card I posted in the card-mod repo, and styling of template entity-rows

other than that, I believe were covered pretty well in 3.5.0…

[ThomasDC (Thomas)]

I am new to using the card-mod features
I just want a larger text and icon on certain buttons)

but the text seems to be cut-off
how can I fix this?
how do I get the icon bigger?

[arganto]

@Mariusthvdb

@arganto

Why do you thinks so?

to answer that, well, because I did test all of that, and noticed that the successful changes from 3.5.0 (badges/mod-card gone for stacks/classes) are also reverted in 3.4.4

I only said and gave the link that everything beside renderEntity has been reverted. So there are no 3.5.0 challenges/things introduced by 3.5.0 in the card_mod anymore. That’s a fact. If you mean with your sentence, that you have still adaption in your UIs left over, which you started because of 3.5.0 then I missunderstood and it was not clear for me.

@Mariusthvdb

makes it clear you’re also uncertain, or merely supposing.

No, t.b. honest I’m not. I only gave a direct proposal on basis of Thomas’ info that you have to start now 2 levels above. But I didn’t see any try of this on Thomas’ gitgub before they all said “old style is not working anymore”. Ofc it isn’t, because of the change. I would be fine with: “here my try of adaption to new way, but it is not working”, but there wasn’t. Thats what I only wanted to mention.

@Mariusthvdb

Why not jump in yourself and help out the community with this great update.

Please let me and my life decide when I’m able to update and when not.

[mirekmal (Mirek Malinowski)]

@Mariusthvdb

button-card itself seems untouched (at least, in my rather extensive config, all buttons seems correct as far as I can see now) and you should really be able to set the background to none, did you try that too?

@VietNgoc

use css var…

    styles:
      card:
        - --card-background-color: transparent

For now reverted to 3.4.3 and upgraded to 3.4.4… Everything working fine so far. I’ll recheck once next update available.
In meantime, checking more of my dashboard I noticed the same issue with markdown card placed within grid card… also lost transparrent background. Again 3.4.4 fixed this, so also for this I’ll wait for next release.

[customized]

I have a simple tile card for an input_datetime (time only). The minimum width is 6 (grid_options: columns: 6), but that is a lot of wasted space.

Is it posisble to modify the --column-size css property of the parent div that contains the ha-card, or is there a better option to achieve a less-wide card? My current config:

type: tile
entity: input_datetime.coffee_machine_start_time
icon_tap_action:
  action: perform-action
  perform_action: input_boolean.toggle
  target:
    entity_id: input_boolean.coffee_machine_automatic_on
name: Coffee
card_mod:
  style: |
    ha-tile-icon {
      --tile-color: {{"var(--state-active-color)" if states('input_boolean.coffee_machine_automatic_on') == 'on' else "var(--state-inactive-color)"}};
    }
    ha-card {
      --column-size: 3;
    }

Modifying the ha-card doesn’t work unfortunately.

[Mariusthvdb (Marius)]

@arganto

Please let me and my life decide when I’m able to update and when not.

that goes without saying, I was merely hoping you would be able to help us out.

but, maybe you would be able to see what should be done in this case (consider the 3.5.0 update with changed elements)
a simple entities card with only 1 embedded auto-entities.
the card_mod setting the box-shadow there and some margins

# box_margin_0_16
style: |
  ha-card {
    box-shadow: none;
    margin: 0 -16px;
  }

no longer works, and for the life of me I cant find what we should try in stead.

type: entities
show_header_toggle: false
card_mod: !include /config/dashboard/card_mods/scroll_card-content.yaml
title: Z-wave switches
entities:

  - type: custom:auto-entities
    card:
      type: entities
      state_color: true
      card_mod: !include /config/dashboard/card_mods/box_margin_0_16.yaml. # <---- no effect
      show_header_toggle: false
    filter:
      template: >
        [{% for s in label_entities('z_wave')|sort  %}
           {{ {'entity': s,
               'secondary_info': 'last-changed'} }},
        {% endfor %}]

of course I gave the hui-card a shot but that doesnt make a difference. How we could realize this

@arganto

to start now 2 levels above

is beyond me.

fwiw, the scroll_card-content in the main entities card does work like before

this is the element to target now: