Have a look at this example here
Is there a css file for Mushroom cards? I’d like to peek at it
I’m not sure I understand what you mean?
You can view all of piitaya’s source code on his GitHub https://github.com/piitaya/lovelace-mushroom
Happy Days!!
Somewhere someone posted all the css tags and I can’t find it…ugh… I wanted to see it again
I have tried various ways I have seen posted here to remove the shadow behind the pinwheel and I have had no success.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: |
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:fan-off
{% elif mode == 'cool' %}
mdi:pinwheel
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'idle' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon
{
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{%- endif %}
--shape-color: none !important;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
padding-bottom: 14px !important;
}
entity: climate.daniel_s
tap_action:
action: more-info
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.daniel_s
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °F'
entity: climate.daniel_s
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.daniel_s
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: template
tap_action:
action: more-info
content: >
{{ states('input_boolean.daniels_humidifier_status') |
replace('off','Off') | replace('on','On') }}
entity: input_boolean.daniels_humidifier_status
icon: mdi:air-humidifier
icon_color: blue
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: '{{ states(entity) | round(0) }}% Humidity'
entity: sensor.daniels_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: transparent
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: |
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:fan-off
{% elif mode == 'cool' %}
mdi:pinwheel
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'idle' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon
{
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{%- endif %}
--shape-color: none !important;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
padding-bottom: 14px !important;
}
entity: climate.daniel_s
tap_action:
action: more-info
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.daniel_s
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °F'
entity: climate.daniel_s
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.daniel_s
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: template
tap_action:
action: more-info
content: >
{{ states('input_boolean.daniels_humidifier_status') |
replace('off','Off') | replace('on','On') }}
entity: input_boolean.daniels_humidifier_status
icon: mdi:air-humidifier
icon_color: blue
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: '{{ states(entity) | round(0) }}% Humidity'
entity: sensor.daniels_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: transparent
4 Likes
Sure:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 1px !important;
}
primary: Airco Kantoor
secondary: |
Currently: {{ states('climate.kantoor') }}
icon: |-
{% set mode = states('climate.kantoor') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% elif mode == 'fan_only' %}
mdi:fan
{% elif mode == 'dry' %}
mdi:water-percent
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set mode = states('climate.kantoor') %}
{% if mode == 'off' %}
grey
{% elif mode == 'cool' %}
blue
{% elif mode == 'heat' %}
red
{% elif mode == 'heat_cool' %}
orange
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.kantoor
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
dry: false
fan_only: false
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
alignment: justify
chips:
- type: template
entity: climate.kantoor
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °C'
entity: climate.kantoor
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% elif state=='heat_cool' %}
orange
{% else %}
grey
{% endif %}
- type: weather
entity: weather.asterstraat
show_conditions: true
show_temperature: true
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% Humidity'
entity: sensor.kantoor_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #262626;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.kantoor
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
dry:
name: Dry
fan_only:
name: Fan only
- type: grid
square: false
columns: 2
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: #262626;
margin-right: 5px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 5px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.kantoor
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
dry: false
fan_only: false
fan:
quiet:
name: Quiet
icon: mdi:fan
low:
name: Low
icon: mdi:fan-speed-1
medium:
name: Medium
icon: mdi:fan-speed-2
high:
name: High
icon: mdi:fan-speed-3
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: #262626;
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.kantoor
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
swing:
vertical:
name: Quiet
icon: mdi:swap-vertical-variant
- type: custom:mushroom-entity-card
entity: sensor.gemiddeldetempkantoor
primary_info: state
secondary_info: name
name: Inside
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.presence_vr
primary_info: state
secondary_info: name
name: Outside
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.gemiddeldetempkantoor
name: Inside Temperature
color: '#4caf50'
- entity: sensor.presence_vr
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Credits aren’t for me, I just altered some attributes. I still have to fiddle a bit around with the aligning of the boxes.
Hi, in the card light I would like to show only the temperature control slider. Also, even when the light is off, I would like the slider to color instead of gray. Is it possible to do such a thing?
Hi, #metoo trying to spin icon. Went through above examples, seems not to be smart enough to make it work.
Here’s my code:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.bathroom_mid_temp_humidity'') }} %'
secondary: ''
icon: |-
{% if is_state('switch.bathroom_mid_fan','on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
layout: vertical
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
entity: switch.bathroom_mid_fan
icon_color: |-
{% if is_state('switch.bathroom_mid_fan','on') %}
yellow
{% else %}
white
{% endif %}
card_mod:
style: |
mushroom-shape-icon:
$: |
.shape ha-icon {
{% set state = states('switch.bathroom_mid_fan') %}
{% if state == 'on' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--icon-size: 64px;
}
Any idea what is wrong?
Regards,
Maciek
I made a thing.
It’s not fully finished yet, and taken inspiration from work here (as well as some code) but I’m pretty happy with the effort and outcome.
The two kids bedrooms are completed, with the main banner images changing colour based on the lights in the room which is my most favourite thing of the whole thing.
But I like being able to see all the stats, and things like motion and doors straight away on each card, and the colour is just really attractive.
14 Likes
Love the work, images for the rooms are fun. Would you be happy to share the image sources and the code of one of the completed kids bedrooms. Thanks.
I tried this with no luck.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: >
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') | replace
('cooling','Cooling') | replace ('heating','Heating') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:fan-off
{% elif mode == 'cool' %}
mdi:pinwheel
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'idle' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon
{
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{%- endif %}
--shape-color: none !important;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
padding-bottom: 14px !important;
}
entity: climate.daniel_s
tap_action:
action: more-info
3 Likes
Looks great!
Have you just dimmed the picture like did above? Or did you alter the pictures itselves to have only the lights and screens shine?
That be my next step, similar as the floor plan cards but for every room.
1 Like
Nice! I’ve been trying to get color working as well. Mind sharing your code?
Thanks a lot, it worked!!!
Hi Pittaya
May I ask a question ? How do we display time format without a translated state ?
I mean I want to display this :
Like this :
What am I not seeing here? Here’s a template card I created but it’s not showing ‘open’ or ‘closed’ but ‘on’ or ‘off’… the entity is reporting correctly but the card is not showing it for some reason.
- type: custom:mushroom-template-card
primary: 'TV Window: {{ states("binary_sensor.tv_window_sensor_contact") }}'
secondary: 'Battery: {{ states("sensor.tv_window_sensor_battery") }}%'
entity: binary_sensor.tv_window_sensor_contact
icon: mdi:account-box
name: Motion
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
Here’s a picture showing nothing but doors and windows that are saying either ‘on’ or ‘off’…
How can I make them show ‘Open’ or ‘Closed’?
Thank you all!!!
1 Like
Try this
You can search for “epic time conversion” for much more guidance. I’ve found time conversion to be surprisingly (unnecessarily?) complicated.
Just substitute an if (or iif) statement to make it read however you’d prefer (i.e. turn on to open, etc.).
Alternatively, you might be able to change it on the backend.