Guys any suggestions about this? How to make badge working?
Thank You! I will be able to get to it this evening 
You can use a margin-top: -10px; to move the bottom cards up
type: custom:stack-in-card
mode: vertical
cards:
- square: false
columns: 1
type: grid
cards:
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: ''
icon: mdi:face-agent
icon_color: cyan
content: Content-1
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
}
alignment: left
- type: conditional
conditions:
- condition: user
users:
- 43a1
card:
type: custom:mushroom-entity-card
entity: person
primary_info: none
secondary_info: none
layout: vertical
use_entity_picture: true
alignment: justify
- type: custom:mushroom-chips-card
chips:
- type: template
entity: ''
icon: mdi:face-agent
content: Content-2
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
}
alignment: end
- type: custom:mushroom-chips-card
chips:
- type: template
entity: ''
icon: mdi:face-agent
content: Content-3
tap_action:
haptic: success
card_mod:
style: |
ha-card {
padding: 0px 5px 0px 0px !important;
--chip-font-size:7px;
--chip-icon-size:18px;
margin-top: -10px;
}
- type: weather
entity: weather.forecast_home
show_conditions: true
show_temperature: true
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:7px;
--chip-icon-size:17px;
margin-top: -10px;
}
- type: template
entity: ' '
icon: mdi:face-agent
content: Content-4
tap_action:
haptic: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:7px;
--chip-icon-size:18px;
margin-top: -10px;
}
alignment: justify
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
card_mod:
style: |
ha-card {
background-color: rgba(100,34,222, 0.1);
width: px;
height: px;
}
Check out the custom-layout-card. It combines well with the stack-in-card.
Example
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Example
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr
margin: -10px 0px 0px 0px
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: ''
icon: mdi:face-agent
icon_color: cyan
content: Content-1
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
- type: template
entity: ''
icon: mdi:face-agent
icon_color: cyan
content: Content-2
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
- type: template
entity: ''
icon: mdi:face-agent
icon_color: cyan
content: Content-3
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr
margin: -20px 0px 0px 0px
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: ''
icon: mdi:face-agent
icon_color: cyan
content: Content-4
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
- type: template
entity: ''
icon: mdi:face-agent
icon_color: cyan
content: Content-5
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
- type: template
entity: ''
icon: mdi:face-agent
icon_color: cyan
content: Content-6
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
--chip-font-size:9px;
--chip-icon-size:18px;
--chip-box-shadow: none;
--chip-background: none;
}
adjust the entire row with margin: -20px 0px 0px 0px
Hello friends,
Been a long time. Been perfecting some of my UI now that I have time to.
Meanwhile, I was trying to add this to my status icons, with a popup, it looks precisely what I want, but there’s one catch, is there a way for the “3” to not spin with the icon lol?
I can easily just remove the “content” and no have a number, but being extra, I’d like to only rotate the mdi:fan but the number of devices on would remain on it’s place. Possible?
Code is:
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: fan.all
state: 'on'
chip:
type: template
icon: mdi:fan
icon_color: green
content: >
{{ expand(states.group.fans) | selectattr( 'state', 'eq', 'on')
| list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Ventoinhas
content:
type: custom:vertical-stack-in-card
horizontal: false
cards:
- type: custom:mushroom-fan-card
entity: fan.air_purifier
icon_animation: true
collapsible_controls: true
show_percentage_control: true
fill_container: true
name: Purificador
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/ambience
card_mod:
style: |
ha-card {
--rgb-state-fan: var(--rgb-cyan);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-fan-card
entity: fan.living_room
icon_animation: true
show_oscillate_control: true
show_percentage_control: true
collapsible_controls: true
fill_container: true
name: Sala
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/ambience
- type: custom:mushroom-fan-card
entity: fan.bedroom
icon_animation: true
show_oscillate_control: true
show_percentage_control: true
collapsible_controls: true
fill_container: true
name: Quarto
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /lovelace/ambience
card_mod:
style: |
.content {
animation: spin 1s linear infinite reverse;
}
@keyframes spin {
100% { transform: rotate(280deg) scale(1); }
}
alignment: justify
@edit
printscreen for context to be much easier. That’s “3”.
Again if this is an easy fix I’d like to understand, if you think this is very difficult to workaround I’ll figure out another solution. Just feels silly to have a card “so hard” pretty much done and a number is ruining it hahaha.
how to change this text in mushroom-update-card to your own? Custom text
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-update-card
entity: update.home_assistant_core_update
name: HA Core
show_buttons_control: true
secondary_info: state
card_mod:
style: |
ha-card {
border: none !important;
}
Thank you so very much “margin-top: -10px;” worked.
Thank you for the “custom-layout-card” example. I will change to this code, its much easier.
Really appreciate your help and guidance.
1 Like
Giving my 2 cents on this you should try a template card instead. That gets the job done.
but then there will be no active buttons for updating
You didn’t post your code, but here is the code from mine and maybe it will point you in the right direction.
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto 25px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.hvac_filter_remaining
icon: mdi:air-filter
icon_color: |
{% set filter_days = states(entity) | int %}
{% if filter_days < 11 %}
red
{% elif filter_days < 21 %}
orange
{% else %}
green
{% endif %}
card_mod:
style: |
ha-card {
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: sensor.hvac_filter_remaining
height: 42px
min: '0'
max: '30'
entity_row: true
severity:
- color: rgb(76, 175, 80)
from: 21
to: 90
- color: rgb(255, 152, 0)
from: 11
to: 20
- color: rgb(244, 67, 54)
from: 0
to: 10
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
border-width: 0px;
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
- type: custom:mushroom-template-card
entity: input_boolean.hvac_filter_dropdown
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-state-icon {
transition: transform 0.14s !important;
{{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
}
ha-card {
border-width: 0px;
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
padding-left: 20px!important;
}
mushroom-shape-icon {
--shape-color: None !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: input_datetime.hvac_filter
icon: mdi:calendar
name: Last Replaced
layout: vertical
primary_info: state
secondary_info: name
card_mod:
style: |
ha-card {
border-width: 0px;
width: 130px;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-entity-card
entity: sensor.hvac_filter_days_since_replaced
name: Since Replaced
layout: vertical
primary_info: state
secondary_info: name
card_mod:
style: |
ha-card {
border-width: 0px;
width: 130px;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-entity-card
entity: input_number.hvac_filter_threshold
icon: mdi:calendar-edit
name: Interval
layout: vertical
primary_info: state
secondary_info: name
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: none
card_mod:
style: |
ha-card {
border-width: 0px;
width: 130px;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
primary: Reset
secondary: ''
icon: mdi:refresh
layout: vertical
tap_action:
action: none
hold_action:
action: call-service
service: script.hvac_filter_replace
data: {}
target: {}
double_tap_action:
action: none
card_mod:
style: |
ha-card {
border-width: 0px;
width: 130px;
margin-left: auto;
margin-right: auto;
}
card_mod:
style: |
ha-card {
border-width: 0px;
margin-top: -14px;
}
card_mod:
style: |
ha-card {
{{ 'height: 66px;' if is_state('input_boolean.hvac_filter_dropdown', 'off') }}
}
1 Like
If you want to preserve the use of the update card, you can make the secondary info transparent and overlay your own text this way.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-update-card
entity: update.home_assistant_core_update
name: HA Core
show_buttons_control: true
secondary_info: state
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: yellow;
--card-secondary-color: transparent;
}
mushroom-shape-icon$: |
.shape:after {
content: "Your text here";
height: 18px;
width: 90px;
border-width: 0;
font-size:13px;
color: red;
position: absolute;
background: transparent;
margin-top:24px;
margin-left:150px;
}
.: |
ha-card {
border: none !important;
}
I’ve removed Mushroom Theme in HACS due to it being not used, I use the normal mushroom (built-in?) theme. Or so I thought.
But now the interface looks like this:
It used to be without borders around the card and chips, like this:
This is the code for the Slaapkamer card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Slaapkamer
secondary: null
icon: mdi:bed-double
entity: group.slaapkamer_lampen
tap_action:
action: navigate
navigation_path: slaapkamer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''red'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: group.rolluiken
icon: |-
{% if is_state(entity, 'closed') %}
mdi:window-closed
{% else %}
mdi:window-open
{% endif %}
icon_color: |-
{% set state=states('group.rolluiken') %}
{% if state=='closed' %}
grey
{% elif state=='open' %}
blue
{% else %}
red
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: template
entity: climate.airco_slaapkamer
icon: |-
{% set state=states('climate.airco_slaapkamer') %}
{% if is_state(entity, 'cool') %}
mdi:fan
{% elif state=='heat' or state=='dry' or state=='fan_only' or
state=='auto' %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% set state=states('climate.airco_slaapkamer') %}
{% if state=='off' %}
grey
{% elif state=='cool' %}
blue
{% elif state=='heat' %}
red
{% elif state=='dry' %}
orange
{% elif state=='fan_only' %}
green
{% elif state=='auto' %}
green
{% else %}
pink
{% endif %}
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style:
.chip-container :nth-child(2)$: |
ha-state-icon {
{{ 'animation: spin 3s linear infinite;' if is_state('climate.airco_slaapkamer', 'cool') or is_state('climate.airco_slaapkamer', 'heat') or is_state('climate.airco_slaapkamer', 'dry') or is_state('climate.airco_slaapkamer', 'fan_only') or is_state('climate.airco_slaapkamer', 'auto') }}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.slaapkamer_lampen', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Even after reinstalling the Mushroom Theme, it stays broken. I could recover from a snapshot but I’m curious what’s wrong?
1 Like
Try this, your theme was controlling the card borders for you. I adjusted this
--chip-border-color: transparent;
}
card_mod:
style: |
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
{% if is_state('group.slaapkamer_lampen', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Entire card
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Slaapkamer
secondary: null
icon: mdi:bed-double
entity: group.slaapkamer_lampen
tap_action:
action: navigate
navigation_path: slaapkamer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''red'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: group.rolluiken
icon: |-
{% if is_state(entity, 'closed') %}
mdi:window-closed
{% else %}
mdi:window-open
{% endif %}
icon_color: |-
{% set state=states('group.rolluiken') %}
{% if state=='closed' %}
grey
{% elif state=='open' %}
blue
{% else %}
red
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: template
entity: climate.airco_slaapkamer
icon: |-
{% set state=states('climate.airco_slaapkamer') %}
{% if is_state(entity, 'cool') %}
mdi:fan
{% elif state=='heat' or state=='dry' or state=='fan_only' or
state=='auto' %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% set state=states('climate.airco_slaapkamer') %}
{% if state=='off' %}
grey
{% elif state=='cool' %}
blue
{% elif state=='heat' %}
red
{% elif state=='dry' %}
orange
{% elif state=='fan_only' %}
green
{% elif state=='auto' %}
green
{% else %}
pink
{% endif %}
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style:
.chip-container :nth-child(2)$: |
ha-state-icon {
{{ 'animation: spin 3s linear infinite;' if is_state('climate.airco_slaapkamer', 'cool') or is_state('climate.airco_slaapkamer', 'heat') or is_state('climate.airco_slaapkamer', 'dry') or is_state('climate.airco_slaapkamer', 'fan_only') or is_state('climate.airco_slaapkamer', 'auto') }}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-color: transparent;
}
card_mod:
style: |
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
{% if is_state('group.slaapkamer_lampen', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
1 Like
Still need help on this if possible before it gets buried
When you include the content line it will spin with the icon.
content: >
{{ expand(states.group.fans) | selectattr( 'state', 'eq', 'on')
| list | count }}
You could switch to a Mushroom template card to address the issue. and add a badge to generate the same card,
type: custom:mushroom-template-card
entity: fan.bedroom_fan
icon: mdi:fan
primary: Primary Text
secondary: |
secondary
badge_icon: mdi:numeric-1
badge: |
{ expand(states.group.fans) | selectattr( 'state', 'eq', 'on')
| list | count }}
card_mod:
style: |
ha-state-icon {
animation: spin 1s linear infinite;
color: green;
}
mushroom-badge-icon {
--icon-color: white !important;
--main-color: green !important;
}
@dimitri.landerloos has an extensive guide here
not the best solution, but there is probably no other solution, and it works. Thank you!
Agreed, not the best , but the JS draws from that line from HA. You can anything to that content line to include sensors or attributes.
Template is a way, but you’ll need to design the icon and update buttons.
Thank you! Works like a charm.
1 Like
Also is this a bug in the theme? The climate card is not showing the icons anymore of hvac modes:
It used to have the hvac modes but since a recent update it’s gone. It’s functions still work well.
This is the card_mod code (it was really awesomely made by @rhysb I believe):
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'auto') %}
--card-mod-icon: mdi:autorenew;
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
@keyframes dry {
0%, 100% { --icon-symbol-size: 21px; }
10%, 90% { --icon-symbol-size: 22px; }
20%, 80% { --icon-symbol-size: 23px; }
30%, 70% { --icon-symbol-size: 24px; }
40%, 60% { --icon-symbol-size: 25px; }
50% { --icon-symbol-size: 26px; }
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
Are you updated to Mushroom 3.4.1?
1 Like