Any ideas on this? Perhaps card_mod grandmaster Ildar?
Styling cover entity row:
type: entities
entities:
- entity: cover.garage_door
card_mod:
style: |
:host {
color: green;
}
- entity: cover.garage_door
card_mod:
style: |
:host {
--paper-item-icon-color: cyan;
}
- entity: cover.garage_door
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
color: yellow;
}
- entity: cover.garage_door
card_mod:
style:
hui-generic-entity-row ha-cover-controls:
$: |
.state ha-icon-button {
color: orange;
}
- entity: cover.garage_door
card_mod:
style:
hui-generic-entity-row ha-cover-controls:
$: |
.state ha-icon-button:nth-child(1) {
color: orange;
}
.state ha-icon-button:nth-child(2) {
color: red;
}
.state ha-icon-button:nth-child(3) {
color: magenta;
}
- entity: cover.garage_door
card_mod:
style:
hui-generic-entity-row ha-cover-controls:
$: |
.state ha-icon-button:nth-child(1) {
color: orange;
}
.state ha-icon-button:nth-child(2) {
color: red;
}
.state ha-icon-button:nth-child(3) {
color: magenta;
}
.: |
:host {
--paper-item-icon-color: cyan;
color: green;
}
2 Likes
In your case, you should style from the Entities card level, not from restriction-card.
But why did it work before and now only with this additional $:? And what happens with this additional $:?
(according to š¹ Card-mod - Super-charge your themes! - #867 by MaestroMetty / following up on š¹ Card-mod - Add css styles to any lovelace card - #1974 by Ildar_Gabdullin)
I use a
- custom:mod-card
ā inside of this: grid card
ā --> inside of this: several button cards
And IĀ“m applying this to the custom:mod-card
card_mod:
style:
hui-grid-card:
$: |
.card-header {
text-align: center;
#font-weight: bold;
font-weight: 500;
letter-spacing: 3px;
margin-top: -10px;
}
.: |
ha-card {
border: 2px solid grey;
padding: 5px;
background: none;
}
Strange behaviour: On iOS and Windows the .card-header inside the hui-grid-card is respected and applied correctly. But on my Android devices (HA Companion app and browser) itĀ“s not, so my lovelace view looks different depending on the device - which is quite bad 
To be more specific: only the text-align: center; is correctly applied, everything else seems like itĀ“s being ignored.
Is there an Android specific thing (bug) or the need to address the .card-header on another way 
If someone missing secondary_info: last-changed for input_select entity-row (sadly it is not available out-of-box):
Update (21.06.22): the post is updated with styles for MDC controls; old style (see at the bottom of the post) does not work since 2022.3.
Code
- entity: input_select.test_value
card_mod:
style: |
ha-select::after {
content: "{{relative_time(states[config.entity].last_changed)}} ago";
font-size: var(--paper-font-caption_-_font-size);
color: var(--secondary-text-color);
padding-left: 12px;
}
Old style - not valid since HA 2022.3
- entity: input_select.test_value
name: some name
icon: mdi:weather-night
card_mod:
style:
ha-paper-dropdown-menu:
$:
paper-menu-button:
.dropdown-trigger:
paper-input:
$:
paper-input-container:
$: |
.underline::after {
content: "{{relative_time(states[config.entity].last_changed)}} ago";
font-size: var(--paper-font-caption_-_font-size);
color: var(--secondary-text-color);
}
.: |
paper-input-container {
padding-bottom: 20px;
}
Also, any text may be added:
Code
- entity: input_select.test_value
card_mod:
style: |
ha-select::after {
content: "Sun: {{states('sun.sun')}}";
font-size: var(--paper-font-caption_-_font-size);
color: magenta;
padding-left: 12px;
}
- entity: input_select.test_value
card_mod:
style: |
ha-select::after {
content: "Sun: {{states('sun.sun')}}\A Elvn: {{state_attr('sun.sun','elevation')}}";
font-size: var(--paper-font-caption_-_font-size);
color: magenta;
padding-left: 12px;
display: block;
white-space: pre;
}
Hello
I could probably discuss it on general forum, or maybe even on github as issue of mentioned cards. But I can feel I will get more usefull help over here.
Iāve found, Weather card doesnāt play well with grid card set to square. It looks like weather card can force size of grid ignoring square size.
Is there a systematic way how to instruct weather card to not expand grid card? Likely I could change sizes of weather elements or hiding them, but this might (and ussually does) ends with some differences in presention on different devices.
BTW Example below shows a way of achieving colspan in built-in grid card (I hevenāt seen it yet on this forum. Maybe someone will find it useful)
- title: layout3
path: layout3
badges: []
cards:
- type: custom:mod-card
style:
hui-grid-card:
$:
div: |
*:first-child {grid-area: 1 / 1 / 1 / 3 !important}
card:
type: grid
square: true
columns: 3
cards:
- type: entity
entity: light.all_lights
- type: entity
entity: light.all_lights
- type: entity
entity: light.all_lights
- type: entity
entity: light.all_lights
- type: entity
entity: light.all_lights
- type: entity
entity: light.all_lights
- type: custom:mod-card
style:
hui-grid-card:
$:
div: |
*:first-child {grid-area: 1 / 1 / 1 / 3 !important}
card:
type: grid
square: true
columns: 3
cards:
- type: weather-forecast
entity: weather.domov
- type: entity
entity: light.all_lights
- type: entity
entity: light.all_lights
- type: entity
entity: light.all_lights
- type: entity
entity: light.all_lights
- type: entity
entity: light.all_lights
If I embed all other entities into custom:button-card with aspect_ratio: 1 / 1 (which is my goal) then itās even more vissible that grid is being streached out.
Setting aspect_ratio to 2:1 for weather card doesnāt help in 100%. It results in some difference in height, probably because total horizontal size contain padding between cards, so calculated height is few pixels greater than needed (which is issue of button card rather than weather or grid)
Hi, Iām trying to style āmultiple rowsā icon with input select state: How could I make it less verbose?
Condition is made on nth-child. I tried to put the state directly in nth-child({{state}}) but it seems not to work.
Result should be like this:
- entity: input_select.flap
name: ChattiĆØre
type: custom:multiple-entity-row
icon: mdi:cat
show_state: false
state_color: true
debug_cardmod: true
card_mod:
style:
style:
.entities-row .entity:nth-child(1) state-badge:
$: |
:host {
--paper-item-icon-color:
{% if is_state('input_select.flap', '1') %}
var(--primary-color)
{% else %}
var(--switch-unchecked-button-color)
{% endif %}
}
.entities-row .entity:nth-child(2) state-badge:
$: |
:host {
--paper-item-icon-color:
{% if is_state('input_select.flap', '2') %}
var(--primary-color)
{% else %}
var(--switch-unchecked-button-color)
{% endif %}
}
.entities-row .entity:nth-child(3) state-badge:
$: |
:host {
--paper-item-icon-color:
{% if is_state('input_select.flap', '3') %}
var(--primary-color)
{% else %}
var(--switch-unchecked-button-color)
{% endif %}
}
.entities-row .entity:nth-child(4) state-badge:
$: |
:host {
--paper-item-icon-color:
{% if is_state('input_select.flap', '4') %}
var(--primary-color)
{% else %}
var(--switch-unchecked-button-color)
{% endif %}
}
Kind regards
Hi,
In a picture-element card I am trying to style a state-icon of a fan with card-mod.
I followed these examples but it only works when I apply the css for the whole card and it doesnāt when I do it just for one entity.
What am I doing wrong?
type: picture-elements
image: /local/home/basement/basement_night.png
style: |
ha-card {
height: 250px !important;
}
elements:
- type: state-icon
entity: light.exoteriko_phos_up
tap_action:
action: toggle
style:
top: 26%
left: 20%
card_mod:
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
animation: rotation 0.5s linear infinite
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Hard to say.
Copy/pasted your code , it works in my setup:
type: picture-elements
image: /local/images/blue.jpg
style: |
ha-card {
height: 100px !important;
}
elements:
- type: state-icon
entity: light.virtual_light_1
tap_action:
action: toggle
style:
top: 15%
left: 20%
card_mod: &ref_0
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
animation: rotation 0.5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- type: state-icon
entity: sun.sun
style:
top: 15%
left: 50%
card_mod: *ref_0
- type: state-icon
entity: input_boolean.test_boolean
icon: mdi:account
style:
top: 15%
left: 80%
card_mod: *ref_0
Sorry for the stupid question, but what is &ref_0 ?
I donāt have it in my code
I have something that at some point stopped showng all the styles but I am not sure when. It wasnāt long agoā¦
Iām styling a custom:multiple-entity-row using this:
card_mod:
style: |
:host {
--paper-item-icon-color: rgba(255, 155, 0);
}
Ok, thatās not the full picture, the entire config is below.
Yeah, itās probably a bit niche but hopefully someone can tell me why it has stopped working? 
type: custom:config-template-card
variables:
- states['sensor.heating_{{ floor }}_active_schedule_number'].state
entities:
- sensor.heating_{{ floor }}_active_schedule_number
- input_boolean.heating_{{ floor }}_schedule{{ schedule }}_enabled
- input_datetime.heating_{{ floor }}_schedule_time{{ schedule }}
- input_number.heating_{{ floor }}_schedule_temperature{{ schedule }}
- input_boolean.heating_{{ floor }}_schedule{{ schedule }}_turn_on
- input_boolean.heating_{{ floor }}_schedule{{ schedule }}_turn_off
card:
type: custom:multiple-entity-row
entity: input_boolean.heating_{{ floor }}_schedule{{ schedule }}_enabled
name: '{{ floor | title }} Time {{ schedule }}'
icon: "${ vars[0] == {{ schedule }} ? 'mdi:arrow-right-bold' : '' }"
toggle: true
state_header: Enabled
entities:
- entity: input_boolean.heating_{{ floor }}_schedule{{ schedule }}_turn_on
toggle: true
name: 'Turn ON'
- entity: input_boolean.heating_{{ floor }}_schedule{{ schedule }}_turn_off
toggle: true
name: 'Turn OFF'
- entity: input_datetime.heating_{{ floor }}_schedule_time{{ schedule }}
name: Time
- entity: input_number.heating_{{ floor }}_schedule_temperature{{ schedule }}
name: Temperature
card_mod:
style: |
:host {
{% raw %}
{% set schedule = {% endraw %} {{ schedule }} {% raw %} %}
{% set floor = {% endraw %} '{{ floor }}' {% raw %} %}
{% if schedule == states('sensor.heating_' ~ floor ~ '_active_schedule_number') %}
--paper-item-icon-color: rgba(255, 155, 0);
{% elif states('input_boolean.heating_' ~ floor ~ '_schedule' ~ schedule ~ '_enabled') == 'on' %}
--paper-item-icon-color: var(--accent-color);
{% else %}
color: var(--secondary-text-color);
--paper-item-icon-color: var(--secondary-text-color);
{% endif %}
{% endraw %}
;
}
I used to get colors for the icons.
The arrow would be rgba(255, 155, 0)
The numbers in circles would be var(--accent-color) but only if Enabled.
Else the whole line was var(--secondary-text-color)
Iām looking to change the entity icon based on a template state change, but nothing changes. If I can get this working I wanted to add this to one of my swipe cards.
The idea is to have an indication of if the doors are closed then the icon will show one icon and if the doors are open the the icon will change and may place in some text as well displaying which door has opened
type: entity
entity: group.doors
card_mod:
style: |
ha-card {
--card-icon:
{% if states('group.door') == 'on' %} mdi:shield-off-outline
{% else %} mdi:shield-outline
{% endif %};
}
Tried this and it didnāt work either. As described above it was working till 20.10.x. Afterwards only with this curious additional $: And on card level, as in your recommendation, I didnāt get this work.
What changed with 2010.x. in the way it is working?
What happens with this additional $: on same level?
How would it work on card level as in your recommendation instead restriction card level?
At least show us the code where you tried to achieve the result, may be people will help you.
Sorry, but what is this? This is not a part of config-template-cardā¦
Will do so, but do you have ideas regarding:
What changed with 2010.x. in the way it is working?
What happens with this additional $: on same level, with which it is (only) working now.
- type: custom:restriction-card
card_mod:
style:
$:
hui-cover-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% if state_attr('cover.rolladen_kinderzimmer', 'current_position')|int < 100 %}
color: var(--hilf-color);
{% else %}
color: var(--hilf-active-color);
{% endif %}
}
As this is working now, but was not needed before, I really like to know the background. This was the background of my question above, not to have another solution as you have suggested putting on another level.
I have never seen using this construction:
card_mod:
style:
$:
some_element:
I think only the author of card-mod can answer your question.
Register an issue on Github.
As for me, I am using restriction-card only inside a decluttering template where styling is done w/o any issues.
1 Like
The code I posted is an !inlude file which uses # lovelace_gen (apologies for omitting that line in the post)
- type: vertical-stack
cards:
- type: entities
show_header_toggle: false
entities:
- !include
- heating_schedule_line.yaml
- floor: upstairs
schedule: 1
- !include
- heating_schedule_line.yaml
- floor: upstairs
schedule: 2
So {{ floor }} is passed in.
As is {{ schedule }}.
I reuse the code on two views. One for Upstairs and one for Downstairs which both have their own set of schedules.
The arrow icon points to the active schedule.
Thanks for looking.