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

[mapb1990 (Miguel Borges)]

Hi,

I’m trying to create a template for styling chips to not repeat code, but the styles in chips are not applied.

template:

button_card_templates:
  bubble_chip:
    variables:
      color: '252, 199, 55'
      isEnable: false
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba('" + variables.color + ", " + (variables.isEnable ? "1" : ".5") + "');
          padding: 5px !important;
          border-radius: 100% !important;
        }

usage:

    type: custom:mushroom-chips-card
    chips:
      - type: template
        template: bubble_chip
        tap_action:
          action: toggle
        icon: mdi:lamp
        entity: light.men_cave_ceiling_light
        variables:
          isEnable: is_state('light.men_cave_ceiling_light', 'on')

Can someone help?
I’m new in HA

[VietNgoc (Ngoc John)]

button_card_templates is used for custom:button-card… not mushroom

[Mariusthvdb (Marius)]

funny to see you use my class there

you can probably leave that out, if you have not defined that in your card-mod themes.

on the other hand, defining those classes is what you are after.
In the card-mod theme thread did we post how to do that, so hop over and search a bit

[fmon]

@davidnestico

I’m on card_mod 3.5.0, whats weird is the new update really only broke my mushroom chips card-mod code

omg so glad I’m not alone. I think we nabbed a version that he quickly pulled back or something…

[Ildar_Gabdullin]

Seems I missed nothing here.
2 great news:
– “_renderEntity” fix became official;
– “ha-entity-marker” got it’s “entityId” property exposed (otherwise I was not able to access it even in an external js).

[Mariusthvdb (Marius)]

struggling with modding my statistics graph cards headers…

not sure if it is because I am still using the 3.5.0 card-mod version, or the HA update to 2025.1 (havent found a merged pr in the card yet)

would appreciate if anyone of you could have a look in the statistics graph, and be able to set a mod like this

# card-header in $
style:
  $: |
    .card-header {
       background: var(--background-color-off);
       font-weight: 400 !important;
       font-size: 20px !important;
       color: var(--text-color-off) !important;
       padding: 0px 12px !important;
       margin: 0px 0px 16px 0px !important;
     }
  .: |
    .card-header ha-icon-button {
      --card-mod-icon-color: var(--primary-color);
      {{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
    }

which is what I Am still able to do in the inspector…

there are several 3.5.0 challenges I hope will be fixed in a future update, but this one seems to me should be doable already.

Unless a reall bug in card-mod 3,5,0 of course.

so, please see if 3.4.4 can do what I need? thanks

btw, the history and statics graph cards have different structures, which is unfortunate. Maybe Ill open a FR to align those
update

nevermind, I downgraded and that made it clear immediately that 3.4.0 still does work on that

making that either a bug in 3.5.0, or a required syntax change Ive not yet found…

[SuperMario (Mario.B)]

I’m trying to modify simple-weather-card:

in the way to put some custom text (marked red) basically translation weather info, and also is it possible somehow to change individual small icons (marked blue). If I put the card_mod option (below) all small icons are the same.

type: custom:simple-weather-card
entity: weather.home
name: CITY
primary_info:
  - wind_bearing
  - wind_speed
secondary_info:
  - humidity
  - precipitation_probability
card_mod:
  style: |
    .weather__icon {
      {% set condition = states(config.entity) %} 
      {% if condition == 'partlycloudy' and is_state('sun.sun', 'below_horizon') %}
        {% set condition = condition + '-night' %}
      {% endif %}
      background-image: url("/local/weather_icons/{{ condition }}.svg") !important;
    }
    .weather__icon--small {
      background-image: url("/local/weather_icons/windy.svg") !important;
    }

This modification (with animated weather icons) was made by the user: rhysb so all the credits to him…

[Ildar_Gabdullin]

@Mariusthvdb

statistics graph cards headers

1st post as usual?

[Mariusthvdb (Marius)]

no, that is the thing.
this is what I used before, see the paste of the yaml.

with 3.5.0 this no longer works.
It might be why Thomas retracted it, it could also be we need another mod in that version. Not sure yet.

[Ildar_Gabdullin]

@Mariusthvdb

with 3.5.0 this no longer works.

Well, not tried it)))

[Mariusthvdb (Marius)]

yeah. I know, living on the edge…

I liked the features of 3.5.0 so much, I didnt want to go back, and figured it would a mere fx for some well known card_mods.

It’s turned out to be a bit more complex than hoped for, but now Ive gone this far, going back would even be more of a day job.

So it gave me the opportunity to take apart some heavy stacked and complex cards.

however, several simple things remain unsolved. l
like setting box-shadow: none to an auto-entities inside an entities card…

Ill await what Card-mod will do the next few days/weeks, and if nothing comes of that, Ill have to reconsider…

[Ildar_Gabdullin]

First I wanted to install 3.5.0 for testing, but it was deleted from github.
Can you share a code somewhere?

[arganto]

I thought about testing 3.5.0 as well, but if the changes will not stay after re-releasing it, I don’t have time and mind for redoing so many things perhaps again. So I’m now on 2025.1 with 3.4.4 and stay for the meantime with that.

[77Stack (Stack)]

I’m having an issue where text-content:not(.info) is not formatting in the default entities card.

Attempted:

title: Temps
type: entities
entities:
  - entity: sensor.central_bee_current_temperature
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            text-content:not(.info) {
              color: green;
            }

But nothing changes.

Can’t seem to find my mistake as it looks correct with other people’s examples.

EDIT: Looks like there was another person with the same issue a few weeks back, don’t see a resolution (I’m on a PC)

[Ildar_Gabdullin]

@77Stack

as it looks correct with other people’s examples

Compare with an ATTENTION your code with an example from the 1st post → link at the bottom → Entities

[77Stack (Stack)]

lol, I was missing the period before text-content:not(.info)

.text-content:not(.info)

Thank you!

[lordvalium]

Hi Thomas,
I would like to use your card-mod.

Just want to increase the font size

What do i do wrong?

type: tile
entity: sensor.wvwfdsae118877_battery_cruising_range
name: Range
vertical: true
card_mod:
        style: |
         font-size: 1.55em;