I usually spend home 6 days a month and some amount of this time have access to PC, rest of time answering from a mobile not sitting on a sofa, so finding an exact link may not be easy, describing āhow to find a linkā is easier, sorry for inconvenience, wanted to help.
Itās probably me, very sorry for this.
First post:
Links at the bottom
Not seeing itā¦
@Ildar_Gabdullin Again, I know you are trying to help, but hey, if I donāt see what you are trying to reffer toā¦
Yves, it is here:
You will find there a list dedicated to help beginners.
It will not cover 100% of needs - but gives a starting point for people who want to learn.
Iāve try to modify the style of the section but it didnt work
type: grid
card_mod:
style:
.section { background: red !important; }
cards:
- type: heading
icon: mdi:sofa
heading: Zona Giorno
heading_style: title
badges:
- type: entity
entity: sensor.temperatura_zona_giorno
- type: heading
icon: mdi:fridge
heading: Cucina
heading_style: subtitle
- type: tile
entity: light.terra_cucina_faretti
name: Faretti
show_entity_picture: false
vertical: true
hide_state: false
state_content: state
tap_action:
action: toggle
icon: mdi:lightbulb-variant-outline
layout_options:
grid_columns: 2
grid_rows: 2
- type: tile
entity: light.lampadario_cucina
name: Lampadario
vertical: true
icon: mdi:lightbulb-variant-outline
tap_action:
action: toggle
- type: tile
entity: light.shelly_terra_cucinaled
icon: mdi:lightbulb-variant-outline
tap_action:
action: toggle
icon_tap_action:
action: toggle
vertical: false
layout_options:
grid_columns: 4
grid_rows: 1
- type: heading
icon: mdi:television-classic
heading: Salone
heading_style: subtitle
- type: tile
entity: light.terra_salone_lampadetavolinopiano
icon: mdi:lamp-outline
vertical: true
tap_action:
action: toggle
layout_options:
grid_columns: 1
grid_rows: 2
- type: tile
entity: light.terra_salone_lampadeangolodivano
name: Lampada Divano
icon: mdi:floor-lamp-torchiere-variant-outline
vertical: true
tap_action:
action: toggle
- type: tile
entity: light.terra_salone_colonne
name: Colonne
icon: mdi:pillar
vertical: true
tap_action:
action: toggle
layout_options:
grid_columns: 1
grid_rows: 2
- type: heading
icon: mdi:table-furniture
heading: Pranzo
heading_style: subtitle
- type: tile
entity: light.shelly_terra_vetrinetta
name: Vetrinetta
icon: mdi:glass-wine
vertical: true
tap_action:
action: toggle
- type: tile
entity: light.terra_pranzo_lampadario
name: Lampadario
icon: mdi:ceiling-light-multiple-outline
tap_action:
action: toggle
vertical: true
column_span: 1
this is the result that i want to reach
old-style badges FIX:
title: ...
path: ...
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod:
style: |
:host {
color: orange;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: yellow;
--ha-label-badge-label-color: green;
}
OR - open ācard-mod.jsā in editor and replace
hui-state-label-badge ā hui-state-badge-element
Ofc it may stop working some day )))
Unfortunately, there is no way to restore a āchange name/iconā functionality.
1 Like
Can anyone help me to animate (spin) the icon of the Tile card (fan). Have tried many variant (including search/google 
) but canāt get it to work. Testing with display: none works, so I though I was on the right path, but canāt get it animated.
card_mod:
style: |
ha-state-icon {
animation: spin 2s linear infinite;
# display: none;
}
this is what I use for the tile fans
note you do need to declare the animation keyframes:
# tile_fan animate
style:
hui-card-features $:
hui-card-feature $:
hui-fan-speed-card-feature $:
ha-control-slider$: |
.container {
--control-slider-border-radius: var(--ha-card-border-radius);
}
.slider .slider-track-bar {
border-radius: var(--ha-card-border-radius) !important;
}
.slider .slider-track-bar::after {
border-radius: var(--ha-card-border-radius) !important;
}
.slider {
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %};
--control-slider-background:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %};
}
.: |
ha-tile-icon {
--tile-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{% endif %}
{% else %} var(--state-inactive-color)
{% endif %};
}
ha-state-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% set base = 'rotation infinite linear' %}
{% if perc <= 15 %} 4s {{base}}
{%- elif perc <= 33 %} 3s {{base}}
{%- elif perc <= 67 %} 1.5s {{ base}}
{%- else %} 0.75s {{base}}
{% endif %}
{% else %} none
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Got that to workā¦ Apparently spin doesnāt work, but rotation does ā¦
If you rename rotation to spin, spin will work 
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
1 Like
Guess I didnāt really/fully understood CSS, as this works for mushroom 
. Thought spin was a CSS definition
type: custom:mushroom-entity-card
entity: sensor.sensor
card_mod:
style: |
ha-state-icon {
animation: 2s spin infinite linear;
}
some cards have several animations built-in.
However, if you use card_mod, you need to specify the animations as this isnt implemented in the card itself at that point.
1 Like
Hello guys ,
Need a little help.
How to change icon based on state of an entity.
I need to use picture glance card. Tried the below code but its not working.
Kindly help
camera_view: auto
type: picture-glance
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities:
- entity: switch.tv
icon: >-
{% if is_state('switch.tv','off') %}
mdi:school
{% else %}
mdi:sack
{% endif %}
- entity: light.s_1
As a starting point:
1st post - link at the bottom - picture-glance
Thank you so much 
Hi everyone,
Iād really love some help on a card Iām trying to build with card_mod.
At the moment I have the below table. Iām trying to accomplish that everything is in a singular card (as if it were an entity card). This means I have to get rid of the spaces between the rows and columns, and put everything a lot closer together. Iāve tried a lot of different options but I seem to be unable to manipulate the grid-layout properly.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: "-4px -5px -4px -5px"
grid-template-columns: 15% 85%
grid-template-rows: auto
grid-template-areas: |
"left right"
cards:
- type: custom:mushroom-template-card
icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
entity: switch.sprinklercontroller_backyard_group_1_include_in_cycle
fill_container: true
icon_color: "{{'amber' if states(entity) == 'on' }}"
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
view_layout:
grid-area: left
- type: custom:timer-bar-card
state_color: true
mushroom: null
tap_action:
action: toggle
bar_height: 10px
entities:
- entity: switch.sprinklercontroller_backyard_group_1
name: Achtertuin 1
remain_time:
entity: sensor.sprinklercontroller_remaining_time_current_valve
units: seconds
duration:
entity: number.sprinklercontroller_backyard_group_1_duration
units: minutes
view_layout:
grid-area: right
- type: custom:mushroom-template-card
icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
entity: switch.sprinklercontroller_backyard_group_2_include_in_cycle
fill_container: true
icon_color: "{{'amber' if states(entity) == 'on' }}"
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
- type: custom:timer-bar-card
state_color: true
mushroom: null
tap_action:
action: toggle
bar_height: 10px
entities:
- entity: switch.sprinklercontroller_backyard_group_2
name: Achtertuin 2
remain_time:
entity: sensor.sprinklercontroller_remaining_time_current_valve
units: seconds
duration:
entity: number.sprinklercontroller_backyard_group_2_duration
units: minutes
- type: custom:mushroom-template-card
icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
entity: switch.sprinklercontroller_backyard_group_3_include_in_cycle
fill_container: true
icon_color: "{{'amber' if states(entity) == 'on' }}"
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
- type: custom:timer-bar-card
state_color: true
mushroom: null
tap_action:
action: toggle
bar_height: 10px
entities:
- entity: switch.sprinklercontroller_backyard_group_3
name: Achtertuin 3
remain_time:
entity: sensor.sprinklercontroller_remaining_time_current_valve
units: seconds
duration:
entity: number.sprinklercontroller_backyard_group_3_duration
units: minutes
- type: custom:mushroom-template-card
icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
entity: switch.sprinklercontroller_frontyard_include_in_cycle
fill_container: true
icon_color: "{{'amber' if states(entity) == 'on' }}"
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
- type: custom:timer-bar-card
state_color: true
mushroom: null
tap_action:
action: toggle
bar_height: 10px
entities:
- entity: switch.sprinklercontroller_frontyard
name: Voortuin
remain_time:
entity: sensor.sprinklercontroller_remaining_time_current_valve
units: seconds
duration:
entity: number.sprinklercontroller_frontyard_duration
units: minutes
layout_options:
grid_columns: full
I might even start out with stack-in-card. This removes all the spaces in between and makes it look like a single card. check that out - maybe itās already what you are looking for. If not, then you have a better starting point to make granular adjustments.
Thanks!
Are you talking about the vertical-stack-in-card or the stack-in card. The latter doesnāt seem to have been updated in the last 4 years?
interesting ^^
stack-in-card actually mentions it is the replacement for vertical-stack-in-card. But you are absolutely right.
I have use both, both work fine and both will likely be fine in your case.
Iāve tried using the vertical-stack-in-card now.
Unfortunately documentation on this visual is really bad and it doesnāt explain how I can use the āstylesā parameter to resize the columns. If I can make it 10% 90% then I think Iām golden 