Looks fine, it just means use folded style.
You should have card_mod: before style. Copy the code I posted into a new card and see what it does.
hello, is it possible to add a dynamic volume level slider to the media card? when i want to adjust the volume on the tablet, sometimes the neighbors are awake.
As a new card it works. So I guess now I try to implement it into that existing mess of code and see if it’ll stick this time.
ETA: After much identation fun, I’ve got it working - thank you!
1 Like
Hello!
Your media card looks amazing and is exactly what i need. Could you please share your code? Thanks a lot!
Stefan
Hello!
I wanted to share my dashboards that was inspired by you all (special thanks to @piitaya and @rhysb). If you need my code, feel free to reach out.
NB: Open images in new tab
Home:
Switches:
Sensors:
Devices:
Media:
Computers:
Cameras:
EDIT: Updated screenshots
17 Likes
Thank you.
Is it possible to a the area name e.g. as the secondary information?
E.g. i have a light with a friendly name like livingroom.chandelier and another one like hall.chandelier.
I would like to rename them to chandelier, but when they are on i do not know which is which.
Adding the area name as a secondary info would help a lot.
Someone should definitely set up a website with examples and how to 
1 Like
Sure, try something like this:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
list | count }}
entity: group.all_lights
icon_color: grey
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style:
mushroom-state-info$: |
.secondary {
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: "{{ area_name(config.entity) }}";
}
.: |
ha-card {
background: none;
padding: 4px 16px !important;
--ha-card-box-shadow: 0px;
}
- entity_id: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-state-light), 0.1);
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
1 Like
Great work! Could you share your code?
Thanks!!!
I have tried inside entities card but then i get a border and smaller
The bottom image is inside a the entities card.
Using any of this method i don’t get the transition…
type: entities
entities:
- type: custom:stack-in-card
cards:
- type: custom:fold-entity-row
head:
type: custom:mushroom-entity-card
entity: sensor.passadeira_power
name: Passadeira
primary_info: name
secondary_info: state
layout: horizontal
icon: mdi:dumbbell
icon_color: light-green
multiline_secondary: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
}
padding: 0
entities:
- type: custom:mini-graph-card
entities:
- entity: sensor.passadeira_power
line_color: deep-orange
hours_to_show: 24
points_per_hour: 4
line_width: 1
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: true
fill: fade
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
}
card_mod:
style:
hui-vertical-stack-card$:
fold-entity-row$: |
ha-icon {
background: none !important;
margin-right: 24px !important;
--toggle-icon-width: 21px !important;
color: rgb(var(--rgb-disabled-color));
transition: transform 0.14s !important;
}
1 Like
Finally making some progress with the fold entities & auto-entities now 2 layout questions:
@rhysb (or others) Any way to get the fold entity chevron within the card outline (red below) instead of outside the darker background? [SOLVED]
Is there a way to have the expand of the auto entity to go underneath both horizontal stacked cards instead of only under the first card? Again red space in picture below.
Used code:
type: horizontal-stack
cards:
- type: custom:fold-entity-row
head:
type: custom:mushroom-template-card
entity: sensor.other_measured_devices_power
primary: Other Devices
secondary: |
{{ states('sensor.other_measured_devices_power') | round(0) }} W
icon_color: >
{% set power = states('sensor.other_measured_devices_power') | int %} {%
if power < 160 %} green {% elif power < 200 %} blue {% elif power < 300
%} amber {% elif power < 400 %} red {% else %} grey {% endif %}
icon: mdi:dishwasher
style: |
ha-card {
box-shadow: none;
}
entities:
- type: custom:auto-entities
card:
type: vertical-stack
card_param: cards
filter:
include:
- group: group.test_powercalc
options:
type: custom:mushroom-entity-card
primary_info: name
layout: horizontal
exclude:
- state: unavailable
- state: < 2'
sort:
method: state
reverse: true
numeric: true
- type: custom:fold-entity-row
head:
type: custom:mushroom-light-card
entity: sensor.other_measured_devices_power
icon: mdi:dishwasher
style: |
ha-card {
box-shadow: none;
}
entities:
- type: custom:auto-entities
card:
type: vertical-stack
card_param: cards
filter:
include:
- group: group.test_powercalc
options:
type: custom:mushroom-entity-card
primary_info: name
layout: horizontal
exclude:
- state: unavailable
- state: < 2'
sort:
method: state
reverse: true
numeric: true
Check this
type: entities
entities:
- type: custom:stack-in-card
cards:
- type: custom:fold-entity-row
head:
type: custom:mushroom-entity-card
entity: sensor.passadeira_power
name: Passadeira
primary_info: name
secondary_info: state
layout: horizontal
icon: mdi:dumbbell
icon_color: light-green
multiline_secondary: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
}
padding: 0
entities:
- type: custom:mini-graph-card
entities:
- entity: sensor.passadeira_power
line_color: deep-orange
hours_to_show: 24
points_per_hour: 4
line_width: 1
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: true
fill: fade
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
}
card_mod:
style:
hui-vertical-stack-card$:
fold-entity-row$: |
ha-icon {
background: none !important;
margin-right: 24px !important;
--toggle-icon-width: 21px !important;
color: rgb(var(--rgb-disabled-color));
transition: transform 0.14s !important;
}
card_mod:
style: |
ha-card {
margin-left: 0px;
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
padding: 0px 0px;
}
ha-card #states{
padding:0px;
}
Thank you!!!
1 Like
@codedmind I noticed your earlier post and had already tried parts of your code but no luck. I guess it’s a card mod that does the trick?
Try this code… i just use one horizontal card but should be possible add more
type: entities
entities:
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:fold-entity-row
head:
type: custom:mushroom-template-card
entity: sensor.other_measured_devices_power
primary: Other Devices
secondary: |
{{ states('sensor.other_measured_devices_power') | round(0) }} W
icon_color: >
{% set power = states('sensor.other_measured_devices_power') | int %} {% if power < 160
%} green {% elif power < 200 %} blue {% elif power < 300 %} amber {%
elif power < 400 %} red {% else %} grey {% endif %}
icon: mdi:dishwasher
style: |
ha-card {
box-shadow: none;
}
entities:
- type: custom:auto-entities
card:
type: vertical-stack
card_param: cards
filter:
include:
- group: group.test_powercalc
options:
type: custom:mushroom-entity-card
primary_info: name
layout: horizontal
exclude:
- state: unavailable
- state: < 2'
sort:
method: state
reverse: true
numeric: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
}
card_mod:
style:
hui-vertical-stack-card$:
fold-entity-row$: |
ha-icon {
background: none !important;
margin-right: 24px !important;
--toggle-icon-width: 21px !important;
color: rgb(var(--rgb-disabled-color));
transition: transform 0.14s !important;
}
card_mod:
style: |
ha-card {
margin-left: 0px;
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
padding: 0px 0px;
}
ha-card #states{
padding:0px;
}
card_mod:
style: |
ha-card {
margin-left: 0px;
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
padding: 0px 0px;
}
ha-card #states{
padding:0px;
}
1 Like
Thanks! This works. Guess its the stack in stack element.
@codedmind update. If you look at picture below you can see that the modified card is slightly lighter grey (where the chevron sits vs the rest of the left card & compared to the right card. Do you know what part of you code is potentially causing this? Not super easy to see, but it is there
This shows it better (top card vs bottom card). My cards have a slight opacity, could it be your card mod ‘overrides’ that?
It’s still very much a work in progress. When I have time I’ll probably make it into a custom tab card.
type: custom:stack-in-card
title: null
mode: vertical
card_mod:
style: |
ha-card {
padding: 15px 0 5px 0;
}
cards:
- type: conditional
conditions:
- entity: input_select.tabcontroller
state: power
card:
type: custom:stack-in-card
title: null
mode: vertical
cards:
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-entity-card
entity: person.jelle_smits
icon_type: entity-picture
card_mod:
style: |
ha-card {
margin-right: -4px;
}
- type: custom:mushroom-entity-card
entity: person.evi_pasveer
icon_type: entity-picture
card_mod:
style: |
ha-card {
margin-left: -4px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.power_consumed
color: rgb(var(--rgb-red-color))
show:
name: false
points: false
icon: false
state: false
legend: false
height: 150
decimals: 3
hour24: true
hours_to_show: 2
points_per_hour: 10
tap_action:
action: navigate
navigation_path: /energy
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 15px;
}
- type: conditional
conditions:
- entity: input_select.tabcontroller
state: light
card:
square: false
columns: 1
type: grid
cards:
- type: custom:mushroom-template-card
primary: Alle lampen
secondary: |-
{% if is_state('light.all', 'on') %}
Nu uitschakelen
{% else %}
Uitgeschakeld
{% endif %}
icon: mdi:lightbulb-group
icon_color: |-
{% if is_state('light.all', 'on') %}
orange
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: call-service
service: light.turn_off
data: {}
target:
entity_id: light.all
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 15px;
}
- type: conditional
conditions:
- entity: input_select.tabcontroller
state: detect
card:
square: false
columns: 1
type: grid
cards:
- type: tile
entity: input_boolean.sleeping_detection
color: green
name: Oplaad detectie
tap_action:
action: toggle
icon_tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 15px;
}
- type: tile
entity: binary_sensor.slaap_tijd
color: green
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 15px;
}
- type: conditional
conditions:
- entity: input_select.tabcontroller
state: mode
card:
square: false
columns: 1
type: grid
cards:
- type: custom:mushroom-template-card
primary: Thuis
secondary: |-
{% if is_state('input_select.modus', 'Thuis') %}
Actief
{% endif %}
icon: mdi:home-outline
tap_action:
action: call-service
service: input_select.select_option
data:
option: Thuis
target:
entity_id: input_select.modus
hold_action:
action: none
double_tap_action:
action: none
icon_color: |-
{% if is_state('input_select.modus', 'Thuis') %}
blue
{% endif %}
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 15px;
}
- type: custom:mushroom-template-card
primary: Slapen
secondary: |-
{% if is_state('input_select.modus', 'Slapen') %}
Actief
{% endif %}
icon: mdi:bed
tap_action:
action: call-service
service: input_select.select_option
data:
option: Slapen
target:
entity_id: input_select.modus
hold_action:
action: none
double_tap_action:
action: none
icon_color: |-
{% if is_state('input_select.modus', 'Slapen') %}
blue
{% endif %}
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 15px;
}
- type: custom:mushroom-template-card
primary: Ga slapen
secondary: |-
{% if is_state('input_select.modus', 'Ga slapen') %}
Actief
{% endif %}
icon: mdi:bed-clock
tap_action:
action: call-service
service: input_select.select_option
data:
option: Ga slapen
target:
entity_id: input_select.modus
hold_action:
action: none
double_tap_action:
action: none
icon_color: |-
{% if is_state('input_select.modus', 'Ga slapen') %}
blue
{% endif %}
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 15px;
}
- type: custom:mushroom-template-card
primary: Afwezig
secondary: |-
{% if is_state('input_select.modus', 'Afwezig') %}
Actief
{% endif %}
icon: mdi:shield-home
tap_action:
action: call-service
service: input_select.select_option
data:
option: Afwezig
target:
entity_id: input_select.modus
hold_action:
action: none
double_tap_action:
action: none
icon_color: |-
{% if is_state('input_select.modus', 'Afwezig') %}
blue
{% endif %}
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 15px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.power_consumed
primary_info: none
secondary_info: state
layout: vertical
icon_color: red
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: call-service
service: input_select.select_option
data:
option: power
target:
entity_id: input_select.tabcontroller
card_mod:
style: |
ha-card {
{% if is_state('input_select.tabcontroller', 'power') %}
background: rgba(0,0,0,0.2) !important;
{% endif %}
width: 90px;
border-radius: 20px !important;
margin: 10px auto;
}
- type: custom:mushroom-entity-card
entity: sensor.lights_on_amount
primary_info: none
secondary_info: state
icon: mdi:lightbulb-group
layout: vertical
icon_color: orange
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: call-service
service: input_select.select_option
data:
option: light
target:
entity_id: input_select.tabcontroller
card_mod:
style: |
ha-card {
{% if is_state('input_select.tabcontroller', 'light') %}
background: rgba(0,0,0,0.2) !important;
{% endif %}
width: 90px;
border-radius: 20px !important;
margin: 10px auto;
}
- type: custom:mushroom-entity-card
entity: input_boolean.sleeping_detection
primary_info: none
secondary_info: state
icon_color: green
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: call-service
service: input_select.select_option
data:
option: detect
target:
entity_id: input_select.tabcontroller
card_mod:
style: |
ha-card {
{% if is_state('input_select.tabcontroller', 'detect') %}
background: rgba(0,0,0,0.2) !important;
{% endif %}
width: 90px;
border-radius: 20px !important;
margin: 10px auto;
}
- type: custom:mushroom-entity-card
entity: input_select.modus
icon: mdi:state-machine
primary_info: none
secondary_info: state
icon_color: blue
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: call-service
service: input_select.select_option
data:
option: mode
target:
entity_id: input_select.tabcontroller
card_mod:
style: |
ha-card {
{% if is_state('input_select.tabcontroller', 'mode') %}
background: rgba(0,0,0,0.2) !important;
{% endif %}
width: 90px;
border-radius: 20px !important;
margin: 10px auto;
}
24 Likes
Is there a know issue that Mushroom causes high CPU usage?
I suffer from this but managed to get it under control by deleting a lot of mushroom cards. When I now duplicated a mushroom card the CPU went from 4% to 26% constantly with fans of my I3 NUC going full speed. When removing the card the CPU went down again. CPU usage only increases when having Home Assistant open in the app/browser. Adding other cards to the dashboard doesn’t cause the CPU to do this.
I have around 15 Mushroom template cards. Are tempalte cards the issue here?
Hu All,
does someone know the line to give all icons of mushroom a color when active (on) and when inactive (off)?
those 2 are not the right ones:
paper-item-icon-color: rgb(110, 110, 110)
paper-item-icon-active-color: rgb(0, 122, 255)
You should definitely make a list of your current dashboard (pictures and code) in a single post
3 Likes
I have noticed this as well, both on Pi and NUC. Increased use of Mushroom has definitely affected my CPU-usage when opened in the browser.