I’m looking for help, is there any way to enable multiple rows for buttons?
By default the cover entity looks like this:
But I would like something like this:
The best I managed is using two cards but the borders don’t help much. I’d like to use multiple rows for media players and lights too.
I would use stack-in-cards. That’s what I used in the remote I’ll link to in my next post asking a related question.
What method do you all use to insert transparent space when you’re using Mushroom Cards in combination with stack-in-card, vertical-stack, horizontal-stack, and grid cards?
For context…
Spacer Card · Discussion #783 · piitaya/lovelace-mushroom (github.com)
looking for C&P version of the ‘open-in-external’ for a link to a subview, I can only find this:
tooltip: 🔗 Summary
its ok-ish, but id rather have the material external-link icon.
Anyone know where to find that?
Thanks, I was able to get the card I wanted!
Sadly I can’t use auto entities in combination with two mushroom cards AND the stack-in so it’ll take some extra work, but works!
Hi all -
Hopefully a quick question, I am trying to implement a new Mushroom Chip card to display my next Alexa Alarm (sensor.bedroom_next_alarm) - but I can’t get it to show the actual time/date. It only shows how many hours until the alarm. On a regular entity card it does show the alarm time and date.
Is there a way to convert this over on the chip card?
Install UI Lovelace Minimalist and Button card.
It works for me after the installation
thanks man
Mushroom v2.4 is out with a cute new feature:
90% done. Exactly what I was looking for! Only problem, as you said the bar doesn’t stick to to the bottom (1st screenshot). Wish we could find a workaround for that?
Installing UI Lovelace Minimalist and Button card instead is a bit of over-engineering 
Show us your YAML mode configuration.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.echo_show_next_alarm
- type: template
entity: sensor.echo_show_next_alarm
content: |
{% set next = as_timestamp(states(entity), 0) |timestamp_custom("%d.%m.%Y,
%H:%M Uhr", True, now() ) %}
{% if states(entity) != 'unavailable' %}{{ next }}
{% else %}Kein Wecker gestellt {% endif %}
icon: '{{ state_attr(entity, "icon") }}'
results in
Danke!
Works perfectly!
Adding a gap card before the nav bar will make your page scrollable
type: custom:gap-card
height: 1000
@rhysb Could you help me out with the cardmod?
unable to get the “animation” to work for the dishwasher icon
- type: custom:mushroom-template-card
primary: kitchen
secondary: "{{ states('sensor.smoke_detector_air_temperature') }}°C"
icon: mdi:fridge
tap_action:
action: kitchen
navigation_path: kitchen
icon_color: |
{% if is_state('light.kitchen', 'on') %}
green
{% else %}
disabled
{% endif %}
style: |
ha-card {
margin-bottom: -30px;
box-shadow: none;
}
- show_name: false
show_icon: true
show_state: false
theme: mushroom_room
type: glance
entities:
- entity: light.kitchen
icon: mdi:lightbulb-group
tap_action:
action: toggle
- entity: light.kitchen_table
tap_action:
action: toggle
- entity: input_select.dishwasher_status
style: |
ha-icon {
{{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('input_select.diswasher_status', 'On') }}
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
state_color: true
style: |
ha-card {
margin-top: -20px;
margin-bottom: -20px;
box-shadow: none;
background: rgba(0, 0, 0, 0);
}
Hi everybody,
I’ve been taking alot of knowledge and code from this amazing thread, people such as @rhysb and @piitaya have, inherently, changed my whole lovelace. Aswell as @Tinkerer on Discord, who has always pointed me in the right direction to figure out how to get this project going. Since im not a programmer myself, learning and getting skilled at this takes a bit longer for me. Nevertheless i would love to contribute my two cents by sharing something that i’ve been working on. Inspired by @benm7’s card.
type: vertical-stack
cards:
- type: custom:mushroom-title-card
- square: false
columns: 2
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.processor_use_percent
name: Processor
icon_color: green
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Hardware monitor
content:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: CPU use
secondary: |
{{ states('sensor.processor_use_percent') }}%
icon: mdi:cpu-64-bit
icon_color: '#2eb9ff'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: none;
--ha-card-border-width: 0px
- type: custom:layout-card
layout_type: null
layout:
width: 250
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
card_mod:
style: |
ha-card {
background: none;
--ha-card-border-width: 0px
background: none;
box-shadow: none;
}
cards:
- type: custom:apexcharts-card
apex_config:
fill:
type: gradient
gradient:
type: horizontal
shadeIntensity: 0.1
inverseColors: false
opacityFrom: 0.5
opacityTo: 1
stops: 5
graph_span: 1d
header:
show: true
series:
- entity: sensor.processor_use_percent
name: CPU Load
curve: smooth
color: '#2eb9ff'
stroke_width: 2
opacity: 2
group_by:
duration: 1h
func: max
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
name: Memory
icon_color: orange
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Hardware monitor
content:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Memory use
secondary: |
{{ states('sensor.memory_use_percent') }}%
icon: mdi:memory
icon_color: orange
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:layout-card
layout_type: null
layout:
width: 250
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
card_mod:
style: |
ha-card {
background: none;
--ha-card-border-width: 0px
cards:
- type: custom:apexcharts-card
apex_config:
fill:
type: gradient
gradient:
type: horizontal
shadeIntensity: 0.1
inverseColors: false
opacityFrom: 0.5
opacityTo: 1
stops: 5
graph_span: 1d
header:
show: true
series:
- entity: sensor.memory_use_percent
name: CPU Load
curve: smooth
color: orange
stroke_width: 2
opacity: 2
group_by:
duration: 1h
func: max
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px
}
- type: custom:mushroom-entity-card
entity: sensor.processor_temperature
name: Temperature
icon_color: red
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Hardware monitor
content:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: CPU temperature
secondary: |
{{ states('sensor.processor_temperature') }}°C
icon: mdi:thermometer
icon_color: red
card_mod:
style: |
ha-card {
background: none;
--ha-card-border-width: 0px
- type: custom:layout-card
layout_type: null
layout:
width: 250
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
card_mod:
style: |
ha-card {
background: none;
--ha-card-border-width: 0px
cards:
- type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
fill:
type: gradient
gradient:
type: horizontal
shadeIntensity: 0.5
inverseColors: false
opacityFrom: 0.5
opacityTo: 1
stops: 5
graph_span: 1d
header:
show: true
series:
- entity: sensor.processor_temperature
name: CPU Temperature
curve: smooth
stroke_width: 2
opacity: 2
color_threshold:
- value: 35
color: '#ade8f4'
- value: 45
color: orange
- value: 55
color: orangered
- value: 65
color: red
group_by:
duration: 1h
func: max
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px
}
- type: custom:apexcharts-card
chart_type: donut
header:
show: false
floating: true
show_states: true
colorize_states: false
apex_config:
title:
floating: false
align: center
style:
fontSize: 20px
fontWeight: normal
chart:
offsetY: 0
height: 230px
legend:
show: false
position: bottom
series:
- entity: sensor.sensor_storage_capacity_free
name: Free
color: '#00b4d8'
- entity: sensor.sensor_storage_capacity_used
name: Used
color: '#ade8f4'
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: |2-
{%- set up = now().timestamp()-as_timestamp(states('sensor.uptime')) %}
{%- macro phrase(name,divisor,mod=None) %}
{%- set value = ((up//divisor) % (mod if mod else divisor))|int %}
{%- set end = 's' if value > 1 else '' %}
{{- '{} {}{}'.format(value,name,end) if value|int > 0 else ''}}
{%- endmacro %}
{%- set values = [phrase('week',60*60*24*7),
phrase('day',60*60*24,7),
phrase('hour',60*60,24),
phrase('min',60),
phrase('sec',1,60)]
|select('!=','')|list %}
{{values[:-1]|join(', ') ~ ' and ' ~ values[-1] if values|length > 1 else
values|first}}
icon: mdi:home-assistant
icon_color: blue
- type: template
content: |2-
{%- set up = now().timestamp()-as_timestamp(states('sensor.last_boot')) %}
{%- macro phrase(name,divisor,mod=None) %}
{%- set value = ((up//divisor) % (mod if mod else divisor))|int %}
{%- set end = 's' if value > 1 else '' %}
{{- '{} {}{}'.format(value,name,end) if value|int > 0 else ''}}
{%- endmacro %}
{%- set values = [phrase('week',60*60*24*7),
phrase('day',60*60*24,7),
phrase('hour',60*60,24),
phrase('min',60),
phrase('sec',1,60)]
|select('!=','')|list %}
{{values[:-1]|join(', ') ~ ' and ' ~ values[-1] if values|length > 1 else
values|first}}
icon: mdi:nas
icon_color: '#70e000'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
alignment: center
Hi,
I made a Mushrrom person cards getting many inspiration from this threat. Only think looks not very good is the icon color of the badge. Not the badge color (here green), this is fine, the white icon could seen not vey good so I try to make it grey or black but I do not get it with card_mod. Maybe someone have a hint for me:
...
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
--font-size: 0.5em;
--icon-size: 5em;
--badge-icon-size: 1.15em;
--badge-size: 1.15em;
--spacing: none;
--font-weight: normal;
}
fill_container: true
entity: person.steff
layout: vertical
picture: /local/pictures/Emojisteff.png
primary: '{{- states(''sensor.tmp_person_zonestatus_steff'') -}}'
secondary: >-
{{- "LastSeen: " -}} {{-
states('sensor.tmp_person_lastseen_steff') -}}
badge_icon: '{{- state_attr(''sensor.tmp_person_zonestatus_steff'',''icon'') -}}'
badge_color: >-
{% if is_state('sensor.tmp_person_zonestatus_steff','Home') %}
green
{% elif
is_state('sensor.tmp_person_zonestatus_steff','Unbekannt') %}
red
{% else %}
orange
{% endif %}
tap_action:
action: more-info
...
Thanks, Steffen
How do i display the full name?
hallo nice cards can you share your code pleas ?