jkseamons
(Jkseamons)
10018
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;
}
Step
10020
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
MARTWIN
(Martinho)
10022
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
mr_aleks
(mr_aleks)
10024
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.
Step
10026
Thank you! Works like a charm.
1 Like
Step
10027
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
Step
10029
Ah you are correct again:
There’s an open issue regarding this.
Thank you sir!
1 Like
Yes sir, thanks for checking the issues and posting what you found. Helps others 
1 Like
@mr_aleks, you can combine a template card with the update card with a stack in card like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: update.home_assistant_supervisor_update
icon: mdi:update
icon_color: blue
primary: test
secondary: test2
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:mushroom-update-card
entity: update.home_assistant_supervisor_update
show_buttons_control: true
card_mod:
style: |
mushroom-state-item {
display: none;
}
the top card you can then put whatever you want. with your theme you may need to remove borders from each card too with card mod.
1 Like
Not too fancy, your solution is a good solution and its super useful to know how to replace something in a card with something else using card mod.
Made me thinking…I have this card for my HA Server:
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
icon_type: entity-picture
- type: custom:mushroom-template-card
primary: Version Information
secondary: >-
Installed v{{ state_attr('update.home_assistant_core_update',
'installed_version')}}
Latest v{{ state_attr('update.home_assistant_core_update',
'latest_version')}}
icon: mdi:package-variant-closed
multiline_secondary: true
fill_container: true
entity: update.home_assistant_core_update
tap_action:
action: more-info
icon_color: |-
{% if is_state('update.home_assistant_core_update', 'on') %}
orange
{% else %}
green
{% endif %}
badge_color: |-
{% if is_state('update.home_assistant_core_update', 'on') %}
red
{% else %}
blue
{% endif %}
badge_icon: |-
{% if is_state('update.home_assistant_core_update', 'on') %}
mdi:help
{% else %}
mdi:check-bold
{% endif %}
Now, my question is: how is it possible that the icon is not round, but somewhat like a “drop” ?
btw to fix the issue of content spinning with the icon, you can just add the animation only to the chips icon:
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
alignment: justify
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: spin 1s linear infinite reverse;
}
@keyframes spin {
100% { transform: rotate(280deg) scale(1); }
}
definitely not as easy though 
Sorry note sure what you mean? which icon do you want shaped like a drop?
the picture one or the other one? or both somehow? and what exact shape do you mean (direction of the drop)
Sorry. More specific: the Home Assistant icon.
I used this in the config:
icon_type: entity-picture
But it is not round, it is like a drop in my opinion, where I want it to be round?
