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

[Mariusthvdb (Marius)]

@josephny

But (hopefully), without repeating the code under each entry?

if you need an identical mod over several pages, or includes, you can easily safe them in secrets.yaml, and import from there.

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

wind_kracht:
  style: |
    :host {
        --paper-item-icon-color:
          {% set state = states(config.entity)|int(-5) %}
          {% set bft = ['lightblue','paleturquoise','aquamarine',
                       'greenyellow','lime','mediumspringgreen',
                       'yellowgreen','navy','gold','orange',
                       'tomato','orangered'] %}
          {{bft[state]}};
    }

wind_snelheid:
  style: |
    :host {
        --paper-item-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 %};
    }

temp_color:
  style: |
    :host {
        --paper-item-icon-color:
            {% set state = states(config.entity)|int(-5) %}
            {% if state == 'unknown'%} gray
            {% elif state < -20 %} black
            {% elif state < -15 %} navy
            {% elif state < -10 %} darkblue
            {% elif state < -5 %} mediumblue
            {% elif state < 0 %} blue
            {% elif state < 5 %} dodgerblue
            {% elif state < 10 %} lightblue
            {% elif state < 15 %} turquoise
            {% elif state < 20 %} green
            {% elif state < 25 %} darkgreen
            {% elif state < 30 %} orange
            {% elif state < 35 %} crimson
            {% else %} firebrick
            {% endif %};
    }

and the past in an actual card with:

entity: sensor.your_sensor_entity
card_mod !secret temp_color

[josephny (Joseph)]

@Mariusthvdb

temp_color:
  style: |
    :host {
        --paper-item-icon-color:
            {% set state = states(config.entity)|int(-5) %}
            {% if state == 'unknown'%} gray
            {% elif state < -20 %} black
            {% elif state < -15 %} navy
            {% elif state < -10 %} darkblue
            {% elif state < -5 %} mediumblue
            {% elif state < 0 %} blue
            {% elif state < 5 %} dodgerblue
            {% elif state < 10 %} lightblue
            {% elif state < 15 %} turquoise
            {% elif state < 20 %} green
            {% elif state < 25 %} darkgreen
            {% elif state < 30 %} orange
            {% elif state < 35 %} crimson
            {% else %} firebrick
            {% endif %};
    }

Well, I’ve been working on this and have made progress but only by applying the card_mod code to each entitiy in the card.

When trying to use !include it fails. Looks like it could be a card-mod-row issue.

But then I got to thinking that there really should be a better way than having to include code from another file (secrets.yaml).

There’s got to be a way to define a dynamic style (i.e., card_mod) to apply to all entities in a card. Yes?

[Mariusthvdb (Marius)]

@josephny

When trying to use !include it fails

Don’t use !include but use !secret if you import from secrets.yaml

Or, use auto-entities and set it in options

      - type: custom:auto-entities
        card:
          type: entities
          card_mod: *mod
        filter:
          include:
            - entity_id: sensor.*_actueel
              options: {card_mod: !secret power_color}

Or, use fold-entity-row and set it in group_config options of the fold

type: custom:fold-entity-row
head:
  type: section
  label: Mobile app
group_config:
  secondary_info: last-changed
  card_mod: !secret not_home_picture
padding: 0
entities:

Options galore

[neo171190 (Max)]

Hello Community,

I try for one week now to style the custom sonos card with card-mod.
Styling ha-card for example changing background works fine, but changing the width, max-width and height of the container is pretty hard for me.

I tried the card-mod helper, but don’t know how to use it. I got the following string:

"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-sidebar-view$#main>hui-card-options>swipe-card$#swiper-wrapper-85c7cd6b306919d6>sonos-card.swiper-slide.swiper-slide-active$ha-card"

Below an Image of the Chrome inspector. Changing the “40rem” to 100% will show the desired result. But i can’t get it to run in home assistant with card mod.

The following didn’t work:

card_mod:
  style: |
    ha-card  {
      max-width: 100%;
      width: 100%;
    }

I hope anybody can help me and much thanks in advance.

[josephny (Joseph)]

Ugh – I’m feeling quite slow. Still doesn’t work.

Here’s the dashboard:

temp_color:
  style: |
    :host {
        --paper-item-icon-color:
            {% set state = states(config.entity)|int(-5) %}
            {% if state == 'unknown'%} gray
            {% elif state < -20 %} black
            {% elif state < -15 %} navy
            {% elif state < -10 %} darkblue
            {% elif state < -5 %} mediumblue
            {% elif state < 0 %} blue
            {% elif state < 5 %} dodgerblue
            {% elif state < 10 %} lightblue
            {% elif state < 15 %} turquoise
            {% elif state < 20 %} green
            {% elif state < 25 %} darkgreen
            {% elif state < 30 %} orange
            {% elif state < 35 %} crimson
            {% else %} firebrick
            {% endif %};
    }

And here is secret.yaml

temp_color:
  style: |
    :host {
        --paper-item-icon-color:
            {% set state = states(config.entity)|int(-5) %}
            {% if state == 'unknown'%} gray
            {% elif state < -20 %} black
            {% elif state < -15 %} navy
            {% elif state < -10 %} darkblue
            {% elif state < -5 %} mediumblue
            {% elif state < 0 %} blue
            {% elif state < 5 %} dodgerblue
            {% elif state < 10 %} lightblue
            {% elif state < 15 %} turquoise
            {% elif state < 20 %} green
            {% elif state < 25 %} darkgreen
            {% elif state < 30 %} orange
            {% elif state < 35 %} crimson
            {% else %} firebrick
            {% endif %};
    }

[Mariusthvdb (Marius)]

those are identical snippets…

see some explanation and more examples on my icon-color repo

[neo171190 (Max)]

Ok, I got it. The style-Element in the code was before the ha-card-Element. Adding !important behind the max-width parameter solved the problem.

[Ildar_Gabdullin]

How to set a height for “history-graph”

code

type: vertical-stack
cards:
  - type: history-graph
    entities:
      - entity: sensor.processor_use
    hours_to_show: 6
  - type: history-graph
    entities:
      - entity: sensor.processor_use
    hours_to_show: 6
    card_mod:
      style:
        state-history-charts $:
          state-history-chart-line $:
            ha-chart-base $: |
              .chartContainer {
                height: 100px !important;
              }
  - type: history-graph
    entities:
      - entity: sensor.processor_use
    hours_to_show: 6
    card_mod:
      style:
        state-history-charts $:
          state-history-chart-line $:
            ha-chart-base $: |
              .chartContainer {
                height: 300px !important;
              }

---

Tested in HA 2023.11.2, Chrome 119.0.6045.160 (Win10x64), FF 119 (Win10x64).
Does not work in iOS Companion App (iOS 15.x).

[dma_k]

Pity, didn’t work for me (nothing changes) HA 2023.4.0, same Chrome version. Probably the issue could be further debugged?
Relative YAML snippet:

- type: vertical-stack
  cards:
    - type: history-graph
      entities:
        - entity: sensor.current_uv_index
      hours_to_show: 48
      card_mod:
        style: |
          state-history-charts $:
            state-history-chart-line $:
              ha-chart-base $: |
                .chartContainer {
                  height: 10em !important;
                }
    - type: markdown
      content: >-
        Maximum exposure time for skin.

[Ildar_Gabdullin]

@dma_k

HA 2023.4.0

Really?
And your card_mod version?

@dma_k

Probably the issue could be further debugged?

Then, ask yourself))

[Montreal666]

Hi, trying to learn how to work with code inspector to access and modify some objects with card_mod. Made some progress and learned some of the basics but I’m stuck with this one (trying to remove the 16px padding), could you assist so I can improve my skills:

using a screenshot as it should help pinpoint the issue:

I’ve tried a few things but not sure if I should go up the tree structure or stay below “ha-card” as I have assumed.

Let me know what I’m doing wrong and/or my syntax issues

Thank you!

  card_mod:
    style: 
      $: |
        .card-content {
          padding: 0px !important;
        }


  card_mod:
    style: |
      card-content {
         padding: 0px !important;
        }

[Ildar_Gabdullin]

@Montreal666

  card_mod:
    style: |
      card-content {
         padding: 0px !important;
        }

“card-content” is a CLASS.
And it is not in shadowRoot.
Try

  card_mod:
    style: |
      .card-content {
        ...
      }

[Montreal666]

Damn. I was sure I tried this syntax…
It works.
At least I was not too far off
Thx for the prompt response

[josephny (Joseph)]

sorry about the wrong paste above.

I really can’t believe this is so difficult.

I have been trying so many different syntaxes, and copying exactly what is above and what is linked above.

Here is a brand new Entities card:

type: entity
entity: sensor.pirateweather_temperature
card_mod: !secret temp_color

Here is a secrets.yaml:

temp_color:
  style: |
    :host {
        --paper-item-icon-color:
            {% set state = states(config.entity)|int(-5) %}
            {% if state == 'unknown'%} gray
            {% elif state < -20 %} black
            {% elif state < -15 %} navy
            {% elif state < -10 %} darkblue
            {% elif state < -5 %} mediumblue
            {% elif state < 0 %} blue
            {% elif state < 5 %} dodgerblue
            {% elif state < 10 %} lightblue
            {% elif state < 15 %} turquoise
            {% elif state < 20 %} green
            {% elif state < 25 %} darkgreen
            {% elif state < 30 %} orange
            {% elif state < 35 %} crimson
            {% else %} firebrick
            {% endif %};
    }

I am unable to save the card because of this:

Configuration errors detected:
unknown tag !<!secret> (3:29)

 1 | type: entity
 2 | entity: sensor.pirateweather_temperature
 3 | card_mod: !secret temp_color
---------------------------------^

I also tried putting a colon ( : ) after:
entity: sensor.pirateweather_temperature:

Still doesn’t work.

What am I doing wrong?

[Mariusthvdb (Marius)]

tbh, I dont know. are you using yaml mode?
because I dont get syntax error at all.

I can confirm this to happen in UI mode…

and adding a quote kills the mod. hmm not sure how t proceed here, apparently the UI editor cant handle the !

seems the only way would be a ‘hybrid’ approach, as I just learned that UI mode doesnt support !includes either.
wow, that would seriously kill my dashboard

it does however support yaml anchors

type: entities
entities:
  
  - <<: &entity
      entity: sensor.buienradar_temperature
  - <<: *entity

so, you can at least c&p those card_mod mods per view inside an anchor.

[DjJoakim (Joakim)]

Hey!

I just experienced that some of my temperature sensors went down, without me knowing about it - since they got stuck at the last value read.
So, to fix this - i wan’t a “panel” where u can see when they last updated and the battery state. Said and done, as the picture shows.

But here’s the problem - since it’s easy to miss if it says “1 day ago” or “1 hour ago” i wan’t the secoundary text to be red if it’s been over 12h since last update.

I have tried multiple codes getting this to work, but i can’t seem to get it working.
The last code i have tried is this one;

type: entities
entities:
  - entity: sensor.badrum_temperature
    type: custom:multiple-entity-row
    name: Tempgivare Hall
    secondary_info: last-changed
    show_state: false
    entities:
      - entity: sensor.tempgivare_hall_batteri
        name: Batteri
    style:
      '--secondary-text-color': >
        {% set last_updated = state_attr('sensor.badrum_temperature', 'last_updated') %}
        {% set time_difference = (now() - last_updated).total_seconds() / 60 %}
        {% if time_difference > 2 %}
          red
        {% else %}
          inherit
        {% endif %}

But it won’t work, i also tried just

   style:
      '--secondary-text-color': red

But it still won’t change the colour to red.

Thankful for all the help i can get!

[image969 (James Scialdone)]

Hello,

Can someone get me started with how to target HA-textfield for CSS stuff?

Mini media player TTS died with latest HA update, because paper-input was deprecated, so the quick fix was to swap out paper-input for Ha-Textfield in the JS file

Works great, but now the text box looks ugly lol

Any help would be appreciate.

'ha-textfield
{ font: code stuff goes here
} ’

Am I close? lol

[Ildar_Gabdullin]

As it was already proposed to you in another topic:
1st post → link at the bottom → styles for m-e-r

[Ildar_Gabdullin]

@image969

target HA-textfield

This could BE helpful:
1st post → link at the bottom → styling input_text

[AINER]

Hi, guys!
Can someone help me to change the color of the drop-down arrow? I use custom:expander-card. But this card does not have an arrow color setting. Is it possible to change it using Сard-mod?

I found a fill parameter that controls the color, but I couldn’t use it.

Code

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      transition-property: none; !important;
      box-shadow: none;
      padding: 7px !important;
      background: rgba(var(--rgb-card-background-color), 0.5) !important;
    }
cards:
  - type: custom:mod-card
    card:
      type: custom:mushroom-title-card
      title: Журнал
      subtitle: null
      alignment: center
    card_mod:
      style:
        .: |
          ha-card {
            transition-property: none; !important;
            
            margin: -30px 0px 0px 0px !important;
            padding: 0px 0px 0px 0px !important;
            top: 45px;

          }
        mushroom-title-card$: |
          h1 {
            --primary-text-color: rgb(var(--rgb-grey));  
            --title-font-size: 16px;
            top: 100px;
            left: 132px;
          }
          h2 {  
            --secondary-text-color: rgb(var(--rgb-grey)); 
            --subtitle-font-size: 14px;
            text-align: end;
          }
          .header {
            transition-property: none; !important;
            
            --title-padding: 0px 0px 0px 0px;
            margin: 0px 0px -10px 0px !important;
          }
  - type: custom:expander-card
    padding: 0px
    clear: true
    title: []
    child-padding: 0px
    button-background: transparent
    card_mod:
      style:
        ha-icon: |
          :host {
            fill: green !important;
          }
    cards:
      - type: custom:stack-in-card
        card_mod: null
        style:
          .: |
            ha-card {
              transition-property: none; !important;
              margin: 0px !important;
            }