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

[crashmatt (Matthew Coleman)]

Yes. I just figured out that there is a second way.
“line-height” not “height”

type: entities
entities:
  - entity: sensor.lumi_lumi_weather_temperature_6
    name: Kitchen Temperature
    card_mod: &ref_0
      style: |
        hui-generic-entity-row {
          line-height: 100px;
          font-size: 36px;
        }    
  - entity: sensor.lumi_lumi_weather_temperature_4
    name: Bedroom Temp
    card_mod: *ref_0
  - entity: sensor.lumi_lumi_weather_temperature
    name: Living Room Temp
    card_mod: *ref_0

[drew-kun]

@Mariusthvdb Thank you very much for the answer!
Do I understand this right, so if my entity has the name binary_sensor.kodi1_vpn then the theme variables to override it’s color based on it’s state would look something like:

my_theme:
...
  google-red-500: "#dc322f"    # Solarized Red
  google-green-500: "#859900"  # Solarized Green
  state-binary_sensor-kodi1_vpn-off-color: "var(--google-red-500)"
  state-binary_sensor-kodi1_vpn-on-color: "var(--google-green-500)"
...

I tried this and it did not change the color of the sensor.
It works only if I use either attributes.icon_color property (because it’s a template sensor) or a custom-ui…

Any idea what am I doing wrong with Theme variables? (I am pretty sure that I just don’t understand the concept of theme variable naming)

[Ildar_Gabdullin]

@drew-kun

o if my entity has the name binary_sensor.kodi1_vpn then the theme variables to override it’s color based on it’s state would look something like:

Described here
Variables must be

--state-binary_sensor-on-color
--state-binary_sensor-off-color

If you define these changed CSS variables in a custom theme:
– all binary_sensors in all cards & in more-info windows will become cyan/magenta.

If you define these changed CSS variables in a particular card:
– only in THIS card ALL binary_sensors will be cyan/magenta:

type: entities
entities:
  - entity: binary_sensor.service_on_value
  - entity: binary_sensor.service_off_value
state_color: true
card_mod:
  style: |
    ha-card {
      --state-binary_sensor-on-color: cyan;
      --state-binary_sensor-off-color: magenta;
    }

If you define these changed CSS variables in a particular card for particular element (hence - for a particular entity):
– only in THIS card THIS binary_sensor will be cyan/magenta:

type: entities
entities:
  - entity: binary_sensor.service_on_value
  - entity: binary_sensor.service_off_value
  - entity: binary_sensor.service_on_value
    card_mod:
      style: |
        :host {
          --state-binary_sensor-on-color: cyan;
          --state-binary_sensor-off-color: magenta;
        }
  - entity: binary_sensor.service_off_value
    card_mod:
      style: |
        :host {
          --state-binary_sensor-on-color: cyan;
          --state-binary_sensor-off-color: magenta;
        }
state_color: true

[drew-kun]

@Mariusthvdb
Please ignore my previous reply.
I got it! Thank you so much!

I added device_class: connectivity to my binary_sensor definition:

template:
- binary_sensor:
  - name: Kodi1 VPN
    device_class: connectivity

and then added this to the theme:

  google-green-500: "#859900"  # Solarized Green
  google-red-500: "#dc322f"    # Solarized Red

  state-binary_sensor-connectivity-off-color: "var(--google-red-500)"
  state-binary_sensor-connectivity-on-color: "var(--google-green-500)"

And it works!

I see now, that the entity names ARE NOT understood by themes, but the device_classes ARE!

[denveronly]

Youre right, in standard card it works! Thank you
Do you have any idea why it is not working in multiple entity row or as a mushroom card? HA is last version, both are mushroom cards and multiple enitity rows

[Ildar_Gabdullin]

@denveronly

multiple entity row

In general, style from card_1 may not work for card_2.
Working examples for m-e-r: go to 1st post of the thread → link at the bottom → multiple-entity-row

@denveronly

mushroom

Not using.

[Mariusthvdb (Marius)]

you could also just use the right device_class everywhere, as HA has default colors for all of those, and you might just like them.
Only need to change them if you want different colors

[kkqq9320 (KKQQ)]

Hello. Can anyone help me? I am a beginner and card-mod is still difficult for me.

My card-mod version is the latest, 3.4.3, and the ha-core version is 2024.7.4.
I am working in Chrome.

I am trying to pull out the more-info using the card from GitHub - thomasloven/lovelace-more-info-card: 🔹 Display the more-info dialog of any entity as a lovelace card on my dashboard.

There is a lot of unnecessary information that I don’t want to display.

The header and state are working well,
but I can’t figure out how to set the display of div class current and the controls under div class controls to none.

I just wish only the temperature control section would be visible.

type: custom:more-info-card
entity: climate.ac_stand
card_mod:
  style:
    $: |
      h1 {
        display: none !important;
      }
    .: |
      h1, state-card-content {
        display: none !important;
      }
      .card-content {
        padding: 1.5em 0 0 0.7em;
      }
    more-info-content$more-info-climate:
      .: |
        .current {
          display: none !important
        }

When I copy the JS path of the div.current from the above image and paste it into card-mod-helper, I get this value.

body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div:nth-child(1)>hui-card-options>hui-card>more-info-card$ha-card>div>more-info-content$more-info-climate$div.current

I really can’t figure it out.
I would really appreciate it if anyone could help me. Thank you, and sorry for my poor english.

[Yosh46 (Sylvain Moi)]

Hello,

when I embed this code, it works for about 1 second, then returns to normal state without considering the modification:

1 seconde later:

should I change something else?

thanks

[Olivier1974 (Olivier Toussaint)]

I’m using that all the time as I don’t like the space (too big for my liking)
Here is my code:

              card_mod:
                style:
                  .entities:
                    .entity:
                      $: |
                        .name {
                          margin-top: -15px;
                        }
                        state-badge {
                          margin-top: 0px;
                          margin-bottom: -25px;
                        }

But what you want is more, not less, and if I put 100px instead of 0px, I have this

Which is what you want I think.

[Yosh46 (Sylvain Moi)]

Hi,

thank you for your feedback

the 100px was to concretely show my problem,
namely that the code works (the spacings take the indicated size), and in the next second, returns to its default state (return to default spacings).

in this case, with your code (I like the fact that we can also change the top margin!), only the top margin remains taken into account.
The second (concerning the state-badge), returns to its standard state in the following second: (again with 100px to show that this is not taken into account )

---

---

REEE

I have found !

—

[Olivier1974 (Olivier Toussaint)]

Cool mais c’est un forum en anglais, tu risques la peine de mort
Next time, use English only

[Yosh46 (Sylvain Moi)]

oh thank you!
with automatic translation, I don’t pay attention and get fooled regularly! (I corrected it!)

[Ricks88]

Hello,

I am trying to style the thermostat fan and swing modes. But i can not get it done in card_mode style.
I can change it in the chrome DevTools but when i set it in the card mod it does not do anything.

Does someone know how to proper set this?

Only hui-card-features has affect but on a 3 rows at once, i would like to place the swing modes and fan modes next to each other.

[jimz011 (Jim)]

Did you find a solution to this? It is driving me insane!

[ASNNetworks]

Sadly no, I still didn’t update because of this and the developer has gone radio silent sadly, so no responses. On Github issue someone did mention there was a workaround with a different variable, but it has some other caveats. You could try that, the issue is created on the Github page.

[jimz011 (Jim)]

I saw the issue, but the only solution I found was using a fixed position (which doesn’t really fix my issue).

I also saw something about the hui-card, but I have no clue where to put that in card-mod.

[JimNX (Jim)]

How can I hide the state of an entity card?

I’m using an entity filter card to show a list of faulted zones (alarm panel). I’m using the entity card inside, which shows the state next to the name as “faulted.” I’d like to hide “faulted” since the item will appear in the list only when it’s faulted anyway. The entity card doesn’t appear to have a “show_state” function.

I’ve tried a few things like

 ha-card .value
 ha-card .state
 ha-card .div.text-content.value
 ha-card .div.text-content.value.pointer

Here’s some code I’ve been playing with:

type: entity-filter
entities:
  - sensor.front_door
  - sensor.laundry_door
  - sensor.back_door_inner
  - sensor.back_door_outer
  - sensor.garage_overhead_door
  - sensor.front_motion
  - sensor.back_motion
  - sensor.basement_motion
  - sensor.front_bedroom_window
  - sensor.master_bedroom_window
  - sensor.kitchen_window
  - sensor.sump_pump_high_level
conditions:
  - condition: state
    state: faulted
card:
  type: entities
  card_mod:
    style: |
      ha-card { 
        border: none;
        box-shadow: none;
        background: none !important;
        backdrop-filter: none !important;
      }
      ha-card .state { 
        display: none !important;
        color: red !important;
      }

[Mariusthvdb (Marius)]

the only place I use that, is still working as before:

  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.sticky_menu
        state: 'on'
#       - condition: screen
#         media_query: '(min-width: 570px)'

    card:
      type: custom:mod-card
      card_mod:
        style: |
          ha-card {
            position: fixed;
            background: var(--primary-color);
            bottom: 10px;
            z-index: 1;
          }
          @media (min-width: 570px)  {
            ha-card {
              width: 494px;
            }
          }
          @media (orientation: portrait) and (max-width: 569px) {
            ha-card {
              width: calc(100%); /*384px;*/
            }
          }
      card: !include /config/dashboard/buttons/buttons_dashboards.yaml

the include is a stack of custom: button-card

tbh, I dont really use it, and have this only for the sake of the experiment. It’s indeed fixed, so if it should be done differently, I wouldnt know yet.

[jimz011 (Jim)]

Yeah, the fixed settings still works, it’s the sticky setting that is broken. My fixed elements also work as intended. The sticky cards however do not.