Hi very nice idea, thanks a lot
What would it look like if the icon was also visible for the “unavailable” status?
So that you can see when it is unavailable.
Please forgiveme, I’m a bit confused. What do you see right now if it’s unavailable with the code I posted?
We can adjust this however you’d like.
Please, help! 
I can’t move the avatars to the right. I’ve already tried everything… (((
P.S. Is it possible to translate the names of the months into another language?
type: vertical-stack
cards:
- type: markdown
content: '{{ states(''sensor.time'') }}'
card_mod:
style: |
ha-markdown {
padding: 0 0 0 8px !important;
font-size: 110px !important;
font-weight: bold !important;
line-height: 1.2 !important;
}
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-bottom: 0px;
margin-left: 8px;
margin-top: 5px;
}
- type: markdown
content: Сегодня **{{ now().strftime('%d %B, %Y') }}**
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10x !important;
font-size: 21px !important;
font-weight: normal !important;
line-height: 1.4 !important;
}
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-left: 8px;
margin-bottom: 0px;
margin-top: -45px;
}
- type: markdown
content: |-
{% set time = now().hour %}
{% if time <= 1 %} Иди спать {{'\\U0001f621'}}
{% elif time <= 3 %} Вали спать {{'\U0001f92c'}}
{% elif time <= 5 %} ... {{'\U0001f47b'}}
{% elif time <= 7 %} Проснулся? {{'\U0001f616'}}
{% elif time <= 8 %} Вставай! {{'\U0001f97a'}}
{% elif time <= 9 %} Кофейку? {{'\U0001f643'}}
{% elif time <= 10 %} В бой! {{'\U0001fae1'}}
{% elif time <= 13 %} Добрый день {{'\U0001F60A'}}
{% elif time <= 15 %} Пора обедать {{'\U0001F60E'}}
{% elif time <= 17 %} Вздремнуть? {{'\U0001f914'}}
{% elif time <= 19 %} Добрый вечер {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 22 %} А что на ужин? {{'\U0001F60C'}}
{% elif time <= 23 %} Ужинать и спать! {{'\U0001F974'}}
{% else %} Добрый вечер {{'\U0001F974'}}
{% endif %}
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10px !important;
font-size: 30px !important;
font-weight: normal !important;
line-height: 1.2 !important;
}
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-left: 12px;
margin-top: -10px;
{
- square: true
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: person.korzik
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:mushroom-entity-card
entity: person.artemiy
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Edu: var(--deep-orange-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person-Edu: var(--red-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki', 'Edu']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:mushroom-entity-card
entity: person.dakononov
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:mushroom-entity-card
entity: person.dariya
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
columns: 2
- type: custom:clock-weather-card
entity: weather.yandex_weather
sun_entity: sun.sun
temperature_sensor: sensor.outdoor_temp
weather_icon_type: fill
animated_icon: true
forecast_days: 0
time_format: 24
date_pattern: d.m.y
hide_today_section: false
hide_forecast_section: true
hide_clock: true
hide_date: true
hourly_forecast: false
use_browser_time: true
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-top: -110px;
margin-left: 8px;
}
I have a problem following the V3.4.0 update. The card_mod for the primary line no longer seems to work.
- type: custom:mushroom-template-card
primary: >-
{{ now().strftime('%H:%M') }}
secondary: >-
{{ states('sensor.date_du_jour') }}
tap_action:
action: none
card_mod:
style: |
ha-card {
--card-primary-font-size: 73px;
--card-secondary-font-size: 20px;
text-align: center;
}
Before the update
After the update.
1 Like
Try like this instead:
card_mod:
style: |
ha-card {
--title-font-size: 73px;
--subtitle-font-size: 20px;
text-align: center;
}
Try to just add some margin to each of the cards for the person like this:
type: vertical-stack
cards:
- type: markdown
content: '{{ states(''sensor.time'') }}'
card_mod:
style: |
ha-markdown {
padding: 0 0 0 8px !important;
font-size: 110px !important;
font-weight: bold !important;
line-height: 1.2 !important;
}
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-bottom: 0px;
margin-left: 8px;
margin-top: 5px;
}
- type: markdown
content: Сегодня **{{ now().strftime('%d %B, %Y') }}**
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10x !important;
font-size: 21px !important;
font-weight: normal !important;
line-height: 1.4 !important;
}
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-left: 8px;
margin-bottom: 0px;
margin-top: -45px;
}
- type: markdown
content: |-
{% set time = now().hour %}
{% if time <= 1 %} Иди спать {{'\\U0001f621'}}
{% elif time <= 3 %} Вали спать {{'\U0001f92c'}}
{% elif time <= 5 %} ... {{'\U0001f47b'}}
{% elif time <= 7 %} Проснулся? {{'\U0001f616'}}
{% elif time <= 8 %} Вставай! {{'\U0001f97a'}}
{% elif time <= 9 %} Кофейку? {{'\U0001f643'}}
{% elif time <= 10 %} В бой! {{'\U0001fae1'}}
{% elif time <= 13 %} Добрый день {{'\U0001F60A'}}
{% elif time <= 15 %} Пора обедать {{'\U0001F60E'}}
{% elif time <= 17 %} Вздремнуть? {{'\U0001f914'}}
{% elif time <= 19 %} Добрый вечер {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 22 %} А что на ужин? {{'\U0001F60C'}}
{% elif time <= 23 %} Ужинать и спать! {{'\U0001F974'}}
{% else %} Добрый вечер {{'\U0001F974'}}
{% endif %}
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10px !important;
font-size: 30px !important;
font-weight: normal !important;
line-height: 1.2 !important;
}
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-left: 12px;
margin-top: -10px;
{
- type: grid
square: true
columns: 2
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: person.korzik
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
margin-left: 22px;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:mushroom-entity-card
entity: person.artemiy
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
margin-left: 22px;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Edu: var(--deep-orange-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person-Edu: var(--red-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki', 'Edu']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:mushroom-entity-card
entity: person.dakononov
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
margin-left: 22px;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:mushroom-entity-card
entity: person.dariya
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
margin-left: 22px;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:clock-weather-card
entity: weather.yandex_weather
sun_entity: sun.sun
temperature_sensor: sensor.outdoor_temp
weather_icon_type: fill
animated_icon: true
forecast_days: 0
time_format: 24
date_pattern: d.m.y
hide_today_section: false
hide_forecast_section: true
hide_clock: true
hide_date: true
hourly_forecast: false
use_browser_time: true
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-top: -110px;
margin-left: 8px;
}
just adjust this bit if you need to move it more:
margin-left: 22px;
for the month not being in your language take a look at this post.
you will need to create a dictionary in your template. the backend (where templates are evaluated) doesnt know anything about the frontend (where you language is set).
Thank you for the answer, but it doesn’t work the size of the text does not change.
This what i had, before the update.
Ah i see - i am not actually on the newest update it seems… i am usually one of the first to know!
ill update and take a look 
I made the switch to Mushroom cards some time ago… and I can’t believe I’m just finding this now. Thanks for pulling it all together 
1 Like
I just upgraded Mushroom Cards in HACS today and apparently missed a change. Now my card looks like this. Any ideas what may have changed?
1 Like
Probably this.
I need to look into it, i dont see this issue on the newest update but i use a theme (minimalist) that might be overwritting this change.
I need to take a closer look tomorrow if i get a chance.
1 Like
You’re amazing. Thank you!
I did a quick compare of the old JS and the new version and letter-spacing: was added to the primary and secondary state info. You can adjust it with the code below, but there may be a more direct way. I’m still looking.
@dimitri.landerloos may have additional insight.
card_mod:
style: |
ha-card {
--card-primary-color:red;
--card-secondary-color: yellow;
--card-primary-font-size:50px;
--card-secondary-font-size:15px;
--card-primary-line-height: 75px !important ;
}
1 Like
--card-primary-font-size:50px;
--card-secondary-font-size:15px;
will control the font size going forward.
card_mod:
style: |
ha-card {
--card-primary-color:red;
--card-secondary-color: yellow;
--card-primary-font-size:50px;
--card-secondary-font-size:15px;
--card-primary-line-height: 75px !important ;
}
I wasn’t either and didn’t understand why folks were struggling 
Thank you, I found the display I had before the update like this.
card_mod:
style: |
ha-card {
--card-primary-font-size: 105px;
--card-secondary-font-size: 30px;
--card-primary-line-height: 110px !important ;
--card-secondary-line-height: 35px !important ;
text-align: center;
}
Thank you very much, now everything is just great! For translation, I found this method -
type: markdown
content: >-
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %} {%set days =
['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота',
'Воскресение'] %}
{% set months = ['Января', 'Февраля', 'Марта', 'Апреля', 'Мая', 'Июня',
'Июля', 'Августа', 'Сентября', 'Октября', 'Ноября', 'Декабря'] %} {{
days[now().weekday()] }} {{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
{{ months[now().month-1] }}, {{ now().strftime('%Y') }} {% endif %}
I need to get rid of the background and increase the size of the icon. It’s clear what to do with a regular icon
card_mod:
style:
ha-card {
--ha-card-background: none;
box-shadow: none;
--icon-size: 63px;
}
but what about an animated one?
type: custom:mushroom-template-card
primary: ''
entity: input_boolean.home_ststus_away
icon: mdi:exit-run
layout: vertical
icon_color: |-
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
red
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
ha-icon {
--icon-animation: clip 1s linear infinite;
}
.shape {
--shape-animation: ping 3s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
70% {
box-shadow: 0 0 0 15px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
{% else %}
grey
{% endif %}
}
Couple of issues here.
- Incorrect (old) path to icon animations:
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1s linear infinite;
}
Should be like this now:
card_mod:
style: |
ha-state-icon {
animation: clip 1s linear infinite;
}
-
You dont have the keyframes for this animation. I dont have them to hand. But the animation of the icon wont work without it.
-
I wouldnt place an if statement outside an element. And also the if statement makes no sense really?
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
ha-icon {
--icon-animation: clip 1s linear infinite;
}
.shape {
--shape-animation: ping 3s infinite;
}
{% else %}
grey
{% endif %}
}
If boolean is on then animate icon and animate shape else grey? See how that doesnt really make sense?
I would do it like this if you are doing if statements. And yes this means repeating the if statement potentially but it works better:
card_mod:
style: |
ha-state-icon {
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
animation: clip 1s linear infinite;
{% else %}
{% endif %}
}
- And for your actual question on how to combine there is a section in the first post about what the .: | and $ symbols do. But it should be like this. With all fixes (except missing keyframe for the icon animation):
type: custom:mushroom-template-card
primary: ''
entity: input_boolean.home_ststus_away
icon: mdi:exit-run
layout: vertical
icon_color: |-
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
red
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
--shape-animation: ping 3s infinite;
{% else %}
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 15px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.: |
ha-state-icon {
{% if is_state ('input_boolean.home_ststus_away', 'on')%}
animation: clip 1s linear infinite;
{% else %}
{% endif %}
}
ha-card {
--ha-card-background: none;
box-shadow: none;
--icon-size: 63px;
}