I strongly suggest to avoid using variables in card-mod, apply styles to css properties directly (if possible).
Already suggested that above. But it seems Christoph want to stay with only setting the variables. 
Thanks both for the advice… 
first, I want to try it this way - Probably, I will either change it to the Styles or - remove it completely, when I don’t like it at all.
I am aware of the current situation and that the variables can - and might change at any time.
Right now, it is more to create somehow a “prototype” of a dashboard design - triggered with the recent updates and new color options at all.
Yes, but if you go the other way, you are not correlated to any of these var changes or colors. And can set more than only the color, e.g. animations, sizes, etc. And can set on and of colors as you were asking for.
show_name: true
show_icon: true
show_state: true
type: glance
entities:
- entity: sun.sun
name: Ladekabel
card_mod:
style:
state-badge:
$: |
ha-state-icon {
color:red !important;
}
1 Like
thanks
It seems, that when I’ve tried to use the css styles - I was starting from the wrong elements… that’s why it did not work when I’ve tried those… (and therefore was also sticking to the vars…)
seems, that I really need to do more card-mod stuff to get used to it
Hi, is some alernative for --paper-item-icon-active-color please?
I need use this code, whitch not workiong after update to 2022.12.
Thank you.
- type: state-icon
entity: switch.sonoff_hlavice_obyvak
title: Hlavice obývák
tap_action:
action: more-info
style:
top: 21%
left: 81%
transform: translate(-50%,-50%) rotate(-90deg)
card_mod:
style: |
:host {
--paper-item-icon-active-color:
{% if is_state('switch.boost_heating_obyvak', 'on') %}
var(--paper-item-icon-active-color, #fdd835) !important
{% elif is_state('switch.vetrani_obyvak', 'on') or is_state('binary_sensor.aqara_door_balkon', 'on') or is_state('binary_sensor.aqara_window_balkon', 'on') %}
black !important
{% elif is_state('switch.termostat_obyvak', 'on') %}
var(--error-color) !important
{% elif is_state('switch.sonoff_hlavice_obyvak', 'on') %}
var(--warning-color) !important
{% else %}
var(--heat-color) !important
{% endif %}
;
--paper-item-icon-color:
{% if is_state('switch.vetrani_obyvak', 'on') or is_state('binary_sensor.aqara_door_balkon', 'on') or is_state('binary_sensor.aqara_window_balkon', 'on') %}
black !important
{% else %}
var(--primary-color) !important
{% endif %}
;
}Have a look in the last posts. In short: Either use use direct coloring instead of manipulating the host vars or you have to manipulate the fitting new host var, which is now depending on class_type, etc.
appears I didnt use the --paper-icon-active-color anywhere in my dashboards luckily (besides the earlier footer script button, which was solved by using the state-script-color variable). But, I do use the
--paper-item-icon-color in multiple places, in Folds
- type: custom:fold-entity-row
card_mod:
style: |
:host {
color: {{'ivory' if states('sensor.next_alarm') == 'Not set' }};
--paper-item-icon-color: {{'ivory' if states('sensor.next_alarm') == 'Not set' else
'crimson' }};
}
or on single entities (this one cant be changed by custom-ui, because made by a custom integration, so had to use card-mod on it in the dashboard):
- entity: binary_sensor.backups_stale
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'off' %} green
{% else %} red
{% endif %};
and am glad to be able to report at least that still works just as before.
not sure if this helps anyone… yet there it is
I didn’t, I gave up :P.
Looking for some basic formatting help, please. With my limited CSS skills and failed searching, I’ve been trying to combine the card_mod sections of the following two example cards.
ONE
type: custom:mushroom-media-player-card
entity: media_player.sonos_all_inside
use_media_info: true
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: " | {{ state_attr(state_attr(config.entity, "active_child"), "friendly_name") }} + {{((state_attr((state_attr(config.entity, 'active_child')), 'group_members'))|list|count)-1 }}"
}
TWO
type: custom:mushroom-media-player-card
entity: media_player.sonos_all_inside
use_media_info: true
card_mod:
style: |
ha-card {
background: black;
}
So far, I can’t figure out the correct fromatting or maybe syntax that allows them to coexist.
For example, this doesn’t process the template to change mushroom-state-info:
card_mod:
style: |
mushroom-state-info$: |
.secondary:after {
content: " | {{ state_attr(state_attr(config.entity, "active_child"), "friendly_name") }} + {{((state_attr((state_attr(config.entity, 'active_child')), 'group_members'))|list|count)-1 }}"
}
ha-card {
background: black;
}
And this fails to render the card at all:
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: " | {{ state_attr(state_attr(config.entity, "active_child"), "friendly_name") }} + {{((state_attr((state_attr(config.entity, 'active_child')), 'group_members'))|list|count)-1 }}"
}
ha-card {
background: black;
}
Thank you!
Trying to do a simple by studying your examples but no sucess. hope you can help. I have the following multiple entity row card inside swipe card
type: custom:swipe-card
reset_after: 10
cards:
- type: entities
entities:
- type: custom:multiple-entity-row
entity: binary_sensor.terrace_door
secondary_info:
attribute: battery
name: Battery
unit: 'V'
Now this looks like
I want to change the color of the whole secondary line in accordance with value of the battery %. Red when below 10
yellow when between 10 and 50
green above 50
1st post → link at the bottom → styles for “multiple-entity-row”.
Use jinjia templates.
tried but not able to pull it off.
Show your try and we’ll figure out, what was/is wrong.
I have checked the example and in it instead of attribute, the last_changed is used and so corresponding tag in style. what would be the tag for the attribute battery in my code? I am not able to get that.
If secondary_info is not a relative time - then there will be no a corresponding “relative time” element, so apply a style to the parent element. Use Code Inspector.
Seriously, w/o personal attempts a user cannot learn anything. These examples are not for thoughtless copy/paste. Use this as a starting point:
- type: entities
entities:
- type: custom:multiple-entity-row
style:
hui-generic-entity-row $: |
.info.pointer .secondary {
color: red;
}
entity: sun.sun
entities:
- entity: sun.sun
name: Colored secondary_info
secondary_info: xxxx
1 Like
Hi guys. Any help with styling selectem div?
It is markdown card with ha-alert. Too many shadow roots for me to make it work…
Tried this, but doesn’t work:
ha-markdown$ ha-alert$: |
div.icon.no-title {
color: red:
}
Answering my own question in case anyone else is trying to do the same…
It was just basic formatting/indentation thwarting me. This works:
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: " | {{ state_attr(state_attr(config.entity, "active_child"), "friendly_name") }} + {{((state_attr((state_attr(config.entity, 'active_child')), 'group_members'))|list|count)-1 }}"
}
.: |
ha-card {
background: black;
}
I’ve managed to create this vertical stack card and have been able to style the elements within it. However, I’m having an issue getting my card_mod styles to apply to the entire vertical stack (see code at the bottom). I’ve tried numerous things but cannot get it to work. Any ideas what’s wrong with my code?
Here’s how the card looks currently. Ideally the background color changes to #457863.
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: |2-
{%- if now().hour < 12 -%}Morning
{%- elif now().hour < 18 -%}Afternoon
{%- else -%}Evening{%- endif -%}, {{user}}
subtitle: >-
♻️ {{state_attr('calendar.bins', 'message')}} on {{
as_timestamp(state_attr("calendar.bins","start_time") |
default(now(),true) )| timestamp_custom('%-d %b') }}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
:host {
padding-top: 10px;
padding-left: 10px;
padding-bottom: 25px;
--ha-card-background: white;
}
chips:
- type: action
icon_color: red
tap_action:
action: navigate
navigation_path: media-control
icon: mdi:remote
hold_action:
action: none
double_tap_action:
action: none
- type: action
icon_color: blue
tap_action:
action: navigate
navigation_path: audio
icon: mdi:radio
- type: action
icon_color: blue-grey
icon: mdi:radio
tap_action:
action: navigate
navigation_path: media-settings
- type: action
icon_color: amber
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: all-lights
- type: action
icon_color: green
icon: mdi:timeline-clock
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: automations
alignment: justify
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
card_mod:
style: |
:host {
padding-left:10px;
--ha-card-background: #123456;
}
entity: person.alexander_benedet
fill_container: true
icon: mdi:face-man
tap_action:
action: navigate
navigation_path: dan
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-person-card
card_mod:
style: |
:host {
padding-left:10px;
--ha-card-background: #292589;
}
entity: device_tracker.nancy_phone
fill_container: true
icon: mdi:face-woman
card_mod:
style: |
ha-card {
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
background: #457863;
}