There are several ways, I’ll put together 2 options.
1 Like
Instead of background-color: none !important; use background: none !important;
Thats fine. THanks
@tomg1970 This was one of the methods I was going to suggest. It will require some adjusting to fit your needs, but if the status isn’t met the icon doesn’t appear.
I used my entity to test so you’ll need to adjust.
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: binary_sensor.fenster_wz
icon: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
mdi:window-closed-variant
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
mdi:alarm-light
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.fenster_wz', 'off') %}
white
{% elif is_state('binary_sensor.fenster_wz', 'unavailable') %}
blue
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
{% if not is_state('binary_sensor.fenster_wz', 'on') %}
display: none !important;
{% endif %}
}
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 ;
}