Sorry, the background-image should have had a url
card_mod:
style: |
{% if states( ‘switch.radiator_slaapkamer_1_4’, 'on') %}
ha-state-icon::after {
content: "";
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/animated/fire-red.png") !important;
background-position: top;
background-size: cover;
{%else%}
{%endif%}
}
josdegroot
January 10, 2024, 8:44am
9499
Maybe realy stupid question but where do i have to store this image? I tried to upload this image to /local/image/fire-red.png (and of course used this path in the code) path but then i see no image :D… Are there any restrictions regarding the resolution / image format etc.?
I create a folder for all my images and then reference that folder in the url. With HACS installed, local is actually the www folder.
mine is called animated. It has my pics and SVGs
1 Like
I’ll put together the code for both the bade and the card mod shape.
This should get you pointed in the right direction and remember you may need to clear your browser history for the changes to take affect,
type: custom:mushroom-template-card
primary: Kim en Jos
secondary: '{{ states(''sensor.basement_sensor'') }} °C'
icon: mdi:bed-king-outline
entity: light.pc_lights
badge_color: |-
{% if is_state('light.pc_lights', 'on') %}
red
{% endif %}
icon_color: |-
{% if is_state('light.pc_lights', 'on') %}
orange
{% endif %}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /kim-en-jos/home
layout: vertical
badge_icon: |-
{% if is_state('light.pc_lights', 'on') %}
mdi:fire
{% endif %}
card_mod:
style: |
{% if is_state( 'light.pc_lights', 'on') %}
ha-state-icon::after {
content: "";
position: absolute;
top: 80%;
right: 30%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
background-repeat: no-repeat;
background-image: url("/local/animated/fire.png") !important;
background-position: top;
background-size: cover;
{%else%}
{%endif%}
}
Such good advice to local host any icons you use! I dont recommend using a link to a webpage
Just for anyone in the future the use of a stylesheet is also fine as the stylesheet ends up being downloaded to your local storage anyway.
1 Like
Agreed!! Appreciate the stylesheet comment, overall it’s the way to go if you do a lot of customization
Diegocampy
January 11, 2024, 4:40pm
9505
Lunkobelix:
Any plans to make a statistics Mushroom card? I display a lot of (long term) statistics in Home Assistant for electricity consumption and cost, car charging and more. Today I have to create tons of utility meters to keep track of everything but it is already available in the Energy Dashboard and possible to show with the statistics card. But that card is not as good looking and doesn’t blend to well with my Mushroom cards.
Having the same functionality but with Mushroom would be a game changer.
is there any news on this? does anyone have any info? Sorry, I’m new and trying to learn
Folks, please help to rewrite the icon animation (stopped working after update of Mushroom cards):
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
tap_action:
action: more-info
double_tap_action:
action: call-service
service: input_boolean.toggle
data:
entity_id: input_boolean.swimpoolactive
entity: switch.5
layout: vertical
secondary: S-HeatPump
icon: mdi:fan
icon_color: |-
{% if is_state('switch.5', 'on') %}
deep-purple
{% else %}
teal
{% endif %}
card_mod:
style:
.: |
ha-card {
{{'--secondary-text-color: yellow;' if is_state('input_boolean.swimpoolactive', 'on')}}
}
mushroom-shape-icon$: |
ha-icon {
{{'--icon-animation: spin 1s linear infinite;' if is_state(config.entity, 'on')}}
}
I assume something must be changed in t
his part:
mushroom-shape-icon$: |
ha-icon {
{{'--icon-animation: spin 1s linear infinite;' if is_state(config.entity, 'on')}}
}
Look at my replies in this topic. I have linked to the new animations many many times
I’ve tried proposed solutions, the animation didn’t work.
hazio
January 11, 2024, 6:50pm
9509
Did figure this out? I’ve tried stack-in-card, but it didn’t give the same look unfortunately.
did you though?
then just add your if statement, either like this:
{% if is_state(config.entity, 'on') %}
animation: spin 1s linear infinite;
{% endif %}
or like this:
{{'animation: spin 1s linear infinite;' if is_state(config.entity, 'on')}}
And if that still doesnt work then you either.
Dont have card mod installed.
Dont have card mod correctly installed.
1 Like
RkcCorian
January 11, 2024, 10:02pm
9512
Hello together,
I try to use a common defined color for the icon, like “–error-color”. This is working e.g. for custom:mushroom-cover-card but I cannot get this running for custom:mushroom-template-card, even I use the same code. Can somebody help me please?!
My code so far…
- type: custom:mushroom-template-card
entity: sensor.hausbefeuchtung
icon: |
{% if is_state(config.entity, 'Aus') %}
mdi:air-humidifier-off
{% elif is_state(config.entity, 'Leer') %}
mdi:water-off-outline
{% else %}
mdi:air-humidifier
{% endif %}
primary: '{{ state_attr(config.entity, ''friendly_name'') }}'
secondary: '{{ states(config.entity) }}'
tap_action:
action: more-info
double_tap_action:
action: toggle
icon_color: |
{% if is_state(config.entity, 'Aus') %}
var(--error-color)
{% elif is_state(config.entity, 'Leer') %}
red
{% else %}
blue
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
What color are you getting when using var(--error-color) ?
I may have missed it, but -error-color doesn’t appear to be defined in the source code in a manner that can be used in the way you coded it. I added the following line to the javascript and was able to usevar(--rgb-error) in the template card.
--rgb-error: var(--mush-rgb-error, var(--rgb-purple));
type: custom:mushroom-template-card
entity: sensor.hausbefeuchtung
icon: |
{% if is_state(config.entity, 'Aus') %}
mdi:air-humidifier-off
{% elif is_state(config.entity, 'Leer') %}
mdi:water-off-outline
{% else %}
mdi:air-humidifier
{% endif %}
primary: '{{ state_attr(config.entity, ''friendly_name'') }}'
secondary: '{{ states(config.entity) }}'
tap_action:
action: more-info
double_tap_action:
action: toggle
icon_color: |
{% if is_state(config.entity, 'Aus') %}
var(--rgb-error)
{% elif is_state(config.entity, 'Leer') %}
red
{% else %}
blue
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
seanmccabe
January 12, 2024, 6:51am
9514
Hoping the masterminds here can help resolve an issue.
Upgraded to 2023.11 (yes I’m not on 2023.12) from 2023.9, and now my mushroom cards have all gone and gotten a black raised background, others have a border?!
They’ve gone from this:
To this:
How do I get rid of that horrific background and raised shadow thing and the borders that is going on?!
Appreciate the assist.
1 Like
can you please post your code?
If you are using Card Mod, ensure you are using card_mod: and not just style: |
should look something like this…
card_mod:
style: |
seanmccabe
January 12, 2024, 8:51am
9516
Here you go:
type: custom:vertical-stack-in-card
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 123px auto
grid-template-rows: auto
margin: 0 auto;
padding: 5px 2px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.bathroom_light
icon: mdi:lightbulb
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
white
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-padding: 0 0 0 10px;
}
- type: template
entity: switch.adaptive_lighting_bathroom
icon: |-
{% set state = states(entity) %}
{% if state == 'on' %}
mdi:lightbulb-auto
{% else %}
mdi:lightbulb-auto-outline
{% endif %}
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 15px 0 10px;
}
- type: template
entity: switch.adaptive_lighting_sleep_mode_bathroom
icon: mdi:theme-light-dark
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0;
}
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.6) !important;
border-radius: var(--ha-card-border-radius, 12px) !important;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{{ states(entity) | float }} {{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.bathroom_sensor_temperature
icon: mdi:thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity)|float(0) %}
{% if state >= 21 %}
red
{% elif state >= 19 %}
orange
{% elif state < 19 %}
blue
{% else %}
grey
{% endif %}
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 10px;
}
- type: template
content: >-
{{ states(entity) }}{{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.bathroom_sensor_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 10px 0 0px;
}
- type: template
content: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.bathroom_sensor_pressure
icon: mdi:gauge
icon_color: grey
tap_action:
action: none
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 10px;
}
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.7) !important;
border-radius: var(--ha-card-border-radius, 12px) !important;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bathroom
icon: mdi:shower-head
fill_container: true
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
background: none;
padding: 10px 16px !important;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 65% auto
grid-template-rows: auto
margin: 0 0 0 5px;
padding: 5px
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.washing_machine_current_consumption
content: |-
{% set state = states(entity) | float(0) %}
{% if state > 0 %}
Running
{% endif %}
icon: mdi:washing-machine
icon_color: |-
{% set state = states(entity)|float(0) %}
{% if state > 0 %}
blue
{% elif state == 'unavailable' %}
grey
{% else %}
white
{% endif %}
tap_action:
action: navigate
navigation_path: laundry
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0 0 10px;
}
- type: template
entity: sensor.dryer_current_consumption
content: |-
{% set state = states(entity) | float(0) %}
{% if state > 0 %}
Running
{% endif %}
icon: mdi:tumble-dryer
icon_color: |-
{% set state = states(entity)|float(0) %}
{% if state > 0 %}
red
{% elif state == 'unavailable' %}
grey
{% else %}
white
{% endif %}
tap_action:
action: navigate
navigation_path: laundry
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 15px 0;
}
card_mod:
style: |
ha-card {
--chip-spacing: 0;
}
- type: custom:mushroom-chips-card
chips: null
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.7) !important;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
box-shadow: none;
position: relative;
bottom: -100px;
border-radius: 0;
}
:host {
--mush-card-primary-font-size: 1.2rem;
}
card_mod:
style: |
ha-card {
min-height: 275px;
background: var(--card-background-color) url('/local/backgrounds/bathroom-small.jpg');
no-repeat center 0px;
background-size: cover;
position: relative;
background-position: center;
background-repeat: no-repeat;
border-radius: 15px 15px 0 0;
}
Appreciate you looking at this
Let’s see what this does for you and go from there…
type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 123px auto
grid-template-rows: auto
margin: 0 auto;
padding: 5px 2px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.bathroom_light
icon: mdi:lightbulb
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
white
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-padding: 0 0 0 10px;
}
- type: template
entity: switch.adaptive_lighting_bathroom
icon: |-
{% set state = states(entity) %}
{% if state == 'on' %}
mdi:lightbulb-auto
{% else %}
mdi:lightbulb-auto-outline
{% endif %}
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 15px 0 10px;
}
- type: template
entity: switch.adaptive_lighting_sleep_mode_bathroom
icon: mdi:theme-light-dark
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0;
}
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.6) !important;
border-radius: var(--ha-card-border-radius, 12px) !important;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{{ states(entity) | float }} {{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.bathroom_sensor_temperature
icon: mdi:thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity)|float(0) %}
{% if state >= 21 %}
red
{% elif state >= 19 %}
orange
{% elif state < 19 %}
blue
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 10px;
}
- type: template
content: >-
{{ states(entity) }}{{ state_attr(entity, "unit_of_measurement")
}}
entity: sensor.bathroom_sensor_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 10px 0 0px;
}
- type: template
content: >-
{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement")
}}
entity: sensor.bathroom_sensor_pressure
icon: mdi:gauge
icon_color: grey
tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 10px;
}
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.7) !important;
border-radius: var(--ha-card-border-radius, 12px) !important;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bathroom
icon: mdi:shower-head
fill_container: true
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: none
icon_color: blue
card_mod:
style: |
ha-card {
background: none;
padding: 10px 16px !important;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 65% auto
grid-template-rows: auto
margin: 0 0 0 5px;
padding: 5px
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.washing_machine_current_consumption
content: |-
{% set state = states(entity) | float(0) %}
{% if state > 0 %}
Running
{% endif %}
icon: mdi:washing-machine
icon_color: |-
{% set state = states(entity)|float(0) %}
{% if state > 0 %}
blue
{% elif state == 'unavailable' %}
grey
{% else %}
white
{% endif %}
tap_action:
action: navigate
navigation_path: laundry
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0 0 10px;
}
- type: template
entity: sensor.dryer_current_consumption
content: |-
{% set state = states(entity) | float(0) %}
{% if state > 0 %}
Running
{% endif %}
icon: mdi:tumble-dryer
icon_color: |-
{% set state = states(entity)|float(0) %}
{% if state > 0 %}
red
{% elif state == 'unavailable' %}
grey
{% else %}
white
{% endif %}
tap_action:
action: navigate
navigation_path: laundry
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 15px 0;
}
card_mod:
style: |
ha-card {
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.7) !important;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
box-shadow: none;
position: relative;
bottom: -100px;
border-radius: 0;
}
:host {
--mush-card-primary-font-size: 1.2rem;
}
card_mod:
style: |
ha-card {
min-height: 275px;
background: var(--card-background-color) url('/local/backgrounds/bathroom-small.jpg');
no-repeat center 0px;
background-size: cover;
position: relative;
background-position: center;
background-repeat: no-repeat;
border-radius: 15px 15px 0 0;
}
