Yes sir, thanks for checking the issues and posting what you found. Helps others 
1 Like
@mr_aleks, you can combine a template card with the update card with a stack in card like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: update.home_assistant_supervisor_update
icon: mdi:update
icon_color: blue
primary: test
secondary: test2
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:mushroom-update-card
entity: update.home_assistant_supervisor_update
show_buttons_control: true
card_mod:
style: |
mushroom-state-item {
display: none;
}
the top card you can then put whatever you want. with your theme you may need to remove borders from each card too with card mod.
1 Like
Ah true. I got too fancy
Not too fancy, your solution is a good solution and its super useful to know how to replace something in a card with something else using card mod.
Made me thinking…I have this card for my HA Server:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-update-card
entity: update.home_assistant_core_update
name: HA Core
show_buttons_control: true
icon_type: entity-picture
- type: custom:mushroom-template-card
primary: Version Information
secondary: >-
Installed v{{ state_attr('update.home_assistant_core_update',
'installed_version')}}
Latest v{{ state_attr('update.home_assistant_core_update',
'latest_version')}}
icon: mdi:package-variant-closed
multiline_secondary: true
fill_container: true
entity: update.home_assistant_core_update
tap_action:
action: more-info
icon_color: |-
{% if is_state('update.home_assistant_core_update', 'on') %}
orange
{% else %}
green
{% endif %}
badge_color: |-
{% if is_state('update.home_assistant_core_update', 'on') %}
red
{% else %}
blue
{% endif %}
badge_icon: |-
{% if is_state('update.home_assistant_core_update', 'on') %}
mdi:help
{% else %}
mdi:check-bold
{% endif %}
Now, my question is: how is it possible that the icon is not round, but somewhat like a “drop” ?
btw to fix the issue of content spinning with the icon, you can just add the animation only to the chips icon:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: fan.all
state: 'on'
chip:
type: template
icon: mdi:fan
icon_color: green
content: >
{{ expand(states.group.fans) | selectattr( 'state', 'eq', 'on')
| list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Ventoinhas
content:
type: custom:vertical-stack-in-card
horizontal: false
cards:
- type: custom:mushroom-fan-card
entity: fan.air_purifier
icon_animation: true
collapsible_controls: true
show_percentage_control: true
fill_container: true
name: Purificador
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/ambience
card_mod:
style: |
ha-card {
--rgb-state-fan: var(--rgb-cyan);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-fan-card
entity: fan.living_room
icon_animation: true
show_oscillate_control: true
show_percentage_control: true
collapsible_controls: true
fill_container: true
name: Sala
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/ambience
- type: custom:mushroom-fan-card
entity: fan.bedroom
icon_animation: true
show_oscillate_control: true
show_percentage_control: true
collapsible_controls: true
fill_container: true
name: Quarto
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/ambience
alignment: justify
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: spin 1s linear infinite reverse;
}
@keyframes spin {
100% { transform: rotate(280deg) scale(1); }
}
definitely not as easy though 
Sorry note sure what you mean? which icon do you want shaped like a drop?
the picture one or the other one? or both somehow? and what exact shape do you mean (direction of the drop)
Sorry. More specific: the Home Assistant icon.
I used this in the config:
icon_type: entity-picture
But it is not round, it is like a drop in my opinion, where I want it to be round?
Well this will be because the homeassistant icon itself is a png with a transparent background. so it is round. you can see this if a you add a border. its just that the png has a point at the top.
Aha! Okay…So I could change it by changing the icon via customize.yaml
It bothers me, although it is nothing important.
Thanks for the heads-up!
Careful as it seems card-mod is not officially supported with mushroom… Using text colour (e.g. primary-text-color) in mushroom cards with card-mod broke for me on 3.4.0, so I’ve gone back to 3.3.0 for now to keep features like the screen capture example below.
Not sure if there is a workaround to work on 3.4.0?
piitaya
HiSome theme variables have been changed to use the default font style of tile card (Use tile style as default style for mushroom card by piitaya · Pull Request #1348 · piitaya/lovelace-mushroom · GitHub)
Mushroom support with card mod is not guarantee because it’s not officially supported but you can find help in the community forum
I close this issue as card mod support is not provided in this repo.
Closed #1355 as not planned.
- type: custom:mushroom-template-card
primary: |-
{% set state=states('input_boolean.dog_louie_feeding_required') %}
{% if state=='on' %}
Yes
{% else %}
No
{% endif %}
secondary: Feed Reqd?
icon: ''
entity: input_boolean.dog_louie_feeding_required
icon_color: white
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
multiline_secondary: false
fill_container: false
card_mod:
style:
mushroom-state-info $: |
.container {
--card-secondary-font-size: 14px;
--card-primary-font-size: 16px;
}
.: |
ha-card {
{% set state=states('input_boolean.dog_louie_feeding_required') %}
{% if state=='on' %}
--primary-text-color: red
{% else %}
--primary-text-color: green
{% endif %}
}
the “workaround” is using --card-primary-color instead. this is the correct thing to use going forward as this was updated to allign with the native HA cards.
same for secondary --card-secondary-color
FYI actually you should use 3.4.1.
my guide isnt updated to reflect this change yet. but it will be.
2 Likes
Thank you - it does indeed work correctly with latest mushroom card version using --card-primary-color
card_mod:
style:
mushroom-state-info $: |
.container {
--card-secondary-font-size: 14px;
--card-primary-font-size: 16px;
}
.: |
ha-card {
{% set state=states('input_boolean.dog_henry_feeding_required') %}
{% if state=='on' %}
--card-primary-color: red
{% else %}
--card-primary-color: green
{% endif %}
}
btw you can (if you want of course) combine these together into the same bit.
card_mod:
style:
mushroom-state-info $: |
.container {
--card-secondary-font-size: 14px;
--card-primary-font-size: 16px;
{% set state=states('input_boolean.dog_henry_feeding_required') %}
{% if state=='on' %}
--card-primary-color: red;
{% else %}
--card-primary-color: green;
{% endif %}
}
Hello everyone, being a newbie in the world of theme creation I am doing a little research, the cards on my Dashboard are modified with mushroom and card-mod everything is good to adjust to the pixel, but I am facing a problem , on the tree of theme codes for my map configuration which are 99% identical I would like to change the map configuration to theme to lighten the Dashboard code, I thank you in advance if you can help me gentlemen the coders even just a bit that would help me a lot I’ve been looking for several days, I’ve been testing things but without success. I’ll give you one of my cards as an example
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.le_salon
icon: mdi:sofa
icon_color: |-
{% if is_state('light.le_salon', 'on') %}
#FFAE0080
{% else %}
#0000
{% endif %}
primary: Salon
secondary: >-
{{ states('sensor.thermometre_salon_temperature') }}°C/{{
states('sensor.thermometre_salon_humidity') }}%
layout: horizontal
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary {
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
background-color: #00000090;
width: 44%;
border-radius: 5px 5px 5px 5px;
}
.secondary {
position: relative;
overflow: visible !important;
top: -49px;
left: -155px;
background-color: #00000090;
width: 78%;
border-radius: 5px 5px 5px 5px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 60px;
top: 25px;
}
ha-card {
background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: light.le_salon
state: 'on'
chip:
type: template
entity: light.le_salon
tap_action:
action: none
icon: mdi:ceiling-light
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: media_player.samsung_7_series_65
state: 'on'
chip:
type: template
entity: media_player.samsung_7_series_65
icon: mdi:play-pause
icon_color: |-
{% if is_state('media_player.samsung_7_series_65', 'on') %}
orange
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: alarm_control_panel.alarmo
state: armed_away
chip:
type: alarm-control-panel
entity: alarm_control_panel.alarmo
tap_action:
action: none
content_info: none
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 85%;
top: -170px;
background: none;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 178px ;
margin: auto;
background-image: url(https://i.ibb.co/NjM7Dd6/salon.png);
background-size: cover;
background-position: center;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:silverware-variant
icon_color: >-
{% if is_state('light.la_salle_a_manger', 'on') or
is_state('switch.prise_connectee_mystrom', 'on') or
is_state('switch.prise_salle_a_manger', 'on') %}
#FFAE0080
{% else %}
#0000
{% endif %}
primary: Salle a manger
layout: horizontal
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
badge_icon: |+
badge_color: |+
entity: light.la_salle_a_manger
secondary: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
background-color: #00000090;
width: 110%;
border-radius: 5px 5px 5px 5px;
}
.secondary {
position: relative;
overflow: visible !important;
top: -49px;
left: -155px;
border-radius: 5px 5px 5px 5px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 60px;
top: 25px;
}
ha-card {
background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: light.la_salle_a_manger
state: 'on'
chip:
type: template
entity: light.la_salle_a_manger
tap_action:
action: none
icon: mdi:ceiling-light
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: switch.prise_connectee_mystrom
state: 'on'
chip:
type: template
entity: switch.prise_connectee_mystrom
tap_action:
action: none
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
icon: mdi:power-socket-eu
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: switch.prise_salle_a_manger
state: 'on'
chip:
type: template
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
icon: mdi:power-socket-eu
entity: switch.prise_salle_a_manger
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 85%;
top: -170px;
background: none;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 178px ;
margin-left: auto;
margin-right: auto;
background-image: url(https://i.ibb.co/rmk15p2/salle-a-manger.png);
background-size: cover;
background-position: center;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.cuisine
icon: mdi:pot-steam
icon_color: |
{% if is_state('light.cuisine', 'on') %}
#FFAE0080
{% else %}
#0000
{% endif %}
primary: Cuisine
layout: horizontal
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
badge_icon: |+
badge_color: |+
card_mod:
style:
mushroom-state-info$: |
.primary {
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
background-color: #00000090;
width: 55%;
border-radius: 5px 5px 5px 5px;
}
.secondary {
position: relative;
overflow: visible !important;
top: -49px;
left: -155px;
border-radius: 5px 5px 5px 5px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 60px;
top: 25px;
}
ha-card {
background: none;
}
secondary: ''
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: light.cuisine
state: 'on'
chip:
type: template
entity: light.cuisine
tap_action:
action: none
icon: mdi:vanity-light
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: light.plan_de_travail
state: 'on'
chip:
type: template
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
entity: light.plan_de_travail
icon: mdi:vanity-light
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 85%;
top: -170px;
background: none;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 178px ;
margin-left: auto;
margin-right: auto;
background-image: url(https://i.ibb.co/19NXD2Z/cuisine.png);
background-size: cover;
background-position: center;
}
- type: custom:popup-card
entity: light.le_salon
dismissable: true
card:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.le_salon
show_brightness_control: true
use_light_color: true
show_color_control: false
collapsible_controls: true
icon: mdi:ceiling-light
show_color_temp_control: true
- type: custom:mushroom-alarm-control-panel-card
states:
- armed_away
- armed_night
entity: alarm_control_panel.alarmo
- type: custom:mushroom-media-player-card
entity: media_player.samsung_7_series_65
name: télé salon
size: normal
title: La salon
- type: custom:popup-card
entity: light.la_salle_a_manger
dismissable: true
card:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.la_salle_a_manger
show_brightness_control: true
use_light_color: true
show_color_control: false
name: ' La salle a manger'
collapsible_controls: true
icon: mdi:ceiling-light
show_color_temp_control: true
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: switch.prise_salle_a_manger
icon: mdi:power-socket-fr
name: Prise salle à manger
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: switch.prise_connectee_mystrom
icon: mdi:power-socket-fr
name: Prise mystrom
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
title: La salle a manger
- type: custom:popup-card
entity: light.cuisine
dismissable: true
card:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.cuisine
show_brightness_control: true
use_light_color: true
show_color_control: false
name: ' La cuisine'
collapsible_controls: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.plan_de_travail
show_brightness_control: true
use_light_color: true
show_color_control: false
name: ' Le plan de travail'
collapsible_controls: true
show_color_temp_control: true
title: La cuisine
Very good - will do that
Searching through the 9700+ posts on this topic I couldn’t find anyone posting anything about clipped text. This is what I’m seeing since I updated my HASS version a few days ago:
Any hints on how to fix this are more than welcome.
Here is my code:
- type: custom:mushroom-template-card
primary: '{{ now().strftime(''%H:%M'') }}'
multiline_secondary: true
secondary: '{{ now().strftime(''%A %d %B'') }}'
icon: mdi:clock
layout: horizontal
card_mod:
style: |
ha-card {
--card-primary-font-size: 40px;
}
PS: these cards are awesome, but is there any sort of basic tutorial on how all of this stuff works? Some is CSS, some is javascript, then there’s the yaml stuff and the weird silly {{ }} stuff as well? As a non-web dev, this is all very confusing (I’m an embedded s/w dev btw, so it doesn’t have to be a tutorial for absolute n00bs)
Ensure Mushroom is updated to 3.4.1 This was a known issue with 3.4.0
Hi,
Try this.
card_mod:
style: |
ha-card {
--card-primary-font-size: 40px;
--card-primary-line-height: 45px !important;
}
Need help with my person card, it’s a combination of other cards code( use great people ideas 
) it’s looks ok but I would like to make everything looks uniformed and clean, move geolocation to highlighted area. Please help me to tweak this code. Thank you
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background: none; !important;
border: 0 !important;
}
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: 0 !important;
}
- type: conditional
card_mod:
style: |
ha-card {
border: 1 !important;
}
conditions:
- entity: sensor.sm_s918u_battery_state
state: charging
card:
type: custom:mushroom-template-card
entity: sensor.sm_s918u_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: S23
icon: mdi:battery-charging-medium
hide_name: true
primary: Phone is charging...
secondary: 'Battery Level: {{ states(''sensor.sm_s918u_battery_level'') }}%'
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
border: 0 !important;
}
- type: conditional
conditions:
- entity: sensor.sm_s918u_battery_state
state: full
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
}
entity: sensor.sm_s918u_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.sm_s918u_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_s918u_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: 'Battery Level: {{ states(''sensor.sm_s918u_battery_level'') }}%'
tap_action:
action: more-info
fill_container: true
- type: conditional
card_mod: null
style: |
ha-card {
border: 0 !important;
}
conditions:
- entity: sensor.sm_s918u_battery_state
state: discharging
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
}
entity: sensor.sm_s918u_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.sm_s918u_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_s918u_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: 'Battery Level: {{ states(''sensor.sm_s918u_battery_level'') }}%'
tap_action:
action: more-info
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod: null
style: |
ha-card {
border: none; !important;
}
alignment: center