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

[crackers8199 (Matt Greco)]

figured it out from playing around with it…leaving the solution here in case anyone else is interested and stumbles upon this thread.

basically, i had to tweak both the svg for the gauge as well as the text for the card itself. in order to get the gauge pct text into the middle further, i had to add the overflow: visible property, which then extended the left part of the gauge into the bottom of the card…so to fix that, i added a white background on the card text and expanded it to cover the part of the now visible svg that i didn’t need (to basically cut off the bottom half of the gauge to make it look like it originally did, just smaller).

      - entity: sensor.front_door_battery_level
        card_mod:
          style:
            .: |
              .name {
                font-size: 14px !important;
                background-color: white;
                position: absolute;
                bottom: 0px;
                padding-bottom: 20px;
                padding-top: 25px;
              }
            ha-gauge$: |
              svg {
                transform: scale(0.7) translateY(-10px);
                overflow: visible;
              }
              svg text {
                transform: scale(0.6) translateY(-65px);
              }
        max: 100
        min: 0
        name: Front Door Battery
        severity:
          green: 50
          red: 15
          yellow: 30
        type: gauge

yields this result (which is a smaller gauge and smaller pct text, with the text moved up a bit into the middle of the gauge):

[cyn]

It works and saved me 200 lines of code, Thank you so much!

[DNWY90 (Danny)]

I’m trying to remove the footer of the custom:spotify-card. In Chrome browser i can find:

#footer {
display: flex;

If i change it to:

#footer {
display: none;

The footer is gone, but i can’t fing a way to get this in HA?

EDIT: The same for:

#content {
background-color: rgb(126 46 46 / 0%);
}

Can change the color in Chrome but have no idea how to change in HA

[xordi (Jordi)]

I found that I had an error in the javascript console saying:
TypeError: Cannot read property 'then' of undefined

Searched in the project issues I found that this is fixed in a commit, but the next version “3.0.13” has not been released and therefore, people who have installed card-mod through HACS will not be able to use the CSS in the dialogs using the tag “card-mod-more-info-yaml”.

In the end I added the card-mod.js file with the other installation method.

Once this was fixed, I found a way to hide the “Preload stream” checkbox:

  card-mod-more-info-yaml: |
    more-info-content more-info-camera:
      $: |
        paper-checkbox {
          display: none;
        }

[arganto]

@arganto

I wonder if there are parsing changes in combination with 2021.10.x? Before, this was working:

Any ideas on this? Perhaps card_mod grandmaster Ildar?

[Ildar_Gabdullin]

Styling cover entity row:

type: entities
entities:
  - entity: cover.garage_door
    card_mod:
      style: |
        :host {
          color: green;
        }
  - entity: cover.garage_door
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: cyan;
        }
  - entity: cover.garage_door
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: yellow;
            }
  - entity: cover.garage_door
    card_mod:
      style:
        hui-generic-entity-row ha-cover-controls:
          $: |
            .state ha-icon-button {
              color: orange;
            }
  - entity: cover.garage_door
    card_mod:
      style:
        hui-generic-entity-row ha-cover-controls:
          $: |
            .state ha-icon-button:nth-child(1) {
              color: orange;
            }
            .state ha-icon-button:nth-child(2) {
              color: red;
            }
            .state ha-icon-button:nth-child(3) {
              color: magenta;
            }
  - entity: cover.garage_door
    card_mod:
      style:
        hui-generic-entity-row ha-cover-controls:
          $: |
            .state ha-icon-button:nth-child(1) {
              color: orange;
            }
            .state ha-icon-button:nth-child(2) {
              color: red;
            }
            .state ha-icon-button:nth-child(3) {
              color: magenta;
            }
        .: |
          :host {
            --paper-item-icon-color: cyan;
            color: green;
          }

---

More card-mod examples

[Ildar_Gabdullin]

@arganto

Any ideas on this?

In your case, you should style from the Entities card level, not from restriction-card.

[arganto]

@Ildar_Gabdullin

In your case, you should style from the Entities card level, not from restriction-card.

But why did it work before and now only with this additional $:? And what happens with this additional $:?

[e-raser]

(according to 🔹 Card-mod - Super-charge your themes! - #867 by MaestroMetty / following up on 🔹 Card-mod - Add css styles to any lovelace card - #1974 by Ildar_Gabdullin)

I use a

• custom:mod-card
  → inside of this: grid card
  → --> inside of this: several button cards

And I´m applying this to the custom:mod-card

card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          text-align: center;
          #font-weight: bold;
          font-weight: 500;
          letter-spacing: 3px;
          margin-top: -10px;
        }
    .: |
      ha-card {
        border: 2px solid grey;
        padding: 5px;
        background: none;
      }

Strange behaviour: On iOS and Windows the .card-header inside the hui-grid-card is respected and applied correctly. But on my Android devices (HA Companion app and browser) it´s not, so my lovelace view looks different depending on the device - which is quite bad

To be more specific: only the text-align: center; is correctly applied, everything else seems like it´s being ignored.

Is there an Android specific thing (bug) or the need to address the .card-header on another way

[Ildar_Gabdullin]

If someone missing secondary_info: last-changed for input_select entity-row (sadly it is not available out-of-box):

Update (21.06.22): the post is updated with styles for MDC controls; old style (see at the bottom of the post) does not work since 2022.3.

Code

  - entity: input_select.test_value
    card_mod:
      style: |
        ha-select::after {
          content: "{{relative_time(states[config.entity].last_changed)}} ago";
          font-size: var(--paper-font-caption_-_font-size);
          color: var(--secondary-text-color);
          padding-left: 12px;
        }

Old style - not valid since HA 2022.3

  - entity: input_select.test_value
    name: some name
    icon: mdi:weather-night
    card_mod:
      style:
        ha-paper-dropdown-menu:
          $:
            paper-menu-button:
              .dropdown-trigger:
                paper-input:
                  $:
                    paper-input-container:
                      $: |
                        .underline::after {
                          content: "{{relative_time(states[config.entity].last_changed)}} ago";
                          font-size: var(--paper-font-caption_-_font-size);
                          color: var(--secondary-text-color);
                        }
                      .: |
                        paper-input-container {
                          padding-bottom: 20px;
                        }

---

Also, any text may be added:

Code

  - entity: input_select.test_value
    card_mod:
      style: |
        ha-select::after {
          content: "Sun: {{states('sun.sun')}}";
          font-size: var(--paper-font-caption_-_font-size);
          color: magenta;
          padding-left: 12px;
        }
  - entity: input_select.test_value
    card_mod:
      style: |
        ha-select::after {
          content: "Sun: {{states('sun.sun')}}\A Elvn: {{state_attr('sun.sun','elevation')}}";
          font-size: var(--paper-font-caption_-_font-size);
          color: magenta;
          padding-left: 12px;
          display: block;
          white-space: pre;
        }

[maxym]

Hello
I could probably discuss it on general forum, or maybe even on github as issue of mentioned cards. But I can feel I will get more usefull help over here.

I’ve found, Weather card doesn’t play well with grid card set to square. It looks like weather card can force size of grid ignoring square size.

Is there a systematic way how to instruct weather card to not expand grid card? Likely I could change sizes of weather elements or hiding them, but this might (and ussually does) ends with some differences in presention on different devices.

BTW Example below shows a way of achieving colspan in built-in grid card (I heven’t seen it yet on this forum. Maybe someone will find it useful)

  - title: layout3
    path: layout3
    badges: []
    cards:
      - type: custom:mod-card
        style:
          hui-grid-card:
            $:
              div: |
                *:first-child {grid-area: 1 / 1 / 1 / 3 !important}
        card:
          type: grid
          square: true
          columns: 3
          cards:
            - type: entity
              entity: light.all_lights
            - type: entity
              entity: light.all_lights
            - type: entity
              entity: light.all_lights
            - type: entity
              entity: light.all_lights
            - type: entity
              entity: light.all_lights
            - type: entity
              entity: light.all_lights
      - type: custom:mod-card
        style:
          hui-grid-card:
            $:
              div: |
                *:first-child {grid-area: 1 / 1 / 1 / 3 !important}
        card:
          type: grid
          square: true
          columns: 3
          cards:
            - type: weather-forecast
              entity: weather.domov
            - type: entity
              entity: light.all_lights
            - type: entity
              entity: light.all_lights
            - type: entity
              entity: light.all_lights
            - type: entity
              entity: light.all_lights
            - type: entity
              entity: light.all_lights

If I embed all other entities into custom:button-card with aspect_ratio: 1 / 1 (which is my goal) then it’s even more vissible that grid is being streached out.

Setting aspect_ratio to 2:1 for weather card doesn’t help in 100%. It results in some difference in height, probably because total horizontal size contain padding between cards, so calculated height is few pixels greater than needed (which is issue of button card rather than weather or grid)

[kat]

Hi, I’m trying to style “multiple rows” icon with input select state: How could I make it less verbose?
Condition is made on nth-child. I tried to put the state directly in nth-child({{state}}) but it seems not to work.
Result should be like this:

          - entity: input_select.flap
            name: Chattière
            type: custom:multiple-entity-row
            icon: mdi:cat
            show_state: false
            state_color: true
            debug_cardmod: true
            card_mod:
              style: 
              style: 
               .entities-row .entity:nth-child(1) state-badge:
                  $: |
                    :host {
                      --paper-item-icon-color: 
                      {% if is_state('input_select.flap', '1') %}
                        var(--primary-color)
                      {% else %}
                        var(--switch-unchecked-button-color)
                      {% endif %}
                    } 
                .entities-row .entity:nth-child(2) state-badge:
                  $: |
                    :host {
                      --paper-item-icon-color: 
                      {% if is_state('input_select.flap', '2') %}
                        var(--primary-color)
                      {% else %}
                        var(--switch-unchecked-button-color)
                      {% endif %}
                    } 
                .entities-row .entity:nth-child(3) state-badge:
                  $: |
                    :host {
                      --paper-item-icon-color: 
                      {% if is_state('input_select.flap', '3') %}
                        var(--primary-color)
                      {% else %}
                        var(--switch-unchecked-button-color)
                      {% endif %}
                    } 
                .entities-row .entity:nth-child(4) state-badge:
                  $: |
                    :host {
                      --paper-item-icon-color: 
                      {% if is_state('input_select.flap', '4') %}
                        var(--primary-color)
                      {% else %}
                        var(--switch-unchecked-button-color)
                      {% endif %}
                    } 

Kind regards

[sxbcl]

Hi,
In a picture-element card I am trying to style a state-icon of a fan with card-mod.
I followed these examples but it only works when I apply the css for the whole card and it doesn’t when I do it just for one entity.
What am I doing wrong?

type: picture-elements
image: /local/home/basement/basement_night.png
style: |
  ha-card {
    height: 250px !important;
  }
elements:
  - type: state-icon
    entity: light.exoteriko_phos_up
    tap_action:
      action: toggle
    style:
      top: 26%
      left: 20%
    card_mod:
      style:
        state-badge:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: red;
                  animation: rotation 0.5s linear infinite
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }

[Ildar_Gabdullin]

@sxbcl

What am I doing wrong?

Hard to say.
Copy/pasted your code , it works in my setup:

type: picture-elements
image: /local/images/blue.jpg
style: |
  ha-card {
    height: 100px !important;
  }
elements:
  - type: state-icon
    entity: light.virtual_light_1
    tap_action:
      action: toggle
    style:
      top: 15%
      left: 20%
    card_mod: &ref_0
      style:
        state-badge:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  color: red;
                  animation: rotation 0.5s linear infinite;
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }
  - type: state-icon
    entity: sun.sun
    style:
      top: 15%
      left: 50%
    card_mod: *ref_0
  - type: state-icon
    entity: input_boolean.test_boolean
    icon: mdi:account
    style:
      top: 15%
      left: 80%
    card_mod: *ref_0

[sxbcl]

Sorry for the stupid question, but what is &ref_0 ?
I don’t have it in my code

[klogg]

I have something that at some point stopped showng all the styles but I am not sure when. It wasn’t long ago…

I’m styling a custom:multiple-entity-row using this:

  card_mod:
    style: |
      :host {
        --paper-item-icon-color: rgba(255, 155, 0);
      }

Ok, that’s not the full picture, the entire config is below.

Yeah, it’s probably a bit niche but hopefully someone can tell me why it has stopped working?

type: custom:config-template-card
variables:
  - states['sensor.heating_{{ floor }}_active_schedule_number'].state
entities:
  - sensor.heating_{{ floor }}_active_schedule_number
  - input_boolean.heating_{{ floor }}_schedule{{ schedule }}_enabled
  - input_datetime.heating_{{ floor }}_schedule_time{{ schedule }}
  - input_number.heating_{{ floor }}_schedule_temperature{{ schedule }}
  - input_boolean.heating_{{ floor }}_schedule{{ schedule }}_turn_on
  - input_boolean.heating_{{ floor }}_schedule{{ schedule }}_turn_off
card:
  type: custom:multiple-entity-row
  entity: input_boolean.heating_{{ floor }}_schedule{{ schedule }}_enabled
  name: '{{ floor | title }} Time {{ schedule }}'
  icon: "${ vars[0] == {{ schedule }} ? 'mdi:arrow-right-bold' : '' }"
  toggle: true
  state_header: Enabled
  entities:
    - entity: input_boolean.heating_{{ floor }}_schedule{{ schedule }}_turn_on
      toggle: true
      name: 'Turn ON'
    - entity: input_boolean.heating_{{ floor }}_schedule{{ schedule }}_turn_off
      toggle: true
      name: 'Turn OFF'
    - entity: input_datetime.heating_{{ floor }}_schedule_time{{ schedule }}
      name: Time
    - entity: input_number.heating_{{ floor }}_schedule_temperature{{ schedule }}
      name: Temperature
card_mod:
  style: |
    :host {
      {% raw %}
      {% set schedule = {% endraw %} {{ schedule }} {% raw %} %}
      {% set floor = {% endraw %} '{{ floor }}' {% raw %} %}
      {% if schedule == states('sensor.heating_' ~ floor ~ '_active_schedule_number') %}
        --paper-item-icon-color: rgba(255, 155, 0);
      {% elif states('input_boolean.heating_' ~ floor ~ '_schedule' ~ schedule ~ '_enabled') == 'on' %}
        --paper-item-icon-color: var(--accent-color);
      {% else %}
        color: var(--secondary-text-color);
        --paper-item-icon-color: var(--secondary-text-color);
      {% endif %}
      {% endraw %}
      ;
    }

I used to get colors for the icons.
The arrow would be rgba(255, 155, 0)
The numbers in circles would be var(--accent-color) but only if Enabled.
Else the whole line was var(--secondary-text-color)

[Ildar_Gabdullin]

@sxbcl

I don’t have it in my code

Yaml anchors to reduce repeating code
I used it to add the same style for 2 more elements.

[rysm83]

I’m looking to change the entity icon based on a template state change, but nothing changes. If I can get this working I wanted to add this to one of my swipe cards.
The idea is to have an indication of if the doors are closed then the icon will show one icon and if the doors are open the the icon will change and may place in some text as well displaying which door has opened

type: entity
entity: group.doors
card_mod:
  style: |
     ha-card {
        --card-icon:  
            {% if states('group.door') == 'on' %} mdi:shield-off-outline
            {% else %} mdi:shield-outline
            {% endif %};
     }

[arganto]

Tried this and it didn’t work either. As described above it was working till 20.10.x. Afterwards only with this curious additional $: And on card level, as in your recommendation, I didn’t get this work.

What changed with 2010.x. in the way it is working?
What happens with this additional $: on same level?
How would it work on card level as in your recommendation instead restriction card level?

[Ildar_Gabdullin]

@arganto

Tried this and it didn’t work either.

At least show us the code where you tried to achieve the result, may be people will help you.