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

[dbrunt (Daniel)]

@Ildar_Gabdullin

Yet you are still using “-card-mod-icon-color” vars

So, is this better?

card_mod: style:

              card_mod:
                style:
                  hui-generic-entity-row:
                    $: |
                      state-badge {
                        {% if is_state(config.entity,'open') %}
                          --card-mod-icon: phu:blind-tilt-open;   color: green;
                        {% elif is_state(config.entity,'closed') %}
                          --card-mod-icon: phu:blind-tilt-closed; color: beige;
                        {% else %}
                          --card-mod-icon: mdi:help-circle;       color: red;
                        {% endif %}
                      }
                    .: |
                      div.entity:nth-child(2) state-badge {
                        {% set percentage = states(config.entities[0].entity)|int(0) %}
                        {% set r, g, b = 0, 0, 0 %}
                        {% if (percentage <= 51) %} {% set r = 255 %}
                          {% set g = (5.0 * percentage) | round | int %}
                        {% else %}
                          {% set g = 255 %} {% set r = (505 - 4.89 * percentage) | round | int %}
                        {% endif %}
                        color: {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
                      }

[dimitri.landerloos]

Probably like this:

              card_mod:
                style:
                  hui-generic-entity-row:
                    $: |
                      state-badge { 
                        {% if is_state('cover.[[blind]]','open') %} 
                          --card-mod-icon: phu:blind-tilt-open;
                          color: green;
                        {% elif is_state('cover.[[blind]]','closed') %} 
                          --card-mod-icon: phu:blind-tilt-closed;
                          color: beige;
                        {% else %} 
                          --card-mod-icon: mdi:help-circle;
                          color: red;
                        {% endif %}
                      }
                    .: |
                      div.entity:nth-child(2) state-badge {
                        {% set percentage = states(config.entities[0].entity)|int(0) %}
                        {% set r, g, b = 0, 0, 0 %}
                        {% if (percentage <= 51) %}
                          {% set r = 255 %}
                          {% set g = (5.0 * percentage) | round | int %}
                        {% else %}
                          {% set g = 255 %}
                          {% set r = (505 - 4.89 * percentage) | round | int %}
                        {% endif %}
                        color: {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
                      }

[Mngsps]

@Ildar_Gabdullin

Styling Weather Card:

type: weather-forecast
entity: weather.home
show_forecast: true
style: |
  ha-card .name-state .name {
    color: orange;
    font-size: 20px;
  }
  ha-card .name-state .state {
    color: red;
    font-size: 10px;
  }
  ha-card .temp-attribute .temp {
    color: green;
    font-size: 10px;
  }
  ha-card .temp-attribute .temp span {
    color: blue;
    font-size: 30px;
  }
  ha-card .temp-attribute .attribute {
    color: cyan;
    font-size: 20px;
  }
  ha-card .forecast .temp {
    color: orange;
  }
  ha-card .forecast .templow {
    color: blue;
  }
  ha-card .forecast div {
    color: magenta;
  }

Is this still up to date? In my case it successfully changes the colors but not the font-size… Thank you, a lot, for helping!

[Ildar_Gabdullin]

@Mngsps

Is this still up to date?

In general - yes. Ofc you need to add “card_mod” keyword. And suggest to remove “ha-card”, no need in fact (but will work anyway).
If smth does not work - check with Code Inspector. Some DOM paths should be fixed probably.

[Mngsps]

This is my code:

  - type: custom:mod-card
    card:
      type: vertical-stack
      cards:
        - show_current: true
          show_forecast: true
          type: weather-forecast
          entity: weather.spieshome
          forecast_type: hourly
          name: ' '
          card_mod:
            style: |
              ha-card {
                --card-primary-font-size: 18px;
                --card-secondary-font-size: 14px;
                --card-primary-font-weight: normal;
                background: none;
                border: none;
              }
              .name-state .name {
                color: orange;
                font-size: 20px;
              }
              .name-state .state {
                color: red;
                font-size: 10px;
              }
              .temp-attribute .temp {
                color: green;
                font-size: 10px;
              }
              .temp-attribute .temp span {
                color: blue;
                font-size: 30px;
              }
              .temp-attribute .attribute {
                color: cyan;
                font-size: 20px;
              }
              .forecast .temp {
                color: orange;
              }
              .forecast .templow {
                color: blue;
              }
              .forecast div {
                color: magenta;
              }
        - show_current: false
          show_forecast: true
          type: weather-forecast
          entity: weather.spieshome
          forecast_type: daily
          name: ' '
          card_mod:
            style: |
              ha-card {
                --card-primary-font-size: 18px;
                --card-secondary-font-size: 14px;
                --card-primary-font-weight: normal;
                background: none;
                border: none;
              }
    card_mod:
      style: |
        ha-card {
          background: #2A282D;
          ha-card-box-shadow: 'inset 0px 0px 0px 0px var(--divider-color)';
          border: 1px solid #37373D;
        }

It does change color bot not font size. Same when removing

              ha-card {
                --card-primary-font-size: 18px;
                --card-secondary-font-size: 14px;
                --card-primary-font-weight: normal;
                background: none;
                border: none;
              }

Any idea?

[Ildar_Gabdullin]

Same idea: check with code inspector as was suggested.

[sebbaT]

I’m trying to change the absolute positioning of a button within custom:expander-card and can’t figure out the correct path for card-mod.

JS Path

document.querySelector(“body > home-assistant”).shadowRoot.querySelector(“home-assistant-main”).shadowRoot.querySelector(“ha-drawer > partial-panel-resolver > ha-panel-lovelace”).shadowRoot.querySelector(“hui-root”).shadowRoot.querySelector(“#view > hui-view > grid-layout”).shadowRoot.querySelector(“#root > stack-in-card:nth-child(2)”).shadowRoot.querySelector(“ha-card > div > hui-vertical-stack-card”).shadowRoot.querySelector(“#root > expander-card”).shadowRoot.querySelector(“ha-card > div > button”)

Card-mod-helper

“body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>grid-layout$#root>stack-in-card:nth-child(2)$ha-card>div>hui-vertical-stack-card$#root>expander-card$ha-card>div>button”

I’d like to set right: 50% to the .header-overlay class.

I’ve tried the below and multiple other variations.

    card_mod:
      style: |
        ha-card > div.title-card-header-overlay > button {
          right: 50% !important;
          }

[dimitri.landerloos]

Try to just use button instead. You might need to set the position to absolute or relative as well depending on your usecase.

card_mod:
  style: |
    button {
      position: relative;
      right: 50%;
    }

[sebbaT]

Thanks for your help. Unfortunately that doesn’t work.

No styles are shown in the card-mod dom either:

[AleXSR700 (Alex)]

Is it possible to make an entities card show an input_text with like break (to ensure the entire content is shown)?
Or maybe even as an automatically scrolling text in case of overflow?

[mcfly83 (Mcfly)]

I want to change the mdc-checkboxes from ToDo-List from square to round ones, for this i want to edit the border-radius to 64px. It works within the Browser-Tool, but if i add this to Card-Mod, it won`t work. Has someone an idea why?

card_mod:
  style: |
    .mdc-checkbox__background {
    border-radius: 64px !important;
    }

[jmx (Julian)]

HA 2 week user - trying to modify icon colour based on temperature - below not working for this one entity (it works for all if I place the code at the top of my card flush left - but I want it to work on this entity only dealing with temp) - any ideas ? (I can save the code but the icon colour doesnt change on the entity) - thanks - Julian

type: entities
entities:
  - entity: sensor.ac_loads
  - entity: sensor.backup_state
  - entity: sensor.battery_load
  - entity: sensor.battery_percent
  - entity: sensor.battery_remaining
  - entity: sensor.battery_temp
  - entity: sensor.battery_voltage
  - entity: sensor.192_168_3_230_package_id_0_temperature
    name: ProxMox PackID 0 - CPU Temp
    card_mod:
      style: |
        ha-card {
          {% if states('sensor.192_168_3_230_package_id_0_temperature') > '40' %}
          --card-mod-icon-color: red;
          {% elif states('sensor.192_168_3_230_package_id_0_temperature') < '30' %}
          --card-mod-icon-color: blue;
          {% endif %}
        } 

[Ildar_Gabdullin]

@jmx

if states('sensor.192_168_3_230_package_id_0_temperature') > '40'

Comparing strings here.
Guess what is bigger: “bananas” or “apple”.
Need to convert to a number first:

if states('sensor.192_168_3_230_package_id_0_temperature')|float(default=0) > 40

Besides, do not use “ha-card” on a row level, use “:host”

[jmx (Julian)]

thanks kindly - it works fine now with:

“:host”

[Ildar_Gabdullin]

Even with your wrong template ? )

[jmx (Julian)]

oddly yes - I even changed the numbers for a test and saw the colour change accordingly - but what you suggested makes sense - I’ll improve my code to that - thanks again

[Ildar_Gabdullin]

@jmx

I even changed the numbers for a test and saw the colour change accordingly

Compare “100” & “19” then )))

[jmx (Julian)]

ah yes - good point - that failed - corrected with below as per your suggestion:

  - entity: sensor.192_168_3_230_package_id_0_temperature
    name: ProxMox PackID 0 - CPU Temp
    card_mod:
      style: |
        :host {
          {% if states('sensor.192_168_3_230_package_id_0_temperature')|float(default=0) > 50 %}
          --card-mod-icon-color: red;
          {% elif states('sensor.192_168_3_230_package_id_0_temperature')|float(default=0) < 40 %}
          --card-mod-icon-color: green;
          {% endif %}
        }

[AleXSR700 (Alex)]

I want to switch from lovelace resource (normal installation via HACS) to frontend module by adding it as a package.
Is there a way of checking if the card-mod was loaded as lovelace resource or as frontend module?

I added a yaml file to my packages folder using

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

but I don’t know how to check if that worked and if anything changed. It is still listed as a resource under dashboards.

[Mariusthvdb (Marius)]

Well if it’s listed, it was successful …