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

[Ildar_Gabdullin]

At least w/o Layout card everything is aligned:

type: vertical-stack
cards:
  - type: entities
    entities:
      - sun.sun
      - sun.sun
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:home-roof
      - type: custom:button-card
        icon: mdi:floor-plan
      - type: custom:button-card
        icon: mdi:youtube-tv
      - type: custom:button-card
        icon: mdi:server
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:home-roof
      - type: custom:button-card
        icon: mdi:youtube-tv
      - type: custom:button-card
        icon: mdi:server
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:youtube-tv
      - type: custom:button-card
        icon: mdi:server

[thecobra666]

Could anyone explain why this is not working?

I want to change the state color text based on the state of it.

type: entities
entities:
  - entity: sensor.screen_sensor_opslagkamer
style: |
      :host {
        color:
          {% if (states.binary_sensor.screen_grote_slaapkamer_contact == 'On')}
            red
          {% else %}
            green
          {% endif %}
      }

[Ildar_Gabdullin]

Wrong indentation (at least).
:host should be used for a row, not for a whole card.

[thecobra666]

When I do it like this:

type: entities
entities:
  - entity: sensor.screen_sensor_opslagkamer
    style: |
     :host {
       color:
        {% if (states.binary_sensor.screen_grote_slaapkamer_contact == 'On')}
          red
        {% else %}
          green
        {% endif %}
     }

It errors out with:

Configuratiefouten ontdekt:

• Verplichte sleutel “entities.0.type” ontbreekt.
• Verplichte sleutel “entities.0.name” ontbreekt.
• Verplichte sleutel “entities.0.tap_action” ontbreekt.
• Verplichte sleutel “entities.0.tap_action” ontbreekt.
• Verplichte sleutel “entities.0.tap_action” ontbreekt.
• Verplichte sleutel “entities.0.tap_action” ontbreekt.
• Verplichte sleutel “entities.0.tap_action” ontbreekt.
• Verplichte sleutel “entities.0.type” ontbreekt.

[Kabala (Cata)]

Hi everyone,

what am I doing wrong?
I want the icon to change at 50%

type: glance
entities:
  - entity: cover.shellyswitch25_ba854b
    style: |
      :host {
        --card-mod-icon:
          {% if is_state_attr(config.entity, "current_position", "50") %}
          mdi:check-circle
          {% else %}
          mdi:alert-circle
          {% endif %};
        }

[Ildar_Gabdullin]

@thecobra666

It errors out with:

Add card_mod, otherwise it started giving an error:

Card-mod - Add css styles to any lovelace card

Is anyone seeing this? Started after next HA update. [image] Cannot save the card. How to solve: use "card_mod" keyword. But we MAY NOT use the "card-mod" keyword for styling for most cases (i.e. except for styling elements inside Picture elements), yes? Update 19.11.21: at least at 2021.11.4 do not observe this behaviour; now it is possible to save the card even w/o specifying card_mod keyword.

In short:

1. It was required to use only "style" keyword before card-mod 3.0.
2. Starting from card-mod 3.0, the new "card_mod" keyword was added to enable card-mod where it did not work before (but the old notation was supposed to be still working).
3. Recently HA was updated and the Editor started giving an error if no "card_mod" keyword is specified. But the old notation (w/o "card_mod" keyword ) still works - you just cannot save changes in the Editor!

[Ildar_Gabdullin]

@Kabala

what am I doing wrong?

You specified the same icon for all conditions.

@Kabala

I want the icon to change at 50%

Try using search here or at least read the 1st post: 🔹 Card-mod - Add css styles to any lovelace card - #1238 by Ildar_Gabdullin

[Kabala (Cata)]

Hi sorry, I don’t understand.
I read the 1st post, but can’t get any further.
I would like to display another icon when the roller blind is open at 50%.

[Ildar_Gabdullin]

@Kabala

I read the 1st post, but can’t get any further.

So there is a link on the 1st post to another post which contains a list of styles.
Try a bit at least.

[Kabala (Cata)]

@Ildar_Gabdullin

So there is a link on the 1st post to another post which contains a list of styles.
Try a bit at least.

If you meant the two links, unfortunately I haven’t found anything that can help me.
Nothing with state_attr.
Icon color is not a problem, but I want to display a different icon using the attributes.
And there is nothing, except via icon_template.

[Ildar_Gabdullin]

@Kabala

a different icon

Sorry if I misunderstood you.
This can be done by:

• template sensor
• Custom UI
• config-template-card

As for me, I know nothing about changing an icon by card-mod. By using card-mod you may change icon color, icon size.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

changing an icon by card-mod

see: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

  - type: entities
    title: Snapshots
    entities:
      - entity: sensor.snapshot_backup
        card_mod:
          style: |
            :host {
              --card-mod-icon:
                {% if states(config.entity) == 'backed_up' %} mdi:check-circle
                {% else %} mdi:alert-circle
                {% endif %};

              --paper-item-icon-color:
                {% if states(config.entity) == 'backed_up' %} green
                {% else %} red
                {% endif %};
            }

[arganto]

@Ildar_Gabdullin

+ undocumented feature for "secondary_info":

  - entity: sun.sun
    secondary_info: true
    style:
      hui-generic-entity-row:
        $: |
          .info .secondary {
            color: red;
          }

Any idea, why

secondary_info: true

is not working here? With this, I cannot save the card and see lot’s of errors.

[Ildar_Gabdullin]

Because of this, probably:

Card-mod - Add css styles to any lovelace card

Add card_mod, otherwise it started giving an error: In short: It was required to use only "style" keyword before card-mod 3.0. Starting from card-mod 3.0, the new "card_mod" keyword was added to enable card-mod where it did not work before (but the old notation was supposed to be still working). Recently HA was updated and the Editor started giving an error if no "card_mod" keyword is specified. But the old notation (w/o "card_mod" keyword ) still works - you just cannot save changes in the…

[arganto]

Aaaah. Yes. Was not aware, that it only works with card_mod. Even without this completely, I got the errors. With card_mod and new notation, it is working. Great.

Update: No, not the root cause. It worked once. Back in edit mode, the errors are there again.

O.k. If I use something different than true or false, e.g. a or tru or … it is working without errors at the moment.

[Ildar_Gabdullin]

It was clearly specified “undocumented feature” - i.e. probably it is not supposed to work and it may stop working one day.
Here is a picture from my setup:

You can see that:

• the style works
• there are errors

I bet that if you are in yaml-mode and create a card with this code then the card will work.
These are Editor issues. The Editor performs syntax checks and gives errors if smth is not as per syntax rules. But as we can see these wrong code works))).

[Pelican]

Hi everybody
I have a few RGB downlighters on my verandah that are working great and I would like to display (not change) their status as a bunch of icons only in Lovelace. The native Button card works well and it updates the colour of the icon to match the colour of the light. My problem is I need to remove the background and the shadow. My CSS skills are non-existent, so I was unable to apply Card-mod to the Button card. Just to be clear, I tried this on the vanilla Lovelace Button card. Romrider’s custom button card is incredible, but it doesn’t follow the colour of the light, so it won’t work for my application.

The closest I could get using the Button card was to stack them in the “custom:vertical-stack-in-card”, but it still doesn’t remove all the shadows. It looks like this:

and the Yaml looks like this (up to the first light):

          - type: custom:vertical-stack-in-card
            horizontal: true          
            cards:
              - entity: light.verandah
                type: 'custom:button-card'          
                size: 60px               
                show_name: false 
                tap_action:
                  action: toggle  
              - type: custom:vertical-stack-in-card
                cards:
                  - type: custom:vertical-stack-in-card
                    horizontal: true
                    cards:                
                        - type: button
                          entity: light.vo2p  
                          icon_height: 30px
                          show_name: false

So as you can see, it is close, but not there.

Next stop was to use the excellent custom:paper-buttons-row. It formats beautifully, but it doesn’t follow the colour. I set the icon colour with a template and it looks great, but it only updates on page reloads. I will also have to manage the colours with some more templating when the RGB attributes drop away.

Here is the yaml up to the first light:

          - type: custom:vertical-stack-in-card
            horizontal: true          
            cards:
              - entity: light.verandah
                type: 'custom:button-card'          
                size: 60px               
                show_name: false 
                tap_action:
                  action: toggle  
              - type: entities
                entities:
                  - type: custom:paper-buttons-row
                    buttons:
                      - - entity: light.vo2p
                          layout: icon
                          style:
                            button:
                              color: >-
                                 rgb({{(states.light.vo2p.attributes.rgb_color[0] | int)}},{{(states.light.vo2p.attributes.rgb_color[1] | int)}},{{(states.light.vo2p.attributes.rgb_color[2] | int)}})

So my question are:

1. Is it possible to remove the background and shadow of the native Lovelace Button card with Card-mod? If it is, I would really appreciate a small example.
2. If not, is it possible to update the card (maybe every 10 s or so)?
3. If somebody managed to achieve this in some other way, please let me know.

[arganto]

@Ildar_Gabdullin

You can see that:

• the style works
• there are errors

I bet that if you are in yaml-mode and create a card with this code then the card will work.
These are Editor issues. The Editor performs syntax checks and gives errors if smth is not as per syntax rules. But as we can see these wrong code works))).

• the style works

even not this. Most of the time, this is not the case as well and I have only a greyed out card with a ircle. And you are not able to save with these errors.

But anyway, as long it is working with foo or bar or tru or whatever <> true/false, is is finefor me for now.

[Ildar_Gabdullin]

@arganto

even not this. Most of the time, this is not the case as well and I have only a greyed out card with a ircle. And you are not able to save with these error

Did not understand you. But as long as it is fine for you - OK

[Ildar_Gabdullin]

Styling stack-in-card (specially for @Jens_Wymeersch):
Similar to vertical-stack:

type: 'custom:stack-in-card'
title: Some title
keep:
  background: true
  box_shadow: true
  margin: true
  outer_padding: true
  border_radius: true
cards:
  - type: entities
    entities:
      - entity: sun.sun
      - entity: sun.sun
    card_mod:
      style: |
        ha-card {
          height: 200px !important;
        }
  - type: entity
    entity: sun.sun
    card_mod:
      style: |
        ha-card {
          height: 150px !important;
        }
card_mod:
  style: |
    ha-card {
      border-style: solid;
      border-width: 5px;
      border-radius: 10px;
  
      background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
  
      --ha-card-header-color: white;
      --ha-card-header-font-size: 40px;
  
      height: 550px !important;
  
      --vertical-stack-card-margin: 0px 20px 80px 20px;
  
      --ha-card-background: rgba(50,50,50,0.3);
    }