This works for me
card_mod:
style: |
ha-card {
border-radius: 30px;
width: 70px;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 10px;
}
2 Likes
Worked perfectly. Thank you!
Dang that looks great! Question, how did you made those buttons (2nd row) in that particular shape?
I use this
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
You can do this with layout card, specifically the custom:grid-layout.
For the page layout you have to select ‘Grid’ and then add some code below, for example:
grid-template-columns: 0.5em 22em 22em 22em 0.5em
grid-template-rows: 9em auto auto
grid-gap: 0.7em
grid-template-areas: |
"welcome welcome welcome . ."
". left1 center1 right1 ."
". left2 center2 right2 ."
mediaquery:
'(max-width: 400px)':
grid-template-columns: 3% 94% 3%
grid-template-rows: auto
grid-gap: 0em
grid-template-areas: |
". welcome ."
". left1 ."
". left2 ."
". center1 ."
". center2 ."
". right1 ."
". right2 ."
This code creates 3 main columns for tablets/desktop, which you can fill with vertical stacks. For phones (less than 400px wide) it stacks the columns instead. All with a certain column width and row height.
2 Likes
Hello guys, have my dashboard almost with mushroom cards and it is lovely.
Is there anyway to have a light entity with a timer? Basically when the light is on it goes off after x time and a timer to see how may time is remaining?
thank you
@rhysb would you help me with this? I got this icon that i want to ‘boink’ (animate) on a specific state. No clue what im missing here.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:nas
icon_color: green
content: '{{ states(entity) }}'
entity: sensor.sabnzbd_status
tap_action:
action: more-info
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{% if is_state('sensor.sabnzbd_status', 'idle') %}
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
Refer to this post.
1 Like
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Garage Door
secondary: >-
{% if is_state('cover.garage_door','open') and
is_state('binary_sensor.garage_door_open','on') %}
Open and Unlocked
{% elif is_state('binary_sensor.garage_door_open','on') %}
Door Open
{% elif is_state('cover.garage_door','open') %}
Unlocked
{% else %}
Closed
{% endif%}
icon: >-
{% if is_state('cover.garage_door','open') and
is_state('binary_sensor.garage_door_open','on') %}
mdi:garage-open-variant
{% elif is_state('binary_sensor.garage_door_open','on') %}
mdi:garage-open-variant
{% elif is_state('cover.garage_door','open') %}
mdi:garage-alert-variant
{% else %}
mdi:garage-variant-lock
{% endif%}
icon_color: >-
{% if is_state('cover.garage_door','closed') and
is_state('binary_sensor.garage_door_open','off') %}
green
{% else %}
red
{% endif%}
badge_icon: |-
{% set bl = states('sensor.garage_door_sensor_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 %}
badge_color: |-
{% set bl = states('sensor.garage_door_sensor_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} disabled
{% endif %}
tap_action:
action: none
card_mod:
style: |
mushroom-badge-icon {
left: -3px;
}
- type: custom:mushroom-cover-card
entity: cover.garage_door
name: Garage Door
primary_info: none
secondary_info: none
icon_type: none
tap_action:
action: none
show_buttons_control: true
card_mod:
style: |
ha-card {
margin-top: -12px;
}
card_mod:
style: |
ha-card {
{% if is_state('cover.garage_door','closed') and
is_state('binary_sensor.garage_door_open','off') %}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
}
Ok, i found a solution
with ha-card, just add this :
--primary-text-color: transparent;
--secondary-text-color: transparent;
Complete style code :
card_mod:
style: |
:host {
--mush-icon-size: 65px;
}
ha-card {
{% if not is_state(config.entity, 'unavailable') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color)0.5);
background-blend-mode: overlay;
--primary-text-color: transparent;
--secondary-text-color: transparent;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
Example with my computer card :
3 Likes
missing endif after animation
{% endif %}
1 Like
I am using unifi_status to get all the UDM stats and the official unifi Protect integration to get the CPU temperature.
I have created extra sensors from the unifi_status attributes to make things easier.
unifi_status
- platform: unifi_status
host: [UDM_IP]
port: 8443
username:[USER]
password: *********
verify_ssl: false
version: UDMP-unifiOS
monitored_conditions:
- wan
- www
- lan
- wlan
- firmware
- platform: template
sensors:
unifi_status_wan_cpu:
friendly_name: "CPU"
unit_of_measurement: "%"
value_template: "{{ states.sensor.unifi_status_wan.attributes['gw_system-stats']['cpu'] }}"
unifi_status_wan_mem:
friendly_name: "Memory"
unit_of_measurement: "%"
value_template: "{{ states.sensor.unifi_status_wan.attributes['gw_system-stats']['mem'] }}"
unifi_status_wan_ip:
friendly_name: "WAN IP"
value_template: "{{ states.sensor.unifi_status_wan.attributes.wan_ip }}"
unifi_status_wan_download:
friendly_name: "WAN Download"
unit_of_measurement: Kbps
icon_template: "mdi:progress-download"
value_template: "{{ (states.sensor.unifi_status_wan.attributes['rx_bytes-r'] / 1024) | int }}"
unifi_status_wan_upload:
friendly_name: "WAN Upload"
unit_of_measurement: Kbps
icon_template: "mdi:progress-upload"
value_template: "{{ (states.sensor.unifi_status_wan.attributes['tx_bytes-r'] / 1024) | int }}"
unifi_status_firmware_version:
friendly_name: "UDM Firmware Version"
icon_template: "mdi:database-plus"
value_template: "{{ states.sensor.unifi_status_wan.attributes.gw_version }}"
unifi_status_www_speedtest_down:
friendly_name: "UDM Speedtest Download"
unit_of_measurement: Mbps
icon_template: "mdi:progress-download"
value_template: "{{ states.sensor.unifi_status_www.attributes.xput_down | int }}"
unifi_status_www_speedtest_up:
friendly_name: "UDM Speedtest Upload"
unit_of_measurement: Mbps
icon_template: "mdi:progress-upload"
value_template: "{{ states.sensor.unifi_status_www.attributes.xput_up | int }}"
unifi_status_www_speedtest_ping:
friendly_name: "UDM Speedtest Ping"
unit_of_measurement: ms
icon_template: "mdi:progress-clock"
value_template: "{{ states.sensor.unifi_status_www.attributes.speedtest_ping }}"
The cards are all using using decluttering_templates
decluttering_templates
decluttering_templates:
graph_template:
default:
- name: ''
- icon: ''
- unit: ''
- color: '#2196f3'
- hours: 24
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: '[[entity]]'
secondary: |
{{ '[[name]]' or state_attr('[[entity]]', 'friendly_name') }}
primary: >
{{ states('[[entity]]') }} {{ '[[unit]]' or state_attr('[[entity]]',
'unit_of_measurement') or '' }}
icon: >
{{ '[[icon]]' or state_attr('[[entity]]', 'icon') or
'mdi:chart-line' }}
icon_color: '[[color]]'
card_mod:
style: |
:host {
--mush-icon-size: 42px;
}
tap_action:
action: more-info
- type: custom:mini-graph-card
entities:
- entity: '[[entity]]'
color: '[[color]]'
hours_to_show: '[[hours]]'
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
entity_chips:
default:
- name: ''
- icon: ''
- unit: ''
- color: '#2196f3'
- state: ''
card:
type: custom:stack-in-card
mode: horizontal
card_mod:
style:
hui-horizontal-stack-card$: |
#root {
align-items: center;
}
cards:
- type: custom:mushroom-template-card
entity: '[[entity]]'
primary: |
{{ '[[name]]' or state_attr('[[entity]]', 'friendly_name') }}
secondary: >
{{ [[state]] or states('[[entity]]') }} {{ '[[unit]]' or
state_attr('[[entity]]', 'unit_of_measurement') or '' }}
icon: >
{{ '[[icon]]' or state_attr('[[entity]]', 'icon') or
'mdi:progress-question' }}
icon_color: '[[color]]'
tap_action:
action: more-info
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-spacing: 12px;
--chip-background: transparent;
--chip-padding: 0 0px;
}
.chip-container {
justify-content: end !important;
padding-right: 12px;
}
chips: '[[chips]]'
The code for the device and graph cards
device
type: custom:decluttering-card
template: entity_chips
variables:
- entity: sensor.unifi_status_wan
- name: UDM-SE
- state: states('sensor.unifi_status_firmware_version')
- color: >-
{{ 'orange' if states('sensor.unifi_status_firmware_upgradable') != '0'
else 'green' if is_state(entity, 'OK') else 'red' }}
- chips:
- type: entity
entity: sensor.unifi_status_www_speedtest_down
- type: entity
entity: sensor.unifi_status_www_speedtest_up
- type: entity
entity: sensor.unifi_status_www_speedtest_ping
graphs
type: grid
square: false
columns: 3
cards:
- type: custom:decluttering-card
template: graph_template
variables:
- entity: sensor.udm_se_cpu_utilization
- name: Processor
- icon: mdi:cpu-64-bit
- hours: 24
- type: custom:decluttering-card
template: graph_template
variables:
- entity: sensor.udm_se_cpu_temperature
- color: orange
- name: Temperature
- icon: mdi:thermometer
- type: custom:decluttering-card
template: graph_template
variables:
- entity: sensor.udm_se_memory_utilization
- color: teal
- name: Memory
6 Likes
Hi
Thank you for the info.
It was enough to activate the temperature entity in Unifi Protect integration.
Here is my card:
With dynamic change of icon colors
1 Like
Hi, thanks for your reply @Kollisionskurs, however your suggestion doesn’t seem to work out the problem 
hi together,
after several month break i started from scratch with my Dashboard.
At the moment i am experimenting with some cards an try to test so ideas
One Questions, where i think its possible… but how
For the color of the icon i want to use the theme variable.
If i use orange, red, yellow it works - so the error is on my side, how i try to use the variable of the theme
I rechecked every line now. Could it be the case that animated icons dont work with mushroom chips?
- type: template
icon: mdi:robot-vacuum
icon_color: |-
{% if is_state('vacuum.roborock_s5_max', 'docked') %}
blue
{% else %} green
{% endif %}
entity: vacuum.roborock_s5_max
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: boing 3s ease infinite;' if is_state(vacuum.roborock_s5_max, 'cleaning') }}
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
Try with this :
- type: template
icon: mdi:robot-vacuum
icon_color: |-
{% if is_state('vacuum.roborock_s5_max', 'docked') %}
blue
{% else %} green
{% endif %}
entity: vacuum.roborock_s5_max
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('vacuum.roborock_s5_max', 'cleaning') %}
--icon-animation: boing 3s ease infinite;
{% endif %}
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
1 Like
Hey there, sadly this didn’t work. Im al out of idea’s, something tells me this is a very minor thing that im overlooking. 
try :
type: custom:mushroom-template-card
icon: mdi:robot-vacuum
icon_color: |-
{% if is_state('vacuum.roborock_s5_max', 'docked') %}
blue
{% else %} green
{% endif %}
entity: vacuum.roborock_s5_max
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('vacuum.roborock_s5_max', 'cleaning') %}
--icon-animation: boing 3s ease infinite;
{% endif %}
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
Type is not “template” but “custom:mushroom-template-card”
Works for me 
2 Likes