The layout card works also, but the chips in the layout card are not aligned to the left side the same as the others. You can see in the screenshot, the Title and Layout Cards are aligned (card 1 and 3) but the two horizontal stack cards aren’t (card 2 and 4). How do I get the Layout card aligned with cards 2 and 4?
Disregard, I looked deeper into the GitHub instructions and found the margin setting. Setting that to -3px, seems to do the trick.
Does it go if you take this out?
Yes. but so the overlay on the icon
Then you need to apply the gradient to the icon and not the ha-card
I apologize for the noob question, but is Mushroom UI totally separate from the default Lovelace UI? Like if I have built dashboards with the standard Lovelace, and then install Mushroom, will those get upgraded / translated, or will I have to start over? Thanks!
It’s a way of applying a different style to your lovelace dashboard. I understand you can do it through the WYSIWYG but I just use YAML.
I started from scratch, I’d advise creating a new dashboard alongside your existing one until you get at least all of your devices into the dashboard. Once you’re happy, switch over and then spend forever tweaking it as you discover new tricks.
It’s well worth reading through this thread, the answer to most of my questions have been answered here, and it’s a great source of ideas.
type: custom:stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.pogoda_ulitsa_pressure
name: Давление
color: var(--blue-color)
height: 60
hours_to_show: 24
line_width: 1
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 0%, transparent);
}
- type: custom:mushroom-template-card
primary: '{{ states(''sensor.time'') }}'
secondary: '{{ states(''sensor.date'') }}'
card_mod:
style: |
mushroom-card {
text-align: center;
--primary-text-color: orange;
--secondary-text-color: orange;
--card-primary-font-size: 20px;
--card-secondary-font-size: 15px;
}
- type: custom:simple-weather-card
custom:
- temp: sensor.pogoda_ulitsa_temperature
entity: weather.prognoz
name: []
card_mod:
style: |
.weather__icon {
{% set condition = states(config.entity) %}
{% if condition == 'partlycloudy' and is_state('sun.sun', 'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
background-image: url("/local/weather_icons/anim/{{ condition }}.svg") !important;
}
.weather__icon--small {
background-image: url("/local/weather_icons/anim/rainy.svg") !important;
}
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
This is what I use thanks to @rhysb
This is what I use thanks to @rhysb
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.ups_load
primary_info: name
secondary_info: state
name: Load
icon_color: cyan
card_mod:
style: |
ha-card {
z-index: 1;
--ha-card-border-width: 0;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.ups_load
name: Temperature
color: var(--cyan-color)
height: 50
hours_to_show: 24
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 80%;
right: 0px;
bottom: 0px;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color), transparent);
}
Hello, can I have more than one badge on a person card? Thank you
I’m throwing this in here, as it seems useful and can reduce the waiting time for an answer drastically:
Eg if you look for “person”:
I find that very useful, especially in a thread like this, where chances are high, that someone has asked a similar question before. And with, at the time of writing, over 6800 posts…
I constantly stumble upon nice new-for-me ideas with such searches and can only recommend to use it. 
Just to be clear, this is in no way meant to stop you from writing/asking in this thread, but as I said, sometimes one wants to have a quick answer or is just looking for some ideas. Feel free to try it!
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.master_bedroom
icon: mdi:bed
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Master Bedroom
secondary: >-
{{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}°C
| {{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}%
layout: horizontal
tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
double_tap_action:
action: navigate
navigation_path: /dashboard-masrom/master-bedroom
hold_action:
action: toggle
badge_icon: |
{% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
mdi:radiator
{% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: |
{% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
#03A9F4
{% else %} {% endif %}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
--secondary-text-color:
{% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
style: |
mushroom-badge-icon {
left: 69px;
top: 25px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb
secondary: none
entity: light.fan_parents_room
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.fan_parents_room
name: Master Bedroom Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-light-card
entity: light.fan_parents_room
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
badge_color: ''
badge_icon: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
.: |
ha-card {
width: 66px;
margin-left: 68%;
top: -178px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.parents_sleep_mode
state: 'on'
chip:
type: entity
entity: input_boolean.in_bed
icon: mdi:bed
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: input_boolean.parents_room_occupancy
state: 'on'
chip:
type: entity
entity: input_boolean.parents_room_occupancy
icon: mdi:motion-sensor
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: fan.fan_parents_room
state: 'on'
chip:
type: entity
entity: fan.fan_parents_room
icon: mdi:fan
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Fan
content:
type: custom:mushroom-fan-card
entity: fan.fan_parents_room
name: Master Bedroom Fan
icon_animation: true
fill_container: false
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 76%;
top: -186px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px
}
card_mod:
style: |
ha-card {
height: 178px !important;
width: 178px !important;
}
Help, how can I make the icon of the fan rotate if the power of the fan is for example a green icon if the number is 3.
.shape {
{{ '--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;' if states(config.entity) > '29' }}
}
Try like this:
!type: custom:stack-in-card
cards:
- type: custom:mushroom-fan-card
entity: fan.bathroom_fan
icon_animation: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-number-card
entity: input_number.bathroom_fan_timer
display_mode: buttons
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 54px;
width: calc(50% - 54px);
--ha-card-border-width: 0px;
--control-height: 30px;
transition: all 0s;
font-size: calc(var(--control-height) / 2);
}
- type: custom:mushroom-entity-card
entity: script.bathroom_fan_timer
primary_info: none
secondary_info: none
icon: mdi:power
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
right: 0px;
width: fit-content;
--ha-card-border-width: 0px;
}
card_mod:
style: |
ha-card {
{{ '--ha-card-background: color-mix(in srgb, var(--teal-color) 10%, var(--card-background-color));' if is_state('fan.bathroom_fan', 'on') }}
}
style:
ha-tile-icon$: |
ha-svg-icon {
{% if is_state(config.entity,'off') %}
animation: ;
{% elif is_state_attr(config.entity,'percentage',33) %}
animation: rotate 1.2s linear infinite;
{% elif is_state_attr(config.entity,'percentage',66) %}
animation: rotate 0.7s linear infinite;
{% elif is_state_attr(config.entity,'percentage',100) %}
animation: rotate 0.5s linear infinite;
{% elif is_state_attr(config.entity,'mode','auto') %}
animation: rotate 1.2s linear infinite;
{% elif is_state_attr(config.entity,'mode','sleep') %}
animation: rotate 2s linear infinite;
{%- endif %}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
ha-tile-info$: |
.secondary {
opacity: 80%;
}
The intention is to insert it into the icon
{% if is_state(config.entity, '3') %}
...
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state(config.entity, 'on') %}
.shape {
{{ '--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;' if states(config.entity) > '29' }}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 1.7); }
100% { box-shadow: 0 0 0.1px 5px transparent; }
}
ha-icon {
--icon-animation: clip 1.5s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
{% endif %}
}
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.master_bedroom
icon: mdi:bed
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Master Bedroom
secondary: >-
{{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}°C
| {{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}%
layout: horizontal
tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
double_tap_action:
action: navigate
navigation_path: /dashboard-masrom/master-bedroom
hold_action:
action: toggle
badge_icon: |
{% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
mdi:radiator
{% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: |
{% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
#03A9F4
{% else %} {% endif %}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
--secondary-text-color:
{% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
style: |
mushroom-badge-icon {
left: 69px;
top: 25px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb
secondary: none
entity: light.fan_parents_room
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.fan_parents_room
name: Master Bedroom Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-light-card
entity: light.fan_parents_room
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
badge_color: ''
badge_icon: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
.: |
ha-card {
width: 66px;
margin-left: 68%;
top: -178px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.parents_sleep_mode
state: 'on'
chip:
type: entity
entity: input_boolean.parents_sleep_mode
icon: mdi:bed
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: input_boolean.parents_room_occupancy
state: 'on'
chip:
type: entity
entity: input_boolean.parents_room_occupancy
icon: mdi:motion-sensor
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: fan.fan_parents_room
state: 'on'
chip:
type: entity
entity: fan.fan_parents_room
icon: mdi:fan
icon_color: green
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Fan
content:
type: custom:mushroom-fan-card
entity: fan.fan_parents_room
name: Master Bedroom Fan
icon_animation: true
fill_container: false
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: true
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state(config.entity, 'on') %}
.shape {
{{ '--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;' if states(config.entity) > '29' }}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 1.7); }
100% { box-shadow: 0 0 0.1px 5px transparent; }
}
ha-icon {
--icon-animation: clip 1.5s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
{% endif %}
}
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 76%;
top: -186px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px
}
card_mod:
style: |
ha-card {
height: 178px !important;
width: 178px !important;
}
What did I do wrong, that I don’t see a number inside the icon?
For example like here
And how can you make the lamp blink or have a red mark around that it is on
Thank you. I used search and i found this:
it is a template and no person card. So I asked.
Thank you