I am experiencing a strange behaviour for my entities cards.
When I have an entities card with my climate entities, the card is not themed properly for the climate entities with state āunknownā (you can see becaue temperature is ā0ā instead of the minimum 4.5).
Can anybody think of a reason why?
As soon as entities are no longer in state āunknownā, the mod works again.
hmā¦ maybe, someone can give me a short hint, whatās wrong with this mod?
cards:
- type: tile
entity: lock.eingang_treppenhaus_caina_locked_all
vertical: true
name: Beidseitig
card_mod:
style: |
ha-card {
{% if is_state('config.entity', 'locked') %}
--tile-color:var(--red-color) !important;
{% elif is_state('config.entity', 'unlocking') %}
--tile-color:var(--amber-color) !important;
{% elif is_state('config.entity', 'locking') %}
--tile-color:var(--amber-color) !important;
{% elif is_state('config.entity', 'unlocked') %}
--tile-color:var(--green-color) !important;
{% endif %}
}
the LOCK should be shown in green when unlocked - and red, when it is locked.
The template itself is working as expected, based on the template editor:
{% if is_state('lock.eingang_treppenhaus_caina_locked_all', 'locked') %}
--tile-color:var(--red-color) !important;
{% elif is_state('lock.eingang_treppenhaus_caina_locked_all', 'unlocking' or 'locking') %}
--tile-color:var(--amber-color) !important;
{% elif is_state('lock.eingang_treppenhaus_caina_locked_all', 'locking') %}
--tile-color:var(--amber-color) !important;
{% elif is_state('lock.eingang_treppenhaus_caina_locked_all', 'unlocked') %}
--tile-color:var(--green-color) !important;
{% endif %}
RESULT
--tile-color:var(--green-color) !important;
when switching the lock, the color will be set to amber, as expected - but the state locked / unlocked are switchedā¦
with the card mod, I want to overwrite the current theme-settings for the LOCK states, which are set like this:
state-lock-jammed-color: '#DA1A32' # Ruby
state-lock-locked-color: var(--green-color) #'#4CAF50' # Green
state-lock-pending-color: var(--amber-color) # Orange
state-lock-unlocked-color: var(--red-color) #'#F44336' # Red
how could anyone, if you dont show the mod you are trying to use?
It seemed like a quite general problem, but of course happy to show the mod 
card-mod-row: |
hui-generic-entity-row {
{% if "script" in config.entity -%}
color: white;
--mdc-theme-primary: rgba(255,255,255,1);
{% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
color: white;
{% elif states(config.entity) == "on" -%}
color: white;
{% elif states(config.entity) == "off" -%}
color: grey;
font-style: italic;
{% elif states(config.entity) == "unavailable" -%}
color: dimgrey;
font-style: italic;
{% else -%}
{% endif -%}
height: 2em;
}
As you can see, none of the state conditions are met,so the minimum should be the changed spacing. But that is not applied either.
first of all, as I posted somewhere above, I would not recommend doing these complex templates on any available row in your HA frontendā¦ it will be very costly.
simply create 2 mods for script and climate, and apply those in the dashboard cards. It will be much cleaner, cheaper for the system, and more robust. it would require 1 time mod in an auto-entities card on those domainsā¦
but, if you still would want to make life difficult ;-), Id suggest taking it step by step.
first, take out the template and create a fixed mod for lets say a script entity. see if it works. for both the color and the font-style individually. or the height for that matter.
then, 1 step further, template the state for that script entity and see if things still work. If yes, then open up the template for the various domains.
btw it seems that the order in your template is incorrect, and the on/off should be nested inside the script (unless your also trying to mod things on climate being on/off)
honestly, again, why make it so difficult, while you simply use the theme colors HA provides natively? Do you really want to color all the names, instead of the icons?
why not simply use other state-colors in your theme (since you apparently already use those, that would be most robust and supported from core)
Thank you for your thoughts
I am styling all entities cards no matter how they are created or what they contain. Even slider-entity-rows.
I wanted to reduce the spacing between rows and I wanted to change color and style of the entity name, the icon and the state. The combination gives perfect visible distinction between entity states.
The alternative would have been to style all entities cards manually depnending on what the content is. That is more work and more code per card that I find less convenient to alter due to the way the editor looks on mobile devices.
I have not noticed any system lags. Of course I am not checking the loads as such ao cannot comment if the cpu usage haa increased or not. But I observed no impact so far.
It also seems irrelevant which part of the code I remove as every single part is working. I can see it working on all my different cards.
Only if I restart HA and the climate state is āunknownā the card is not modded. As soon as the state is no longer unknown, the mods work.
Hey,
thanks - sorry ā¦ I really forgot to mention, that I need the themed color schemas for other lock entities
by default, the schema is correct - unlocked should be red, because then it needs my attention (house, car-door, etc)ā¦
But for other cases, like the cat flap, the ādefaultā and normal state should be unlocked.
btw: I got it working by replacing the config.entity with the actual entities name, like Iāve used it in the template section.
I donāt really see why it did not work here - but in all other cases where I change the tiles color by using config.entityā¦ 
ā¦seems like card-mod v3.4.0, broke both sidebar-yaml and root-yaml in Theme
yes so it seems, Iāve opened an issue for that, see 3.4.0 breaks mods on card-mod-sidebar-yaml: ? Ā· Issue #330 Ā· thomasloven/lovelace-card-mod Ā· GitHub
and release 3.4.1 fixes the sidebar mods. thanks Thomas!
Can I use card-mod to hide a single view from the header (so not the sidebar, but the header that shows my views)
Just hide the corr. button.
I want the custom button card (the icon)aligned on the right.
How can I achieve this with card mod ?
Hi, having a bit of trouble with an addon I wrote called card-alexa-alarms-timers. The way itās written, it redraws the whole card every second. This is causing a flickering effect that wasnāt there a few weeks ago, so we think it might be due to the 3.4.0 or 3.4.1 update. My github for the addon is here: GitHub - Kethlak/card-alexa-alarms-timers: Card for Alexa Timers and Alarms
I am using a theme file for displaying this on my device, and the part of it that uses card-mod looks like this:
dark-theme:
card-mod-theme: dark-theme
card-mod-root: |
* {
background-color: #000000;
color: #ffffff;
}
app-header {
background-color: #660000;
}
card-mod-card: |
ha-card.alexa-timers *, ha-card.alexa-alarms *, ha-card.alexa-alarms-timers * {
font-size: 60px;
line-height: 80px;
transition: none !important;
}
ha-card.card-printer * {
text-align: center;
font-size: 60px;
line-height: 80px;
transition: none !important;
}
ha-card * {
background-color: #000000;
transition: none !important;
border: 0 none;
}
ha-card {
border: 0 none;
}
Is this syntax still valid? Am I doing something wrong? The transition section was added to prevent the whole thing from resizing every second. Maybe thereās a better way to handle that?
Hey guys.
I tried to resize the moon icon. Itās an image from a template sensor. How can I resize it (same size as the other icons)?
Is ist a state badge?
ā¦ and use the right topic. I feel, that it is not related to a theme.
title: "Home"
path: "home"
cards:
- type: 'custom:button-card'
template: card_title
name: ""
###################
## CHIPSbovenaan ##
###################
###################
## weer ##
###################
- type: 'custom:button-card'
template: card_title
name: ""
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: chip_temperature
variables:
ulm_chip_temperature_outside: sensor.outdoor_temperature
ulm_chip_temperature_inside: sensor.indoor_temperature
ulm_chip_temperature_weather: weather.forecast_home
tap_action:
action: navigate
navigation_path: weer
###################
## zonnepanelen ##
###################
- type: 'custom:button-card'
template: chip_mdi_icon_state
variables:
ulm_chip_mdi_icon_state_entity: sensor.p1_meter_5c2faf04a1f2_active_power
ulm_chip_mdi_icon_state_icon: mdi:lightning-bolt-circle
styles:
icon:
- color: >
[[[
let state = states['sensor.p1_meter_5c2faf04a1f2_active_power'].state
if(parseFloat(state) > 0 ){
return 'rgb(200, 62, 77)' }
return 'rgb(244, 184, 96)'
]]]
tap_action:
action: navigate
navigation_path: zonnepanelen
###################
## gas ##
###################
- type: "custom:button-card"
template: chip_mdi_icon_state
variables:
ulm_chip_mdi_icon_state_entity: sensor.propaanprijs
ulm_chip_mdi_icon_state_icon: mdi:gas-burner
styles:
icon:
- color: rgb(128, 223, 255)
tap_action:
action: navigate
navigation_path: propaan
###################
## allesuit ##
###################
- type: 'custom:button-card'
template: chip_navigate
variables:
ulm_chip_navigate_path: onoff
ulm_chip_navigate_icon: mdi:radiobox-indeterminate-variant
ulm_chip_navigate_icon_color : rgb(255, 255, 255)
I am also not sure it is theme related or card-mod related 
i was thinking of adding "alignment: end " on the last chip, but that does not work
Iāve mixed a lot of card types with each other and had alignment issues. Iāll give it a look.