Trying to use the CSS-style with the custom:auto-entities card. The custom:auto-entities card as standalone card works as a basic card, but from the documentation I understand itâs not a full featured Lovelace card on its own.
Using the custom: auto-entities with the standard entity card, and then the CSS-style should work(?), but I canât wrap my head around how it should work. Any ideas how to change icon color?
First of all, why are you putting an entities card inside auto-entities inside an entities card?
There are valid reasons to do this, but if you donât have to, you shouldnât.
From the lovelace-card-mod documetation:
âWhy wonât this work for some cards?â
âŠauto-entities and state-switch among others.
Common for all those are that they have no ha-card element. A workaround for this is to put the card you want inside an entities card and mod that. For built-in cards, this can be done by setting the type of an entities row to custom:hui--card:
So then using the standard entities-card, inside this using the auto-entities-card, then using CSS-mod on the entities-card or the auto-entities-card, does not work for me.
I must admit I donât get it and donât understand the documentation. Is it at all possible what I am trying using the card-mod somehow with the auto-entities card?
- title: Test Card
cards:
- type: custom:auto-entities
card:
type: entities
title: Sensor Battery Status
show_header_toggle: false
filter:
include:
- entity_id: sensor.*_battery_level
options:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) | int > 20 and states(config.entity) | int < 90 %}
orange
{% elif states(config.entity) | int < 20 %}
red
{% else %}
green
{% endif %}
;
}
exclude:
- state: '100'
sort:
method: state
reverse: true
A new feature of card_mod has just been released:
mod-card lets you also add styles to card which donât have a ha-card element, such as stacks, conditional, auto-entities and layout-card et al.
type: custom:mod-card
style: |
ha-card {
border: 1px solid green;
}
card:
type: vertical-stack
cards:
- type: light
entity: light.bed_light
- type: light
entity: light.kitchen_lights
Got it woking : )
The default --paper-item-icon-color has become black and not standard HA blue on browser Google Chrome and Safari (cache emptied).
include:
- entity_id: sensor.fib_*_battery_level
options:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity)|int < 35 %}
orange
{% elif states(config.entity)|int < 20 %}
red
{% endif %}
;
(auto-entities 1.2 and card-mod 10)
UPDATE:
This gives the default icon color:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity)|int < 35 %}
orange
{% elif states(config.entity)|int < 20
red
{% else %}
var( ---state-icon-color )
{% endif %};
}
Hello
I have an input Boolean with an MDI Icon and I would like that Icon to go yellow when on (like any other switch/light in lovelace glance card).
It seems itâs not supported and not possibleâŠ
If I could put this input boolean in a light group, it would solve my issue but I donât think I canât do that either 
Do you have any suggestion ?
Thank you !
I tried for weeks to make that work as well but the element it uses seems it canât be styledâŠ
use this in customize_glob:
input_boolean.*:
templates:
icon_color: >
if (state === 'on') return 'rgb(251, 210, 41)';
return 'rgb(54, 95, 140)';
this of course needs custom-ui to be installedâŠ
I know itâs possible in custom_ui but thatâs not what this thread is about and Iâm not going down that path.
Seriously though, thereâs a piece of example code in the README that does almost exactly thisâŠ
Yes and it still doesnât work even after extensive consultations with you in this very thread and on discord. IT DOESNâT WORK!!!
Then I must be misunderstanding the problem.
Could you please link me to where in the thread we discussed this?
type: glance
entities:
- entity: input_boolean.my_switch
style: |
:host {
--paper-item-icon-color: var({% if is_state(config.entity, "on") %} --state-icon-active-color{% else %} --state-icon-color {% endif %});
}
tap_action:
action: toggle
Edit:
It seems I didnât clearly announce this feature in this thread.
Since August 27th youâve been able to style entity card rows and glance card buttons separately.
would really be magic if we could do so globally, and not have to style each and every single time in each single card in Lovelace.
I appreciate the fact that one day custom-ui might be no longer supported in HA, but would hope a modern replacement for that would be possible.
Would you be able to see, and maybe even create such an option/plugin/mod?
I migrated from card-modder to card-mod the last couple of days and I ran into something I canât figure out yet. Perhaps somebody can point me in to the right direction. Iâve the following code
card:
cards:
- entity: light.lampen_eettafel
hold_action:
action: more-info
icon: 'mdi:track-light'
name: Eettafel
tap_action:
action: toggle
type: 'custom:button-card'
- entity: light.lampen_banken
hold_action:
action: more-info
icon: 'mdi:track-light'
name: Banken
tap_action:
action: toggle
type: 'custom:button-card'
type: horizontal-stack
style: |
ha-card {
--paper-card-background-color: rgba(0, 0, 0, 0.3);
--primary-text-color: rgb(255,250,250);
--secondary-text-color: rgb(255,250,250);
}
type: 'custom:mod-card'
This shows up well, but when I push the button, the light does change in real life but in lovelace it stills shows the state before I pushed the button. When I reload the page it gives the actual state again. Could anyone point out what Iâm doing wrong?
An hour later, i figured I had to put the style option in the card and not in the the horizontal stack itself, makes sense though. So for those whoâre struggeling like I did. This was the correct code
cards:
- entities: null
entity: light.lampen_eettafel
hold_action:
action: more-info
icon: 'mdi:track-light'
name: Eettafel
tap_action:
action: toggle
type: 'custom:button-card'
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.3);
--primary-text-color: rgb(255,250,250);
}
- entities: null
entity: light.lampen_banken
hold_action:
action: more-info
icon: 'mdi:track-light'
name: Banken
tap_action:
action: toggle
type: 'custom:button-card'
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.3);
--primary-text-color: rgb(255,250,250);
}
type: horizontal-stack
My bad.
Release 11 fixes mod-card.
Got it to work!
My problem was in the Raw config editor:
resources:
thx
THANK YOU!!! Iâd been fighting with this stupid thermostat for hours, couldnât figure out why the css wouldnât stick. The !important at the end fixed it!
Youâre welcome. I am not sure that !important is best practice but sometimes for me it is the only one possibility.
Iâm hoping thereâll be a redesign of the thermostat for 0.102âŠ