Yes! Check out my guide here:
easier than telling you every option 
1 Like
fantastic, sorry I missed that!
1 Like
Agree - after a bit of fiddling I came up with this for lights. This’ll come in quite handy with the lot of door/window sensors I need to define in the dashboard. Thanks !!!
card:
square: false
type: grid
columns: 3
card_param: cards
filter:
include:
- domain: light
state: //
name: //
options:
type: custom:mushroom-light-card
vertical: true
tap_action:
action: toggle
double_tap_action:
action: more-info
card_mod: null
style: |
ha-card {
{% set x = states(config.entity) %}
--primary-text-color:
{% if x == "on" %} black ;
{% else %} red;
{% endif %}
--secondary-text-color:
{% if x == "on" %} blue ;
{% else %} magenta;
{% endif %}
background:
{% if x == "on" %}
lightgreen
{% elif x == "off" %}
white
{% else %}
lightgrey
{% endif %}
}
1 Like
With massive help on that forum, I played with my fan cards and ended up with the following.
On the main dashboard screen, I have a simple fan card with a couple of presets and a gear icon that takes me to the detailed settings screen. There I can control not only the fan but also the associated automation and their thresholds.
The cards also have an animated glow effect around the icon to indicate if the automation is on and a double tab action to toggle it on/off.
Simple view
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-fan-card
entity: fan.whisper_flex
name: Cooling Fan
icon_animation: true
show_percentage_control: true
collapsible_controls: true
tap_action:
action: call-service
service: script.fan_on_off_with_automation
hold_action:
action: navigate
navigation_path: /dashboard-mushroom/fan
double_tap_action:
action: navigate
navigation_path: /dashboard-mushroom/fan
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('input_boolean.auto_fan', 'on') %}
.shape {
--shape-animation: ping 5s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
}
100% {
box-shadow: 0 0 5px 5px transparent;
}
}
{% elif is_state('input_boolean.auto_fan', 'off') %}
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: scene.fan_15
icon_color: null
icon: mdi:fan-speed-2
content_info: none
tap_action:
action: call-service
service: script.fan_15
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: scene.fan_20
icon_color: null
icon: mdi:fan-speed-3
content_info: none
tap_action:
action: call-service
service: script.fan_20
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: fan.whisper_flex
icon_color: blue
icon: mdi:cog
content_info: none
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/fan
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
Detailed view
Code
type: custom:stack-in-card
cards:
#Main fan card
- type: custom:mushroom-fan-card
entity: fan.whisper_flex
icon_animation: true
show_percentage_control: true
collapsible_controls: false
tap_action:
action: call-service
service: script.fan_on_off_with_automation
hold_action:
action: navigate
navigation_path: /dashboard-mushroom/fan
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('input_boolean.auto_fan', 'on') %}
.shape {
--shape-animation: ping 5s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
}
100% {
box-shadow: 0 0 5px 5px transparent;
}
}
{% elif is_state('input_boolean.auto_fan', 'off') %}
{% endif %}
#Chips with presets
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: scene.fan_15
icon_color: null
icon: mdi:fan-speed-2
content_info: none
tap_action:
action: call-service
service: script.fan_15
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: scene.fan_20
icon_color: null
icon: mdi:fan-speed-3
content_info: none
tap_action:
action: call-service
service: script.fan_20
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
margin: 0px 12px 0px;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
#Header for Mode control
- type: custom:mushroom-title-card
subtitle: Mode
card_mod:
style: |
ha-card {
margin: -12px 0px 0px;
}
#Mode control
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.whisper_flex
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: nature
target:
entity_id: fan.whisper_flex
icon: mdi:forest
content: Nature
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','nature') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state_attr('fan.whisper_flex','preset_mode','nature') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: fan.whisper_flex
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: sleep
target:
entity_id: fan.whisper_flex
icon: mdi:power-sleep
content: Sleep
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','sleep') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state_attr('fan.whisper_flex','preset_mode','sleep') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: fan.whisper_flex
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: smart
target:
entity_id: fan.whisper_flex
icon: mdi:fan
content: Smart
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','smart') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state_attr('fan.whisper_flex','preset_mode','smart') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: -15px 12px 0px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
#Header for Oscillation control
- type: custom:mushroom-title-card
subtitle: Oscillation and Timer
card_mod:
style: |
ha-card {
margin: 0px 0px 0px;
}
#Oscillation control
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.whisper_flex_horizontal_oscilation
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.whisper_flex_horizontal_oscilation
icon: mdi:pan-horizontal
content: Horizontal
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state('switch.whisper_flex_horizontal_oscilation','on') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state('switch.whisper_flex_horizontal_oscilation','on') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: switch.whisper_flex_vertical_oscilation
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.whisper_flex_vertical_oscilation
icon: mdi:pan-vertical
content: Vertical
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state('switch.whisper_flex_vertical_oscilation','on') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state('switch.whisper_flex_vertical_oscilation','on') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: select.whisper_flex_countdown
tap_action:
action: more-info
icon: mdi:timer-sand-complete
content: '{{states(''select.whisper_flex_countdown'') }} hours'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','smart') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state_attr('fan.whisper_flex','preset_mode','smart') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: -15px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
I had some trouble modifying the spacing before and after the title card but I somehow managed although it is probably not the cleanest approach
ha-card {
margin: -15px 12px 12px;
17 Likes
Please can someone help, I am trying to stop popups on my phone from taking the full screen, I have created this very small test popup and it works fine on my desktop but when opened on my phone its still full screen;
desktop:
phone:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Test Popup
style: |
--popup-min-width: 200px;
--popup-max-width: 290px;
--popup-border-width: var(--ha-card-border-width, 2px);
--popup-border-color: var(--ha-card-border-color, var(--divider-color, #eee));
--popup-border-radius: 28px;
--popup-background-color: var(--ha-card-background, var(--card-background-color, white));
--popup-padding-x: 0px;
--popup-padding-y: 0px;
content:
type: entity
entity: binary_sensor.garage_door
Hoping someone can help me with this one… I’m trying to call the service input_select.select_option while using jinja2 in the option field.
The following code is working perfectly in the dev tools
service: input_select.select_option
target:
entity_id: input_select.home_mode
data:
option: |
{{'Thuis' if states('input_select.home_mode') == 'Hold' else 'Hold'}}
But for some reason it doesn’t work inside the mushroom template card
- type: template
icon: mdi:walk
content: '{{ states(''input_select.home_mode'') }}'
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.home_mode
data:
option: |
{{'Thuis' if states('input_select.home_mode') == 'Hold' else 'Hold'}}
When I press the card it gives me an error
This is not the right place to ask this question. Take it to the browser mod page. This question has nothing to do with mushroom cards.
FYI its a known bug if you looked at just a few recent posts on the right page.
Hello everyone, tell me, maybe someone has examples of flower cards.
Sorry for a delayed reply. I am posting my code below for this card. However, I feel that if you change the setting of your theme to Mushroom Shadow on the viewing device, your line problem may go away.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: 🌡{{ states('sensor.kitchen_temperature') }}°C
icon: mdi:countertop
icon_color: |-
{% set state=states('light.kitchen_cabinet_lights') %}
{% if state=='on' %}
green
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: /dashboard-cards/kitchen
hold_action:
action: none
double_tap_action:
action: none
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: end
chips:
- type: conditional
conditions:
- entity: light.kitchen_cabinet_lights
state: 'on'
chip:
type: entity
entity: light.kitchen_cabinet_lights
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.kitchen_cabinet_lights
content_info: none
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: switch.fridge
state: 'on'
chip:
type: entity
entity: switch.fridge
icon_color: red
tap_action:
action: call-service
service: switch.turn_off
service_data: {}
target:
entity_id: switch.fridge
content_info: none
icon: mdi:fridge-variant
- type: conditional
conditions:
- entity: switch.deep_freezer
state: 'on'
chip:
type: entity
entity: switch.deep_freezer
icon_color: deep-purple
tap_action:
action: call-service
service: switch.turn_off
service_data: {}
target:
entity_id: switch.deep_freezer
content_info: none
icon: mdi:treasure-chest
- type: conditional
conditions:
- entity: fan.kitchen_exhaust_fan
state: 'on'
chip:
type: entity
entity: fan.kitchen_exhaust_fan
icon_color: green
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
{% if states('fan.kitchen_exhaust_fan') == 'on' %}
animation-duration: 1s;
{%- else -%}
{%- endif %}
}
tap_action:
action: call-service
service: fan.turn_off
service_data: {}
target:
entity_id: fan.kitchen_exhaust_fan
content_info: none
icon: mdi:fan
style: |
ha-card {
height: 100px;
{% if is_state('light.kitchen_cabinet_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
view_layout:
grid-area: cen4
card_mod:
style: |
ha-card {
background: none !important;
{% if states('light.kitchen_cabinet_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #56DD3F !important;
{% else %}
{% endif %}
}
1 Like
but I still don’t understand how these conditional cards work? ID card where do I get it? 
Anyone know how to change the size of the font when casting? My Google Hub seems to ignore any of the font stuff.
Hi,
I have problem with animated icon on mushroom chips card. I instaled car mod but I affraid it doesn’t work correctly. Every time when I put some animated code nothings happend. I haven’t expirience of CSS. Mny thanks for help. I enclose code. Please help.
If anyone has been wondering how to create a template card for controlling a fan, including sliding speed control, here’s an example.
type: custom:stack-in-card
cards:
#Template card with all its capabilities available
- type: custom:mushroom-template-card
primary: Cooling Fan
icon: mdi:fan
entity: fan.whisper_flex
tap_action:
action: toggle
#Fan card stripped of all unnecessary components through configuration
- type: custom:mushroom-fan-card
entity: fan.whisper_flex
icon_type: none
primary_info: none
secondary_info: none
show_percentage_control: true
collapsible_controls: true
show_oscillate_control: true
#Car mod to manage the spacing between the two cards
card_mod:
style: |
ha-card {
padding-top: 0px !important;
{% if is_state('fan.whisper_flex', 'off') %}
padding-bottom: 0px !important;
{% endif %}
}
If you set collapsible_controls: false then use this for card_mod instead
card_mod:
style: |
ha-card {
padding-top: 0px !important;
}
Here is my idea for a vacuum control card.
It consists of two cards
-
Main vacuum controls
- Presets for most frequent segments cleaning
- Cogwheel to navigate to another view where I manage other vacuum settings
- Play button to clean all house
- List play for segments selected on the next card
-
Segment selector
- Buttons to select segments for cleaning
- A long tap on the button initiates individual segment cleaning
I also utilize the swipe card to navigate between the two cards on the dashboard.
Code
type: custom:swipe-card
cards:
#Main control card
- type: custom:stack-in-card
cards:
#Card icon and name
- type: custom:mushroom-template-card
primary: Roborock
secondary: '{{ states("sensor.roborock_s7_status") | title }}'
icon: mdi:robot-vacuum
icon_color: |-
{% if not is_state('vacuum.roborock_s7_2', 'docked') %}
amber
{% elif is_state('input_boolean.vacuum_auto_start', 'on') %}
blue
{% else %}
disabled
{% endif %}
entity: vacuum.roborock_s7_2
badge_icon: |-
{% if is_state('input_boolean.vacuum_auto_start', 'on') %}
mdi:home-automation
{% elif is_state('input_boolean.vacuum_auto_start', 'off') %}
{% endif %}
badge_color: |-
{% if is_state('input_boolean.vacuum_auto_start', 'on') %}
blue
{% elif is_state('input_boolean.vacuum_auto_start', 'off') %}
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/vacuum
double_tap_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.vacuum_auto_start
hold_action:
action: navigate
navigation_path: /dashboard-mushroom/vacuum
#Presets
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: scene.fan_20
icon_color: white
icon: mdi:hanger
content_info: none
tap_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 16
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: scene.fan_20
icon_color: white
icon: mdi:chef-hat
content_info: none
tap_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 22
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: scene.fan_20
icon_color: blue
icon: mdi:cog
content_info: none
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/vacuum
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
#Control buttons
- type: custom:mushroom-chips-card
chips:
- type: template
entity: vacuum.roborock_s7_2
tap_action:
action: call-service
service: vacuum.start
target:
entity_id: vacuum.roborock_s7_2
icon: mdi:play
content: null
card_mod:
style: |
ha-card {justify-content: center;}
- type: template
entity: vacuum.roborock_s7_2
tap_action:
action: call-service
service: script.vacuum_selected_rooms
icon: mdi:playlist-check
content: null
card_mod:
style: |
ha-card {justify-content: center;}
- type: template
entity: vacuum.roborock_s7_2
tap_action:
action: call-service
service: vacuum.pause
target:
entity_id: vacuum.roborock_s7_2
icon: mdi:pause
content: null
card_mod:
style: |
ha-card {justify-content: center;}
- type: template
entity: vacuum.roborock_s7_2
tap_action:
action: call-service
service: vacuum.return_to_base
target:
entity_id: vacuum.roborock_s7_2
icon: mdi:home-map-marker
content: null
card_mod:
style: |
ha-card {justify-content: center;}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 0px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
#Segment selector card
- type: custom:stack-in-card
cards:
#First row of buttons
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.vacuum_bathroom
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.vacuum_bathroom
hold_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 24
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
icon: null
content: Bathroom
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_boolean.vacuum_bathroom', 'on') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_boolean.vacuum_bedroom
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.vacuum_bedroom
hold_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 19
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
icon: null
content: Bedroom
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_boolean.vacuum_bedroom', 'on') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_boolean.vacuum_hallway
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.vacuum_hallway
hold_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 16
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
icon: null
content: Hallway
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_boolean.vacuum_hallway', 'on') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_boolean.vacuum_kitchen
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.vacuum_kitchen
hold_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 22
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
icon: null
content: Kitchen
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_boolean.vacuum_kitchen', 'on') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 12px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
#Second row of buttons
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.vacuum_living_room
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.vacuum_living_room
hold_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 23
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
icon: null
content: Living Room
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_boolean.vacuum_living_room', 'on') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_boolean.vacuum_technical
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.vacuum_technical
hold_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 18
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
icon: null
content: Technical
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_boolean.vacuum_technical', 'on') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_boolean.vacuum_toilet
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.vacuum_toilet
hold_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 17
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
icon: null
content: Toilet
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_boolean.vacuum_toilet', 'on') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_boolean.vacuum_veronika_room
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.vacuum_veronika_room
hold_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 20
repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
target:
entity_id: vacuum.roborock_s7_2
icon: null
content: Veronika
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_boolean.vacuum_veronika_room', 'on') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 0px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
18 Likes
Looks good!
Post your finished cards here btw
2 Likes
Hey there! Can anyone help with combining all the smart outlets of a particular selected room into one card, with the ability to disable all outlets by pressing just one card? Thanks!!!
Has anyone successfully managed to make a sticky bottom navbar like this from minimalist? I’ve seen a few posts in this massive thread but they’re often not in a finished state and have a few bugs related. I’d love to see some inspiration, and the code!
5 Likes
Hi guys,
I hope you can help me or guide me in the right direction. I created the following dashboard mainly using mushroom cards. My main idea is that I get only shown the minimum information to have an overview what is going on currently in my house. By clicking on the entity card I get more detailed information for each floor.
On the left side you see how the dashboard currently looks like. Every floor is created with an entity card and several chip cards that are only shown if they have a certain status. Otherwise they remain hidden not to overblow the view.
On the right side you find the dashboard how I would like it to look like. Basically every chip card gets a “header” or “title”. I tried to realize it by stacking a markdown card and a chip card together. But then I can not use it as a chip card anymore. So how do I horizontally stack them aligned at the end.
Thanks for your help.
I was planning to have a look at that too:) Did you try this Mushroom Cards - Build a beautiful dashboard easily 🍄 - #7023 by Guizmos
I have dropped a random card to my dashboard, applied the card mod and it works…but I have an issue with the position of the card. It seems like the further down you place the card (order-wise) the further on top it is placed but some of the cards are still further on top.
