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

Struggling to find the correct syntax, but I am using the room_card (marcokreeft87/room-card) and am trying to find the proper selector for the ha-icon to increase the size.

I have tried

                .: 
                  "state-badge":
                    $: 
                      "ha-icon":
                        $: |
                          ha-svg-icon {
                            color: green;
                            height: 36px;
                            width: 36px;
                          }

to no avail. The xpath is

/html/body/home-assistant//home-assistant-main//ha-drawer/partial-panel-resolver/ha-panel-lovelace//hui-root//div/div[2]/hui-view/layout-card//grid-layout//div/layout-card[3]//grid-layout//div/room-card[5]//ha-card/div[2]/div[1]/div/state-badge//ha-state-icon//ha-icon//ha-svg-icon

ha-svg-icon


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 > layout-card").shadowRoot.querySelector("grid-layout").shadowRoot.querySelector("#root > layout-card:nth-child(3)").shadowRoot.querySelector("grid-layout").shadowRoot.querySelector("#root > room-card:nth-child(6)").shadowRoot.querySelector("ha-card > div.entities-row.content-left > div:nth-child(1) > div > state-badge").shadowRoot.querySelector("ha-state-icon").shadowRoot.querySelector("ha-icon").shadowRoot.querySelector("ha-svg-icon")

Any help? Thanks

Did you get it working? Mine isnā€™t the way it was when i posted that, i now have it inside a fold-entity-row, and the code looks a bit different

Nope. I tried a few things. No dice ā€¦

Add one of these to match your font-size: to fix this issue.

--card-primary-line-height: 20px !important;
--card-secondary-line-height: 20px !important;
1 Like

To which CSS selector should I add it? I only really want to change the icon not the text.

How to change the text color to red if you were at home during working hours from 9 a.m. to 6 p.m.?

type: custom:logbook-card
entity: device_tracker.192_168_1_2

Š”Š½ŠøŠ¼Š¾Šŗ эŠŗрŠ°Š½Š° 2024-02-26 153244

Use Code Inspector to find out a correct selector.

Thatā€™s my issue. I tried several but I donā€™t ever seem to see an effect on the front. If I manually select it and change it with the developer tools it works. Suggestions for what I may be doing wrong?

Not using this card. Are you using card-mod properly in general? Have you tried with standard cards? Have you checked1st post - link at the bottom?

hi again

i am trying to change the icons of the buttons of a media_player.template card
i have managed to change the size , spacing etc of the icons but i have not managed to change the actual icons.
what did work was to change the icon of the card itself (see below ā€œmdi:kodiā€) but not for the buttons

card:
  type: media-control
  entity: media_player.kodi_firetv
  card_mod:
    style: |
      :host {
         --card-mod-icon: mdi:kodi !important;
      }
      hui-marquee {
          font-size: 1.6em !important;       
      }
      ha-icon-button[action=turn_off]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;

      }
      ha-icon-button[action=turn_on]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;
      }
      ha-icon-button[action=media_previous_track]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;
      }
      ha-icon-button[action=media_pause]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;
      }
      ha-icon-button[action=media_next_track]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;
      }

i tried adding the --card-mod-icon to the buttons but that didnā€™t work.
any idea would be much appreciated.

this is what it looks like atm
image
the circled buttons i want to change icons for.

using code inspector i found this ā€œpathā€ which allows me to to change the icons manually in the code but that ofc does not persist
image

User-defined config options - to be used inside card-mod:
Interesting & useful.

type: entities
entities:
  - entity: sun.sun
    my_color: red #user-defined config
    card_mod: &ref_style
      style: |
        :host {
          color: {{config.my_color}};
        }
  - entity: sun.sun
    my_color: cyan
    card_mod: *ref_style

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ
Call a reusable card-mod code as an anchor or by ā€œincludeā€ - and define settings as a part of ā€œconfigā€.

Ofc can be used with standard options as well (as it can with ā€œconfig.entityā€):

  - type: history-graph
    entities:
      - entity: sensor.system_monitor_processor_use
    hours_to_show: 24
    card_mod: &ref_style
      style: |
        ha-card {
          {% if config.hours_to_show < 12 -%}
            {%- set COLOR = 'rgb(0,255,0)' -%}
          {%- elif config.hours_to_show >= 12 and
                   config.hours_to_show <= 24 -%}
            {%- set COLOR = 'rgb(255,0,0)' -%}
          {%- else -%}
            {%- set COLOR = 'rgb(255,255,0)' -%}
          {%- endif -%}
          --graph-color-1: {{COLOR}};
        }
  - type: history-graph
    entities:
      - entity: sensor.system_monitor_processor_use
    hours_to_show: 6
    card_mod: *ref_style
  - type: history-graph
    entities:
      - entity: sensor.system_monitor_processor_use
    hours_to_show: 32
    card_mod: *ref_style

1 Like

How can I set the font color for the secondary info of the default HA tile cards globally in my own theme-file?

Hello @Ildar_Gabdullin,

thx a lot for those examples. Iā€™m struggling to combine two of examples you posted here: changes of the main entry and of secondary entries.

I have a card mod for the main entry, itā€™s this one:

type: entities
show_header_toggle: false
entities:
  - entity: climate.thermoschlazi
    name: Schlafzimmer
    secondary_info: false
    tap_action:
      action: more-info
    double_tap_action:
      action: toggle
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge {
            color: {{ iif(is_state('climate.thermoschlazi', 'off'), '', '#FFC107') }};
            --card-mod-icon: {{iif(is_state('climate.thermoschlazi', 'off'), 'mdi:radiator-off', 'mdi:radiator') }};            
          }
          .info.pointer .secondary 
            ha-relative-time {
              display: {{ iif(is_state('climate.thermoschlazi', 'off') and not is_state('input_select.heizung', 'Aus'), '', none) }};
              color: {{ iif(((now() - states.climate.thermoschlazi.last_changed).total_seconds() // 60) > 19, 'red', '') }};
            }
    type: custom:multiple-entity-row
    show_state: false
    entities:
      - attribute: temperature
        name: Target
        unit: Ā°C
      - attribute: current_temperature
        name: Current
        unit: Ā°C
        styles:
          width: 100px
      - entity: switch.licht_schlazi
        name: Licht
        state_color: true
        tap_action:
          action: toggle

What I want to add is coloring of the 3rd child of the secondary entries so it changes the state color on switch state. Without the main entry mod this works for that:

type: entities
show_header_toggle: false
entities:
  - type: custom:multiple-entity-row
    entity: climate.thermoschlazi
    name: Schlafzimmer
    secondary_info: false
    show_state: false
    tap_action:
      action: more-info
    double_tap_action:
      action: toggle
    entities:
      - entity: switch.licht_schlazi
        name: Licht
        state_color: true
        tap_action:
          action: toggle
    card_mod:
      style: |
        .entities-row div.entity:nth-child(1) {
          color: {{ iif(is_state('switch.licht_schlazi', 'off'), '', '#FFC107') }};
        }

What i cannot figure out is how to integrate the 2nd style into the first one. Could you please help. thx

best regards,
Zavjah

As always: First post, link to Ildas examples/tutorials and there you will find an entry for combining such things. Or search for this in this thread and you will find the same question and same answer and even more examples a lot (!) of times.

Sometimes it is really faster and more helpful to do some search and see, how the others are doing it and if the same questions has been flying around again and again.

Example: The last same question has been answered just 2d/15 posts above.

1 Like

Anyone willing to look at the below and tell me where I am going astray? Problem is the text color is not changing when then the background changes to yellow. The card is showing me the output of some of the FLUME sensors. The background color will change based on the # of gallons used, this is working, problem I am having is when it turns yellow I canā€™t read the numbers so I want the text color to change to black only when the background is yellow. this is all the code for ref. the Card Mod stuff is at the end, attempt 1 was this-

mode: horizontal
cards:
  - type: custom:button-card
    entity: sensor.flume_sensor_denmans_current_day
    name: Today
    icon: mdi:water
    show_state: true
    styles:
      card:
        - '--keep-background': 'true'
        - filter: opacity(70%)
        - height: 40px
      icon:
        - color: white
      name:
        - font-size: 12px
        - color: white
  - type: custom:button-card
    entity: sensor.flume_sensor_denmans_current_week
    name: This Week
    icon: mdi:water
    show_state: true
    styles:
      card:
        - '--keep-background': 'true'
        - filter: opacity(70%)
        - height: 40px
      icon:
        - color: white
      name:
        - font-size: 12px
        - color: white
  - type: custom:button-card
    entity: sensor.flume_sensor_denmans_current_month
    name: This Month
    icon: mdi:water
    show_state: true
    styles:
      card:
        - '--keep-background': 'true'
        - filter: opacity(70%)
        - height: 40px
      icon:
        - color: white
      name:
        - font-size: 12px
        - color: white
card_mod:
  style: |
    ha-card {
      {% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
      {% if value >= 0 and value <= 12000 %}
      --ha-card-background: green;
      {% elif value >= 12001 and value <= 15000 %}
      --ha-card-background: yellow;
      {% else %}
      --ha-card-background: red;
      {% endif %}
      {% if value >= 12001 and value <= 15000 %}
      color: black;
      {% else %}
      color: var(--accent-color);
      {% endif %}
    } ```

Attempt 2, Just the changed Card Mod stuff-

``` card_mod:
  style: |
    ha-card {
      {% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
      {% if value >= 0 and value <= 12000 %}
      --ha-card-background: green;
      {% elif value >= 12001 and value <= 15000 %}
      --ha-card-background: yellow;
      {% else %}
      --ha-card-background: red;
      {% endif %}
      {% if value >= 12001 and value <= 15000 %}
      color: black;
      {% endif %}
    }

Atempt 3, also no go.

  style: |
    ha-card {
      {% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
      {% if value >= 0 and value <= 12000 %}
      --ha-card-background: green;
      {% elif value >= 12001 and value <= 15000 %}
      --ha-card-background: yellow;
      {% else %}
      --ha-card-background: red;
      {% endif %}
    }
    .card-content {
      color: var(--accent-color);
    }
    .card-content.yellow {
      color: black;
    }
  1. Read docs about using card-mod for vertical (horizontal) stack.
  2. You are trying to style a stack & 95% of posted code describing buttons inside a stack, this is unrelated.

Good morning!

Does anyone know how to add a shadow to the image in the weather card?

image

And: Can I reduce the spcing in between the Text and the temperture?

Thanky you, a lot, and all the best!

used someone code for a thermostat for a room, but it put a green bar below and I canā€™t remove it.

type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:

  • type: grid
    square: false
    columns: 2
    cards:
    • type: custom:mushroom-template-card
      style: |
      ha-card {
      padding-bottom: 1px !important;
      }
      primary: Thermostat
      secondary: |
      Currently: {{ state_attr(ā€˜climate.living_roomā€™, ā€˜hvac_actionā€™) }}
      icon: |-
      {% set mode = states(ā€˜climate.living_roomā€™) %}
      {% if mode == ā€˜offā€™ %}
      mdi:power
      {% elif mode == ā€˜coolā€™ %}
      mdi:snowflake
      {% elif mode == ā€˜heatā€™ %}
      mdi:fire
      {% elif mode == ā€˜heat_coolā€™ %}
      mdi:autorenew
      {% else %}
      mdi:home-thermometer
      {% endif %}
      icon_color: |-
      {% set status = state_attr(ā€˜climate.living_roomā€™,ā€˜hvac_actionā€™) %}
      {% if status == ā€˜offā€™ %}
      grey
      {% elif status == ā€˜coolingā€™ %}
      blue
      {% elif status == ā€˜heatingā€™ %}
      red
      {% else %}
      grey
      {% endif %}
      tap_action: none
    • type: vertical-stack
      cards:
      • type: custom:simple-thermostat
        style: |
        ha-card {
        ā€“st-spacing: 0px;
        }
        ha-card .currentā€“value {
        color: #ffffff;
        }
        header {
        margin-bottom: 12px !important;
        padding-bottom: 0px !important;
        }
        ha-card .thermostat-trigger {
        color: #9e9e9e;
        }
        entity: climate.living_room
        header:
        name: false
        icon: false
        decimals: ā€˜0ā€™
        fallback: ā€˜Offā€™
        hide:
        temperature: true
        state: true
        layout:
        mode:
        names: false
        icons: false
        headings: false
        step: row
        step_size: ā€˜1ā€™
        control:
        hvac:
        ā€˜offā€™: false
        heat: false
        cool: false
        heat_cool: false
  • type: custom:mushroom-chips-card
    style: |
    ha-card {
    ā€“chip-box-shadow: none;
    ā€“chip-background: none;
    }
    alignment: justify
    chips:
    • type: template
      entity: climate.living_room
      content: |
      {{ state_attr(entity, ā€˜fan_modeā€™) }}
      icon: mdi:fan
      icon_color: green
      tap_action: none
    • type: template
      content: ā€˜{{state_attr(entity, ā€˜ā€˜current_temperatureā€™ā€™)}} Ā°Fā€™
      entity: climate.living_room
      icon: mdi:home-thermometer
      tap_action:
      action: more-info
      icon_color: |-
      {% set state=states(entity) %}
      {% if state==ā€˜coolā€™ %}
      blue
      {% elif state==ā€˜heatā€™ %}
      red
      {% else %}
      grey
      {% endif %}
    • type: weather
      entity: weather.forecast_home
      show_conditions: true
      show_temperature: true
    • type: template
      double_tap_action:
      action: none
      content: ā€˜{{ states(entity) }}% Humidityā€™
      entity: sensor.living_room_humidity
      icon: mdi:water
      icon_color: blue
      tap_action:
      action: none
      hold_action:
      action: none
  • type: custom:simple-thermostat
    style: |
    ha-card {
    ā€“st-font-size-toggle-label: 6px
    ā€“st-spacing: 0px;
    ā€“st-default-spacing: 0px;
    ā€“st-mode-background: #262626;
    margin-left: 12px;
    margin-right: 12px;
    }
    ha-card .mode-item.active.off {
    background: #363636;
    color: #9e9e9e;
    }
    ha-card .mode-item.active.cool {
    background: #1d3447;
    color: #2196f3;
    }
    ha-card .mode-item.active.heat {
    background: #472421;
    color: #f44336;
    }
    ha-card .mode-item.active.heat_cool {
    background: #493516;
    color: #ff9800;
    }
    ha-card .mode-item.active {
    background: #263926;
    color: #4caf50;
    }
    ha-card .mode-item.active:hover {
    background: #363636;
    color: #9e9e9e;
    }
    ha-card .mode-item:hover {
    background: #363636;
    color: #9e9e9e;
    }
    ha-card .mode-item {
    ā€“st-spacing: 10px;
    border-radius: 10px;
    }
    ha-card .modes {
    grid-gap: 12px
    }
    entity: climate.living_room
    header: false
    setpoints: false
    hide:
    temperature: true
    state: true
    layout:
    mode:
    headings: false
    icons: true
    names: false
    step: row
    control:
    hvac:
    ā€˜offā€™:
    name: Power
    heat:
    name: Heat
    cool:
    name: Cool
    heat_cool:
    name: Auto
  • type: custom:mini-graph-card
    entities:
    • entity: sensor.living_room_temperature
      name: Temperature
      color: var(ā€“green-color)
    • entity: sensor.bathroom_temperature
      name: Outside
      color: var(ā€“yellow-color)
      y_axis: secondary
    • entity: sensor.living_room_humidity
      name: Humidity
      color: var(ā€“blue-color)
      y_axis: secondary
      hours_to_show: 24
      line_width: 3
      font_size: 50
      animate: true
      show:
      name: false
      icon: false
      state: false
      legend: true
      fill: fade

Screenshot by Snip My on 29 Feb 2024 at 10.51.02

Please post your code based off #11

Hi there,

Since I updated to 2024.02, some of the card_mod configurations are not being applied, in this case on the Tile card, mainly this one:

card_mod:
  style:
    .icon-container .icon$: |
      .shape { 
        border-radius: 15px !important;

This should make the icon containers almost square, with a round of 15px at the corners but now they are all round. I suppose this is being ignored.
Someone have some pointers on how to solve this?

Thanks.
Pedro.