šŸ”¹ Card-mod - Add css styles to any lovelace card

more disaster:

    filter:
      template: >
        [{% set threshold = states('input_number.power_threshold')|float(0) %}
        {% for s in states.sensor
         |rejectattr('entity_id','search','solaredge|samen')
         |selectattr('entity_id','search','_actueel|_current_power')
         if s.state|float(0) > threshold %}
           {{
              {
                'entity': s.entity_id,
                'card_mod':
                  {'style':
                      ':host {
                        --card-mod-icon-color:
                          {% set state = states(config.entity)|float(-5) %}
                          {% if state > 2000 %} purple
                          {% elif state > 1000 %} maroon
                          {% elif state > 450 %} darkred
                          {% elif state > 300 %} firebrick
                          {% elif state > 250 %} crimson
                          {% elif state > 150 %} darkorange
                          {% elif state > 70 %} orange
                          {% elif state > 10 %} lightsalmon
                          {% elif state > 0 %} var(--power-color)
                          {% else %} var(--no-power-color)
                          {% endif %};
                      }'
                  }
              }
           }},
          {%- endfor %}]

no longer colors the icon based on states.

simpler version of that:

style: |
  :host {
    {% set signal = states(config.entity)|int(-5) %}
    --card-mod-icon:
      {% if signal == 'unknown' %} mdi:help
      {% elif signal >= 80 %} mdi:wifi-strength-4
      {% elif signal >= 50 %} mdi:wifi-strength-3
      {% elif signal >= 40 %} mdi:wifi-strength-2
      {% elif signal >= 30 %} mdi:wifi-strength-1
      {% elif signal >= 20 %} mdi:wifi-strength-outline
      {% else %} mdi:wifi-strength-alert-outline
      {% endif %};
    --card-mod-icon-color:
      {% if signal == 'unknown' %} gray
      {% elif signal >= 80 %} darkgreen
      {% elif signal >= 50 %} green
      {% elif signal >= 40 %} lightgreen
      {% elif signal >= 30 %} gold
      {% elif signal >= 20 %} orange
      {% else %} maroon
      {% endif %};
  }

all stopped being appliedā€¦icon or icon-color

this must be some generic dom path thingy change, or otherwise were borked. been working for, well, years

setting a straight forward simple color and icon doesnā€™t work either, so its not the template (of course it isnt)

really need some help test running the beta cycle this time, hope anyone of you can join.

We should consider this the end of times of card_mod orā€¦ hope its a simple matter of adapting our mods in the config. given the amount of trouble I now see, I fear the formerā€¦

in the UI:

type: entities
entities:
  - entity: sensor.slaapkamer_hygro_temp_temperature
    name: Slaapkamer
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: red;
        }

and yet, these all do work as before:

        entities:
          - entity: sensor.ws_5500_wind_direction
            name: Wind Direction
            card_mod: !include /config/dashboard/card_mods/wind_richting.yaml
          - entity: sensor.ws_5500_wind_gust
            name: Wind Gust
            card_mod: !include /config/dashboard/card_mods/wind_snelheid_kmu.yaml
          - entity: sensor.ws_5500_max_daily_gust
            name: Max Daily Gust
            card_mod: !include /config/dashboard/card_mods/wind_snelheid_kmu.yaml

or even


in a glance card

and they have the exact same format:

#wind_direction:
style: |
  :host {
    --card-mod-icon:
      {% set dir = states(config.entity)|int(0) %}
      {% set icons = ['down','bottom-left','left','top-left','up','top-right',
                      'right','bottom-right'] %}
      {% set quadrant = (dir/45)|round %}
      {% if quadrant < icons|count %} mdi:arrow-{{icons[quadrant]}}
      {% else %} mdi:arrow-down
      {% endif %};
  }

or

# wind_snelheid:
style: |
  :host {
    --card-mod-icon-color:
      {% set state = states(config.entity)|int(-5) %}
      {% if state == 'unknown'%} gray
      {% elif state < 0.5 %} lightblue
      {% elif state < 1.5 %} paleturquoise
      {% elif state < 3.3 %} aquamarine
      {% elif state < 5.5 %} greenyellow
      {% elif state < 7.9 %} lime
      {% elif state < 10.7 %} mediumspringgreen
      {% elif state < 13.8 %} yellowgreen
      {% elif state < 17.1 %} navy
      {% elif state < 20.1 %} gold
      {% elif state < 24.4 %} orange
      {% elif state < 28.4 %} tomato
      {% elif state < 32.6 %} orangered
      {% else %} crimson
      {% endif %};
  }

so its truly mesmerizing some of these work, and some dont

background of the view, you need card-mod theming for that.
background of a card: yes you should be able to do that using card-mod

I will try to see what commits could affect this.
Not using 2025.1 yetā€¦

Marius, how to instal that 25.1 version?
Imho, Docs were ā€œimprovedā€ in way I cannot find info which I earlier used to find fast.

Settings>System>Updates>3 dot menu>Join beta channel

They borked browser_mod as well, might be related?

No, nothing.


Also, why do I need an installed HA to setup a beta version?..

OK, offtop stopped.

you need to ā€˜subscribeā€™ to the beta, (Common tasks - Operating System - Home Assistant)ā€¦

check system/ updates, I can leave beta there:

SchermĀ­afbeelding 2024-12-24 om 23.10.22

I think you mean this? Showing the generic section of the mod is applied, and the detailed per entity section is not:

full code is this

HA card
type: entities
card_mod:
  style:
    hui-sensor-entity-row:
      $: |
        hui-generic-entity-row {
          height: 25px;
          padding: 0px 16px;
          border-radius: var(--ha-card-border-radius);
          border: 1px groove var(--primary-color);
        }
    .: |
      .card-content {
        background:
          {% set dark = is_state('binary_sensor.donker_thema','on') %}
          {% if not dark %} var(--ha-color)
          {% endif %};
      }
      ha-card {
        color: white;
        --card-mod-icon-color: white;
        --mdc-icon-size: 20px;
        font-weight: bold;
      }
entities:
  - type: custom:hui-element
    card_type: vertical-stack # required because hui-element does not support visibility
    cards:
      - visibility:
          - condition: state
            entity: binary_sensor.donker_thema
            state: 'on'
        image: /local/home-assistant/home-assistant-wordmark-color-on-dark.png
        <<: &picture
          type: picture
          entity: device_tracker.ha_main
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                background:
                {% set dark = is_state('binary_sensor.donker_thema','on') %}
                {% if not dark %} var(--ha-color)
                {% endif %};
              }
          tap_action:
            action: more-info
          hold_action:
            action: navigate
            navigation_path: /config/system
      - visibility:
          - condition: state
            entity: binary_sensor.donker_thema
            state: 'off'
        image: /local/home-assistant/home-assistant-wordmark-monochrome-on-dark.png
        <<: *picture

  - entity: sensor.last_boot
    format: datetime
    card_mod:
      style: |
        hui-generic-entity-row {
          border: none !important;
        }
  - entity: sensor.processor_use
    name: Cpu
    card_mod: &perc
      style: |
        hui-generic-entity-row {
          background:
            {% set perc = states(config.entity)|float(0) %}
            /*{% set rest = 100 - perc %}*/
            {% if perc >= 59 %} {% set bar = '255,0,0' %}
            {% elif perc >= 44 %} {% set bar = '128,0 0' %}
            {% elif perc >= 24 %} {% set bar = '255,165,0' %}
            {% elif perc >= 9 %} {% set bar = '0,100,0' %}
            {% else %} {% set bar = '0,128,0' %}
            {% endif %}
            /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
            linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
                                      rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
        }

  - entity: sensor.processor_temperature
    name: Temp
    card_mod:
      style: |
        hui-generic-entity-row {
          background:
            {% set temp = states(config.entity)|float(0) %}
            /*{% set rest = 100 - temp %}*/
            {% if temp >= 85 %} {% set bar = '255,0,0' %}
            {% elif temp >= 75 %} {% set bar = '128,0,0' %}
            {% elif temp >= 65 %} {% set bar = '255,99,71' %}
            {% elif temp >= 55 %} {% set bar = '255,69,0' %}
            {% elif temp >= 45 %} {% set bar = '255,140,0' %}
            {% elif temp >= 35 %} {% set bar = '255,165,0' %}
            {% else %} {% set bar = '0,128,0' %}
            {% endif %}
            /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{temp}}%);*/
            linear-gradient(to right, rgba({{bar}},0.9) 0%, rgba({{bar}},0.9) {{temp}}%,
                                      rgba({{bar}},0.6){{temp}}%, rgba({{bar}},0.2) 100%);
        }

  - entity: sensor.memory_use_percent
    name: Memory
    card_mod:
      style: |
        hui-generic-entity-row {
          background:
            {% set perc = states(config.entity)|float(0) %}
            /*{% set rest = 100 - perc %}*/
            {% if perc >= 85 %} {% set bar = '255,0,0' %}
            {% elif perc >= 75 %} {% set bar = '128,0,0' %}
            {% elif perc >= 60 %} {% set bar = '255,165,0' %}
            {% elif perc >= 50 %} {% set bar = '165,42,42' %}
            {% else %} {% set bar = '0,128,0' %}
            {% endif %}
            /*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
            linear-gradient(to right, rgba({{bar}},0.9) 0%, rgb({{bar}},0.9) {{perc}}%,
                                      rgba({{bar}},0.6){{perc}}%, rgba({{bar}},0.2) 100%);
        }

  - entity: sensor.disk_use_percent_home
    name: Disk
    card_mod: *perc

  - entity: sensor.swap_use_percent
    name: Swap
    card_mod:
      style: |
        hui-generic-entity-row {
          background:
            {% set swap = states(config.entity)|float(0) %}
            /*{% set rest = 1000 - swap %}*/
            /*{% set factor = 0.06 %}*/
            {% if swap >= 768 %} {% set bar = '255,0,0' %}
            {% elif swap >= 640 %} {% set bar = '255,215,0' %}
            {% else %} {% set bar = '50,205,50' %}
            {% endif %}
            /*linear-gradient(to left,ivory {{rest*factor}}%, {{bar}} {{swap*factor}}%);*/
            linear-gradient(to right, rgba({{bar}},0.9) 0%, rgba({{bar}},0.9) {{swap}}%,
                                      rgba({{bar}},0.1){{swap}}%, rgba({{bar}},0.1) 100%);
        }

current result (all is applied except the background color):

Something like this?

test:
  card-mod-theme: test
  background: url("{{ states('sensor.unsplash_background') }}")

like this

feest-background:
  card-mod-theme: feest-background
  card-mod-view: |
    {% set feest = is_state('binary_sensor.feest_alerts','on') %}
    hui-view {
      {% if feest %} background: repeat url('/local/images/balloons.png') fixed;
      {% endif %}
    }

or a template in that background

seizoen-background:
  card-mod-theme: seizoen-background
  card-mod-view: |
    hui-view {
      {% set seizoen = states('sensor.season_astronomical') %}
      background: repeat url('/local/season/{{seizoen}}_2.png') fixed;
    }

but please move this to the card-mod theme thread if you want to pursue

No, do not have this option.

Merry Christmas everyone! I need a bit of help :slight_smile:

Iā€™m trying to create a custom theme and use the card mod to style the .primary span inside a ha-tile-info component thatā€™s inside the ha-card component.

I can achieve this by editing the tile card directly and add the following:

type: tile
entity: switch.bedroom1_switch1_btn1
card_mod:
  style:
    ha-tile-info$: |
      .info .primary {
        color: red;
      }

How can achieve the same thing inside a theme? I tried creating a custom theme and adding the card-mod-card styles as shown bellow but itā€™s not working.

frontend:
  themes:
    custom:
      card-mod-theme: custom

      card-mod-card: |
        ha-card {
          ha-tile-info$: |
            .info .primary {
              color: red;
            }
        }

Please ask in card-mod-theme thread.

thanks. i reposted there

Good morning, Iā€™m trying to make a glance card with a larger font than standard. As others posted, when the font gets too large, the overflow setting cuts off the text. Also as mentioned here, I can manually deselect overflow: hidden in the inspector, but adding overflow: visible to the card has no effect. I also tried increasing the card size, but that doesnā€™t change the size at all in HA.

The previous overflow questions had no solution. Has anyone figured a way around this? Is there a better card (such as custom button card) that would work here? I want a large, color-coded temperature to let us know if itā€™s time to add wood to our outdoor wood boiler. Code and screenshot below:

show_name: false
show_icon: false
show_state: true
type: glance
entities:
  - entity: sensor.heatmor_temperature
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int <= 110 %} 
              blue
            {% elif states(config.entity) | int <= 120 %}
              yellow
            {% elif states(config.entity) | int >= 110 %}
              red
            {% endif %}
            ;
        }
title: HeatMor
card_mod:
  style: |
    ha-card {
    font-size: 3em;
    cardHeight: 900px; # no effect
    overflow: visible; # or overflow: visible !important, no effect
    }

image

Because cardHeight is not css propertyā€¦ :sweat_smile:}
use line-height: 100%;

Hello and Merry Christmas!

Is there any way to move the Temp Value lower???

I use line-height: 100%;

but I still want to move it a bit down

What exactly do you mean? Do you mean the state or the whole ha-card? Does line-height work for you?

sameā€¦
use

ine-height: 100%;