I’m not sure if someone has made this by now, but I saw several people were looking to have a room card in their mushroom dashboard as can be done with the ‘Minimalist’ UI. It’s not entirely foolproof and may need polishing or might be be conflicting some basic CSS rules, I’m not a web developer but used card-mod to get it at least looking like what I wanted.
Maybe it can be a useful start for someone looking for something like this.
This is the code used for the left living room card:
type: custom:stack-in-card
mode: horizontal
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.badkamer_temperature
name: Living Room
primary_info: name
secondary_info: state
icon: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
display: none !important;
}
.: |
ha-card {
border: 0px;
padding-left: 2px;
padding-top: 10px;
width: 500px;
}
- type: custom:mushroom-entity-card
entity: scene.food
layout: horizontal
icon: mdi:sofa
icon_color: blue
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 150px;
}
.: |
ha-card {
border: 0px;
margin-left: -30px;
margin-bottom: -30px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: scene.food
tap_action:
action: perform-action
perform_action: scene.turn_on
target:
entity_id: scene.food
data:
transition: 5
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:silverware-fork-knife
card_mod:
style: |
ha-card {
--chip-background: rgba(255,165,0,0.1) !important;
--color: orange;
justify-content: center;
height: 44px !important;
width: 44px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 22px !important;
}
- type: template
icon: mdi:television
tap_action:
action: perform-action
perform_action: script.tv
target: {}
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: rgba(37,57,38,255);
--color: rgba(76,175,80,255);
justify-content: center;
height: 44px !important;
width: 44px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 22px !important;
}
- type: template
icon: mdi:sleep
tap_action:
action: perform-action
perform_action: script.bedtime
target: {}
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
justify-content: center;
height: 44px !important;
width: 44px !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 22px !important;
--chip-background: rgba(51,43,62,255);
--color: rgba(146,107,199,255);
}
card_mod:
style: |
.chip-container {
flex-flow: column wrap-reverse !important;
display: flex !important;
--chip-spacing: 8px;
margin: 12px;
}
.: |
.container {
align: end;
}
card_mod:
style: |
ha-card {
max-width: 100%;
min-width: 50%;
}
For those interested, I’m using it on an NS Panel Pro looking like this:
