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

[kucerazdenek]

Hi,

hopefully anyone will be able to help me. Trying to redesign my HA home dashboard, and would like to use single entity for each light to toggle it and see the consumption (sensor state), but only when light is on. Otherwise sensor state should be hidden.

Here is example of my code in glance card, which does not work (resp. everything works expect state hiding when light is off:

show_name: true
show_icon: true
show_state: true
type: glance
entities:
 - entity: sensor.shellyplus1pm_xxxxxxxxxxx_switch_0_power
    name: Garage
    tap_action:
      action: call-service
      service: homeassistant.toggle
      target:
        entity_id: light.garage_light_switch_0
    double_tap_action:
      action: more-info
    card_mod:
      style: |
        .entity-value {
          visibility: {% if states('light.garage_light_switch_0') == 'off' %} hidden {% else %} visible {% endif %};
        }		

I found this and tried to apply it, but no luck…

Use {% if ... %} to conditionally apply CSS styles. In this case, visibility: hidden hides the state, but keeps the space reserved. If you want to remove it entirely, use display: none.

Thanks a lot for your help!
Zdenek

[jegres]

Hi guys,
Maybe someone could check my code, please and tell me what is wrong here. The color of the room should change with color of my IKEA-bulb, but it doesn´t

type: picture-elements
image: /local/floorplan/base.png
elements:
  - type: conditional
    conditions:
      - entity: light.tradfri_light
        state: "on"
    elements:
      - type: image
        tap_action:
          action: none
        hold_action:
          action: none
        entity: light.tradfri_light
        image: /local/floorplan/light.tradfri_light.png
        style:
          filter: |-
            [[[ 
              'hue-rotate(' + (states['light.tradfri_light'].attributes.hs_color ? states['light.tradfri_light'].attributes.hs_color[0] : 0) + 'deg) saturate(' + (states['light.tradfri_light'].attributes.hs_color ? states['light.tradfri_light'].attributes.hs_color[1] : 100) + '%)'
            ]]]
          opacity: |-
            [[[ 
              (states['light.tradfri_light'].attributes.brightness || 0) / 255 
            ]]]
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten

  - type: state-label
    entity: light.tradfri_light
    attribute: brightness
    style:
      top: 60%
      left: 50%

  - type: state-label
    entity: light.tradfri_light
    attribute: hs_color
    style:
      top: 65%
      left: 50%

  - type: state-icon
    entity: light.tradfri_light
    title: null
    style:
      top: 65.71%
      left: 74.32%
      border-radius: 50%
      text-align: center
      background-color: rgba(255, 255, 255, 0.3)
    tap_action:
      action: toggle

fixed values are working fine.

style:
  filter: hue-rotate(30deg) saturate(100%)
  opacity: 0.5

added the state values to check if they are displayed correctly

[Ildar_Gabdullin]

@kucerazdenek

    card_mod:
      style: |
        .entity-value {

Where have you taken this code?
Is it taken from reddit, chatgpt etc?
Please go to the 1st post of this thraed → link at the bottom titled “fantastic” → Glance card, use these examples as a starting point.

[Ildar_Gabdullin]

@jegres

        style:
          filter: |-
            [[[ 
              'hue-rotate(' + (states['light.tradfri_light'].attributes.hs_color ? states['light.tradfri_light'].attributes.hs_color[0] : 0) + 'deg) saturate(' + (states['light.tradfri_light'].attributes.hs_color ? states['light.tradfri_light'].attributes.hs_color[1] : 100) + '%)'
            ]]]

This is wrong, you are using smth looking like a JS code from some custom card like button-card.
Go to the 1st post of the thread → link at the bottom titled “fantastic” → picture-elements

[jegres]

okay, thanks . i just simplified the code and changed it, but unfortunately without success…

        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
          filter: >-
            hue-rotate({{ state_attr('light.tradfri_light', 'hs_color')[0] | int
            }}deg) saturate(100%)
          opacity: "{{(state_attr('light.tradfri_light', 'brightness') / 255)}}"

in the Template I get the right values

[kucerazdenek]

(post deleted by author)

[kucerazdenek]

Yes, it was taken from ChatGPT. Could you please be more specific with examples? I passed through topics and did not found anything helpful for first look. My point is to have entity in Glance card with consumption when turned on:

and without consumption when turned off:

[Ildar_Gabdullin]

@jegres

in the Template I get the right values

But Picture elements card does not support templates.
Already told you where to find.

[Ildar_Gabdullin]

@kucerazdenek

Could you please be more specific with examples?

What could be more specific than a link to a post with examples? You got wrong card-mod code, I told you where to find a proper one.

[kucerazdenek]

(post deleted by author)

[kucerazdenek]

I tried to say, that I did not find example how to conditionally hide entity state.

[Ildar_Gabdullin]

I see, assume a proper code to address some element is

card_mod:
  style: |
    some_element {
      ...
    }

(the simplest case w/o shadow Root)
So to change some css property (color, visibility etc):

card_mod:
  style: |
    some_element {
      {% if ... -%}
      some_css_property: ...;
      {%- else -%}
      some_css_property: ...;
      {%- endif %}
    }

Since in your initial post there was a wrong DOM path - using provided examples you may define a valid DOM path & then use an appropriate CSS property.
I usually use “display: none” to hide an element, know nothing about a “visibility” property. This might help you.

[kucerazdenek]

@Ildar_Gabdullin

some_element

Thanks a lot for your help!

      div:nth-child(3) {
          visibility: {% if states('light.garage_light_switch_0') == "off" %} hidden {% else %} visible {% endif %};
        }		

did the trick!

[Mariusthvdb (Marius)]

hide a state in Glance is not straightforward.
I ended up using stuff like this:

            - entity: sun.sun
              card_mod:
                style: |
                  state-badge {
                    display: none;
                  }
                  :host div {
                    display: none;
                  }

to create an empty placeholder.

If you want to reshuffle the glance items, it might be even more complex

fwiw, setting your mod on the entity:

            - entity: sun.sun
              card_mod:
                style: |
                  :host div {
                    visibility: hidden;
                  }

does not remove the icon, only name and state

[kucerazdenek]

Thanks Marius, I finally managed it with help of Ildar. This works like a charm, hiding state value only:

        div:nth-child(3) {
          visibility: {% if states('light.garage_light_switch_0') == "off" %} hidden {% else %} visible {% endif %};
        }		

[Mariusthvdb (Marius)]

right, so you Want to only hide the state value, not the entire entity…

in that case you can set the mod on the entity directly, and dont need the nth child construction

(I now see we crossposted above…)

[kucerazdenek]

Correct, but conditionally. When light is turned off, I don’t want to show state, but when on, it shows the consumption.
Could you provide me an example please? My current entity config is as follows:

  - entity: sensor.shellyplus1pm_xxxxxxxxxxxxxxx_switch_0_power
    name: Garage
    tap_action:
      action: call-service
      service: homeassistant.toggle
      target:
        entity_id: light.garage_light_switch_0
    double_tap_action:
      action: more-info
      entity: light.garage_light_switch_0      
    card_mod:
      style: |
        :host {
          color: {% if states("light.garage_light_switch_0") == "on" %} gold {% else %} gray {% endif %};
          --card-mod-icon-color: {% if states("light.garage_light_switch_0") == "on" %} gold {% else %} lightskyblue {% endif %};
          --card-mod-icon: {% if states("light.garage_light_switch_0") == "on" %} mdi:lightbulb {% else %} mdi:power-standby {% endif %};
        }        
        div:nth-child(3) {
          visibility: {% if states('light.garage_light_switch_0') == "off" %} hidden {% else %} visible {% endif %};
        }		

[Ildar_Gabdullin]

@Mariusthvdb

o create an empty placeholder.

Hmm, I would make it almost invisible instead.
I do not like when elements change their place… Ageing probably)))

[Mariusthvdb (Marius)]

tbh, I really believe you should be using another card, if you want as much change like that.

You are showing a light, which in HA will show its color and brightness natively upon change, so imho, no need to set a mod on that.

I can see why one would use a different icon, so yeah, I guess you could to that using card_mod.

all of these are native options in eg custom:button-card, why no use that, and use a core type: grid to show your lights including their brightness:

sure, this is a very mature button-card template, but it has been working for the last 5 years No issue with card_mod at all, all native inside the button-card options

cut it short: my advice would be to use the card that matches your requirements as closely as possible. Use card_mod there where nothing else will do the job. Or when really straightforward.

as for this

@kucerazdenek

Could you provide me an example please?

I already did in the post above:

@Mariusthvdb

            - entity: sun.sun
              card_mod:
                style: |
                  :host div {
                    visibility: hidden;
                  }

just use your template there, replacing the now fixed hidden and it should do what you want, on the entity itself

[Mariusthvdb (Marius)]

haha, yes, well, my example was only used in a config where I needed 2 rows of 4 columns, and the top row only displayed 3 entities, so I needed that empty placeholder fixed.

this was the only way of doing that at the time, and, considering what I just tested with the visibility property, it still is.

Btw, I did put in (edit…) a WTH for conditional in Glance, like we can do in entities: WTH, why cant we use a type conditional in Glance

it would solve a lot of trouble we experience here