https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/1763
1 Like
inspired by few posts, i’ve finally finished my network / raspberry dashboard for mobile !
some small things to correct though
PS speedtest was not available therefore half of the graph is empty
9 Likes
Thank you all for your help!! This is an amazing card and I’m glad I’m switching over… here’s my latest ‘creation’ using the Mushroom card!
I have a weather station coupled with DarkSky and a couple custom sensors.
I’ve always just loved weather related stuff… Here’s an example of something I wrote for something else…mouseover on the Forecast to get the weather for that day…
I’m hoping at some point to learn to write for HA… I like my custom I build stuff 
7 Likes
Can you post the code pls?
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: grid
square: false
columns: 2
style: ''
cards:
- type: custom:mushroom-template-card
primary: Bedoom
secondary: 'TV: {{ states(''media_player.lg_bedroom_tv'')| string | upper }}'
icon: mdi:bed-double
entity: light.bedroom_light_s
icon_color: |-
{% if is_state('light.bedroom_light_s', 'on') %}
orange
{% endif %}
fill_container: false
multiline_secondary: true
tap_action:
action: navigate
navigation_path: bedroom
hold_action:
action: toggle
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 150px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:layout-card
layout_type: custom:vertical-layout
layout:
width: 20
max_width: 20
max_cols: 1
height: 30
cards:
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
}
chips:
- type: template
icon_color: light-blue
icon: mdi:door-open
tap_action: none
entity: binary_sensor.dressing_door_sensor
style: |
ha-card {
animation: blink 2s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: fan.bedroom_fan
state: 'on'
- type: template
icon_color: green
icon: mdi:fan
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
{% if is_state('fan.bedroom_fan', 'on') %}
animation: rotation 0.5s linear infinite;
{% endif %}
}
- type: conditional
conditions:
- entity: binary_sensor.bedroom_motion_sensor
state: 'on'
- type: template
icon_color: orange
icon: mdi:motion-sensor
card_mod: null
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: light.bedroom_light_s
state: 'on'
chip:
type: template
icon_color: orange
icon: mdi:lightbulb-group
tap_action: none
entity: light.bedroom_light_s
- type: custom:mushroom-chips-card
alignment: left
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.15em
}
chips:
- type: template
content: '{{states(entity)}} °C'
entity: sensor.sonoff_1000aebc88_temperature
icon: mdi:thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state >= '19' %}
red
{% elif state < '19'%}
blue
{% else %}
grey
{% endif %}
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }}{{ state_attr(entity, "unit_of_measurement")
}}
entity: sensor.sonoff_1000aebc88_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement")
}}
entity: sensor.average_indoor_pressure_downstairs
icon: mdi:gauge
icon_color: grey
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(200,200,200,0.02);
}
can any one help to adjust the margin
1 Like
sure, but the images you need to get locally 
Network
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 80%
grid-template-rows: auto
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: custom:mushroom-template-card
icon: a
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/ui/network.png' ) no-repeat center 0px;
background-size: 220px 40px;
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.speedtest_ping
icon: mdi:upload-multiple
icon_color: blue
content: '{{ states(''sensor.gb_sent_monthly'') }} GB/month'
- type: template
entity: sensor.speedtest_ping
icon: mdi:download-multiple
icon_color: deep-orange
content: '{{ states(''sensor.gb_received_monthly'') }} GB/monrh'
alignment: center
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.speedtest_download
color: rgb(255, 87, 34)
max: 400
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 130
- type: custom:mushroom-entity-card
entity: sensor.speedtest_download
primary_info: state
secondary_info: name
name: Download
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
width: 140px;
margin-left: -10px;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.speedtest_ping
primary_info: state
secondary_info: name
name: Ping
icon_color: light-green
icon: mdi:wan
layout: vertical
card_mod:
style: |
ha-card {
margin-top: auto;
width: 140px;
margin-left: auto;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.speedtest_upload
color: rgb(33, 150, 243)
max: 400
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 130
- type: custom:mushroom-entity-card
entity: sensor.speedtest_upload
primary_info: state
secondary_info: name
name: Upload
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
width: 140px;
margin-left: -10px;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_download
line_color: deep-orange
- entity: sensor.speedtest_upload
show_adaptive_color: true
y_axis: secondary
hours_to_show: 24
points_per_hour: 4
line_width: 4
font_size: 50
animate: false
show:
name: false
icon: false
state: false
legend: false
fill: fade
RPI
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: a
fill_container: false
multiline_secondary: false
layout: vertical
tap_action:
action: call-service
service: script.start_radio1
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/ui/raspberry_logo.png' ) no-repeat center 0px;
background-size: 140px 40px;
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.rpi_cpu_temp
color: rgb(255, 87, 34)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.rpi_cpu_temp
primary_info: state
secondary_info: name
name: CPU Temp
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: 140px;
margin-left: -8px;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.memory_use_percent
color: rgb(33, 150, 243)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
primary_info: state
secondary_info: name
name: Memsory used %
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: 140px;
margin-left: -8px;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.disk_use_percent
color: rgb(255, 233, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent
primary_info: state
secondary_info: name
name: Disk used %
icon_color: yellow
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: 140px;
margin-left: -8px;
margin-right: auto;
}
7 Likes
with hvac modes and temperature controls.
Seems I misunderstood the template picture addition in the latest update - I was hoping it would allow to use the entity picture (as in the icon defined on the entity itself).
Anyone know if this is possible ? - I have a bunch of cards that are templated and it would be great if they could just follow the icon for the entity instead of having to re-specify the icon again.
(Similar to the icon_type: entity-picture for other cards)
picture: "{{ state_attr(entity, 'entity_picture') }}"
This should work to use the entity picture 
3 Likes
thanks! - Don’t know why it didn’t dawn on me that the icon may be one of the attributes!
It works fine with;
{{ state_attr(entity, 'icon') }}
1 Like
Can you share the code for this part ? It looks lovely.
6 Likes
I’m at work and can’t browse to Github thanks to our firewalls so can’t see release notes, does this support thermostats with high and low setpoints? I’ve struggled with anything but the standard thermostat card because of this with just about every other thermostat card. Hoping it does!
It does support heat/cool mode, from my testing with the demo climate platform.
Is there a way for me to expose the source selector on a media card? I use a multizone matrix (Russound) with multiple sources to multiple zones.
This is with the mini-media-player card:
And this is where I would love to put a source select dropdown:
Can this be done?
BTW, I love this add-on.
This is really nice! Would you mind posting up your code for this?
tried recreating your alexa tts card. How are you removing the space between the two different cards?
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: media_player.office_echo
- type: custom:mini-media-player
entity: media_player.office_echo
tts:
platform: alexa
enity_id: media_player.office_echo
hide:
name: true
source: true
power: true
volume: true
next: true
prev: true
play_pause: true
play_stop: true
icon: true
card_mod:
style: |
mushroom-card {
background: rgba(10,70,170,0.2);
padding: 6px;
border-radius: 12px
}
ha-card {
box-shadow: none !important;
padding-top: 0px !important;
padding-bottom: 10px !important;
--card-primary-font-size: 18px;
--card-primary-font-weight: 300 !important;
}
1 Like
you can find it above 
I use these cards for all of my dashboards and finally there is a climate card, thank you so much for these amazing work, just beautiful. There is just one small issue with eq3 thermostats. They have the HVAC mode ‘idle’
Now all my thermostats showing heating, but they are idle.
Can you please add this mode?
What do you mean idle ? What does it show in devoloper settings ?