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

xordi · October 16, 2021, 2:56pm

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 · October 18, 2021, 8:47am

Any ideas on this? Perhaps card_mod grandmaster Ildar?

Ildar_Gabdullin · October 18, 2021, 11:18am

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 · October 18, 2021, 11:37am

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

arganto · October 18, 2021, 6:29pm

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

e-raser · October 19, 2021, 9:24pm

(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 · October 19, 2021, 11:17pm

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 · October 20, 2021, 10:36am

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 · October 20, 2021, 4:29pm

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 · October 22, 2021, 12:15pm

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 · October 22, 2021, 12:35pm

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

qaz

sxbcl · October 22, 2021, 12:49pm

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

klogg · October 22, 2021, 1:07pm

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 · October 22, 2021, 1:36pm

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

rysm83 · October 22, 2021, 3:47pm

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 · October 23, 2021, 2:08pm

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 · October 23, 2021, 7:25pm

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

Ildar_Gabdullin · October 23, 2021, 7:32pm

Sorry, but what is this? This is not a part of config-template-card…

arganto · October 23, 2021, 8:36pm

Will do so, but do you have ideas regarding:

What changed with 2010.x. in the way it is working?
What happens with this additional $: on same level, with which it is (only) working now.

  - type: custom:restriction-card
    card_mod:
      style:
        $:
        hui-cover-entity-row:
          $:
            hui-generic-entity-row:
              $:
                state-badge:
                  $:
                    ha-icon:
                      $: |
                        ha-svg-icon {
                          {% if state_attr('cover.rolladen_kinderzimmer', 'current_position')|int < 100 %}
                            color: var(--hilf-color);
                          {% else %}
                            color: var(--hilf-active-color);
                          {% endif %}
                        }

As this is working now, but was not needed before, I really like to know the background. This was the background of my question above, not to have another solution as you have suggested putting on another level.

Ildar_Gabdullin · October 23, 2021, 9:35pm

I have never seen using this construction:

    card_mod:
      style:
        $:
        some_element:

I think only the author of card-mod can answer your question.
Register an issue on Github.

As for me, I am using restriction-card only inside a decluttering template where styling is done w/o any issues.