I am stuck at a similar problem. Would love to know if someone has a solution to this here.
Although I really like Mushroom and have a few dashes with it, my main dashboard is made with UI Lovelace Minimalist, which Iโve spent far far too many hours on to customise it just the way I like it (Very information dense but still aesthetically pleasing!)
Unfortunately it looks like the guy who created ULM is abandoning the project, so Iโll probably look at migrating over to Mushroom for my main dash. Iโm guessing itโs not possible to customise the Mushroom cards in the same way as you can the ULM ones, is it possible to code your own custom Mushroom cards from scratch though? Any documentation or relevant links if so? (couldnโt find any!!) Thanks.
For some reasons Iโve never been able to get ULM to work for me so I started with Mushroom instead, I find it very customizable combined with other cards like stack-in-card etc. I.e I really like the ULM room cards so Iโve tried to find similar codes that people share and re-create it for my use. Just download Mushroom and google image for some dashboard using Mushroom for your inspirations, then tinker with the code, fyi this thread and the Part 1 is very helpful.
4 Likes
hi. can i increase size of person image?
thank you
I reached the result I wanted and happy to share it with you
type: custom:stack-in-card
cards:
- type: custom:bubble-card
card_type: climate
entity: climate.bedroom_trv
sub_button:
- name: HVAC modes menu
select_attribute: hvac_modes
state_background: true
show_arrow: true
show_last_changed: false
show_state: true
show_background: false
show_icon: false
show_name: false
- entity: sensor.bedroom_temperature_temperature
name: Temperature
show_icon: false
state_background: false
show_background: false
show_state: true
show_name: false
show_last_changed: false
show_attribute: false
- entity: climate.bedroom_trv
select_attribute: preset_modes
name: Presets
show_icon: true
show_arrow: true
show_background: false
- entity: sensor.bedroom_trv_position
show_background: false
show_icon: false
show_state: true
name: trv_position
name: BEDROOM
icon: mdi:heating-coil
force_icon: true
state_color: true
tap_action:
action: more-info
show_icon: true
show_state: false
card_layout: large-2-rows
columns: 3
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.bedroom_temperature_temperature
primary_info: state
secondary_info: name
name: Temperature
icon_color: orange
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.bedroom_temperature_humidity
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.bedroom_temperature_temperature
name: Temperature
color: orange
- entity: sensor.bedroom_temperature_humidity
name: Humidity
color: "#2196f3"
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:bubble-card
card_type: climate
entity: climate.children_trv
sub_button:
- name: HVAC modes menu
select_attribute: hvac_modes
state_background: true
show_arrow: true
show_last_changed: false
show_state: true
show_background: false
show_icon: false
show_name: false
- entity: sensor.children_temperature_temperature
name: Temperature
show_icon: false
state_background: false
show_background: false
show_state: true
- entity: climate.children_trv
select_attribute: preset_modes
name: Presets
show_icon: true
show_arrow: true
show_background: false
- entity: sensor.children_trv_position
name: trv_position
show_icon: false
state_background: false
show_background: false
show_last_changed: false
show_state: true
name: CHILDREN
icon: mdi:heating-coil
force_icon: true
state_color: true
tap_action:
action: more-info
card_layout: large-2-rows
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.children_temperature_temperature
primary_info: state
secondary_info: name
name: Temperature
icon_color: orange
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.children_temperature_humidity
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.children_temperature_temperature
name: Temperature
color: orange
- entity: sensor.children_temperature_humidity
name: Humidity
color: "#2196f3"
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
border: none;
}
5 Likes
here is a code if someone interested
type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.children_temperature_temperature
primary_info: state
secondary_info: name
name: Temperature
icon_color: orange
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.children_temperature_humidity
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.children_temperature_temperature
name: Temperature
color: orange
- entity: sensor.children_temperature_humidity
name: Humidity
color: "#2196f3"
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:simple-thermostat
entity: climate.children_trv
sensors:
- entity: number.children_trv_local_temperature_calibration
name: Calibration
- entity: sensor.children_trv_position
name: ะัะบััั ะฝะฐ
header:
name: CHILDREN
icon: mdi:heating-coil
layout:
mode:
headings: false
icons: true
names: true
control:
hvac: true
preset:
boost: true
away: false
eco: false
none: false
complex: false
comfort: false
schedule: false
4 Likes
How can I move only text to the bottom
type: custom:mushroom-template-card
layout: vertical
primary: livingroom
icon: mdi:sofa
icon_color: "#C63C51"
entity: input_boolean.vacuum_room_7
tap_action:
action: toggle
fill_container: false
layout_options:
grid_columns: 1
grid_rows: auto
multiline_secondary: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: transparent;
--icon-symbol-size: 30px;
--icon-size: 0px;
}
.: |
ha-card {
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66);
background: "#ffffff";
--card-primary-font-size: 11px;
--card-primary-font-weight: bold;
--card-secondary-font-size: 12px;
--card-primary-color: black;
--card-secondary-color: black;
margin: 0px 0px 0px 0px !important;
padding: 7px 0px 0px 0px !important;
border: 0.1px outset gray;
}
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
1 Like
This is the nicest thermostat card design Iโve seen so far! Thank you.
sloved it with vertical card
Hey everyone,
I need some assistance changing the zone colors for person entities. Iโm currently using a welcome card created in Part 1 of the Mushroom cards, and I would like to modify the colors around the entity pictures. Is this possible? I have several defined zones, such as work, gym, etcโฆ
Additionally, I have another question: Is it possible to display phone battery levels on hover? Specifically, when I hover my mouse or tap on a personโs picture, can the device battery status be shown? If so, I would appreciate any hints or guidance.
Thank you!
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: 8px 4px 4px 4px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.cisco
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'gym', 'work', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.1);
transform-origin: top center;
z-index: 1;
transition: all 0.4s;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
Santa is coming
and 2025 
@piitaya
Many thanks for your work maing the frontends of Home Assistant easier to create and easier to use, and for all the support throughout the year.
Merry Christmas and all the best for the New Year!
3 Likes