Hi Iām trying to make something similar.
Will you share your code?
Pretty much all of it 
Hi !
I asked the same question on the other post, but I think it better fits hereā¦
I love the idea and the compact and efficient use of the space.
I will probably use and modify it a lot !
On the other hand, I am trying to remove as much as possible cardmod and stack-in-card in order to stay closer to mushroom initial idea and be capable to use UI only.
I am thus trying to bring the same simplicity using only mushroom template and chips, but I have one problem remaining : Removing card mod is easy (despite less beautifull), but I struggle to find the equivalent of grid or horizontal/vertical stack that would allow to merge borders of cards while not breaking UI. Does this exist ?
Dear all, especially @piitaya .
While I love the concept behind mushroom, I am very frequently struggling with the fact that in order to tune it more you need stack-in cards or cardmod and thus breaks the UI philosophy.
Is there a solution to create a sort of grid of mushroom card and chips, unified with the same background, while keeping the UI management?
I am currently strugling on 3 aspects:
- creating a grid with cards of diffrents sizes
- setting mushroom chips in a vertical column (this could be done chips by chips, but losing the capacity to rearrange dynamicaly with conditionnal chips)
- re-unite all this into a single card with unified background
Thanks for the work performed, and congratulation to all the yaml and cardmod experts that create wonderfull dashboards !
5 Likes
Hi, did you find a solution for this?
I donāt believe it does.
Iām missing something obvious hereā¦ the āsound machineā chip is not orange even though the template code run in dev tools will return āorangeā. If i remove the templating syntax and just set icon_color to orange the chip icon turns orange.
what is wrong with this code?
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.kids_room_temperature
- type: entity
entity: binary_sensor.kids_room_motion
- type: entity
entity: sensor.kids_room_humidity
- type: entity
entity: switch.kids_room_sound_machine
double_tap_action:
action: none
tap_action:
action: toggle
hold_action:
action: none
icon_color: |
{% if is_state("switch.kids_room_sound_machine", "on") %}
orange
{% else %}
#44739e
{% endif %}
A warning about version 2023.2.0
In this PR, all of the --rgb-{color}-color CSS variables were replaced with this format --{color}-color. Anything that uses these variables will no longer have a color. Also, they are now in hex format instead of R, G, B. If you used these in rgba() there is no replacement other than adding the variables to a theme. It looks like mushroom still has --rgb-{color} variables, but they do not work outside of mushroom cards.
As a temporary fix, I added this to the themes I am using.
rgb-amber-color: 255, 193, 7
rgb-black-color: 0, 0, 0
rgb-blue-grey-color: 96, 125, 139
rgb-blue-color: 33, 150, 243
rgb-brown-color: 121, 85, 72
rgb-cyan-color: 0, 188, 212
rgb-deep-orange-color: 255, 87, 34
rgb-deep-purple-color: 103, 58, 183
rgb-green-color: 76, 175, 80
rgb-grey-color: 158, 158, 158
rgb-indigo-color: 63, 81, 181
rgb-light-blue-color: 3, 169, 244
rgb-light-green-color: 139, 195, 74
rgb-lime-color: 205, 220, 57
rgb-orange-color: 255, 152, 0
rgb-pink-color: 233, 30, 99
rgb-purple-color: 156, 39, 176
rgb-red-color: 244, 67, 54
rgb-teal-color: 0, 150, 136
rgb-white-color: 255, 255, 255
rgb-yellow-color: 255, 235, 59
2 Likes
try this instead:
{% if is_state('switch.kids_room_sound_machine', 'on') %}
Thanks again.
i assume as this card isnāt mushroom isnāt possible animate the chevron?
Hi, can someone explain to me how to make my mushroom-person-cards responsive?
type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.ugo
alignment: left
style: |
ha-card {
# height: 170px !important;
# width: 240px !important;
# padding: 12px 20px 12px 20px!important;
{
--mdc-icon-size: 180px;
}
{
height: 200px !important;
}
use_entity_picture: true
icon_type: entity-picture
entity_picture: "/local/pictures/person_ugo.png"
name: Ugo
layout: vertical
tap_action:
action: more-info
browser_mod:
command: popup
deviceID: this
title: Ugo
card:
type: custom:mod-card
style: |
ha-card {
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.iphone_8_ugo_geocoded_location
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.iphone_8_ugo_2
aspect_ratio: '2'
use_entity_picture: true
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 43px
}
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.iphone_7_gabri_battery_state') %}
{% if state=='Charging' %}
green
{% elif state=='Not Charging' %}
#6f6f6f
{% endif %}
entity: sensor.iphone_8_ugo_battery_state
content: '{{ states(entity) }}'
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.iphone_8_ugo_battery_level
content: '{{ states(entity) }} %'
icon: |2
{% set bl = states('sensor.iphone_8_ugo_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 %}
icon_color: |2-
{% set bl = states('sensor.iphone_8_ugo_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 %} grey
{% endif %}
tap_action:
action: more-info
- type: entity
entity: proximity.home
icon_color: white
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
#-------------------------------------------------------------------------------
# - type: 'custom:mushroom-person-card'
# entity: person.gabriella_2
# name: Gabriella
# template: sensor_person
# use_entity_picture: true
# entity_picture: "/local/pictures/person_gabriella.png"
# variables:
# battery_entity: sensor.iphone_7_gabri_battery_level
- type: horizontal-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.gabriella_2
use_entity_picture: true
name: Gabriella
layout: vertical
tap_action:
action: more-info
browser_mod:
command: popup
deviceID: this
title: Gabriella
card:
type: custom:mod-card
style: |
ha-card {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.iphone_7_gabri_geocoded_location
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.iphone_7_gabri_2
aspect_ratio: '2'
use_entity_picture: true
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 43px
}
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.iphone_7_gabri_battery_state') %}
{% if state=='Charging' %}
green
{% elif state=='Not Charging' %}
#6f6f6f
{% endif %}
entity: sensor.iphone_7_gabri_battery_state
content: '{{ states(entity) }}'
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.iphone_7_gabri_battery_level
content: '{{ states(entity) }} %'
icon: |2
{% set bl = states('sensor.iphone_7_gabri_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 %}
icon_color: |2-
{% set bl = states('sensor.iphone_7_gabri_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 %} grey
{% endif %}
tap_action:
action: more-info
- type: entity
entity: proximity.home
icon_color: white
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
Can the image of the person card be enlarged?
Share the rounded apex chart please 
Also with the 4 mushrooms on the left would be great hahah
thanks!
No, unfortunately switching the double to single quotes didnāt change/fix anything.
I have a question about the climate card.
Does anyone know if itās possible to achieve the following:
Right now, when you click this button, you get to see the HVAC modes:
Changes to:
Since i only have 1 HVAC mode button enabled, is it possible to make this button visible in the first view?
Like this:
Hello 
Why do you need this button if you have only one mode?
Hi @rhysb
When I use your code I get a āUndefinedError: āhomeassistant.util.read_only_dict.ReadOnlyDict objectā has no attribute ādevice_class:āā Errorā¦ but when iām looking at my sensors I have these info, why will it not show the stats and read the device_class?
Hi Menthe,
Have you found a solution for yourself?
I have made something for myself that I can live with very well.
Greetings
Marco
6 Likes
Try this:
icon_color: {{ iif(is_state('switch.kids_room_sound_machine', 'on'), 'orange', '#44739e') }}