I want an icon color to change when the status is greater or less than another value. Any idea how I can do this? I tried a few things…
{{ ''green'' if states(entity) | < states('sensor.dynamische_stroomprijzen_average_electricity_price_today') else ''red'' }}
Slightly hacky way to do it. Im sure there is a better way.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_number.bedroom_fan_speed
icon: none
card_mod:
style: |
.content {
position: relative;
flex-direction: column !important;
bottom: 20%;
}
card_mod:
style: |
ha-state-icon {
{% if states(config.entity) | float < states('sensor.dynamische_stroomprijzen_average_electricity_price_today') | float %}
color: green;
{% else %}
color: red;
{% endif %}
}
Or
card_mod:
style: |
ha-state-icon {
color: {{ 'green' if states(config.entity) | float < states('sensor.dynamische_stroomprijzen_average_electricity_price_today') | float else 'red'}};
}
Always check that your template actually works in the template editor (of course replacing the config.entity or entity shorthand with an actual entity)
You cant use the entity shorthand in card mod. You have to use config.entity
Hello,
need a little push to the right direction…
If I have a font-size bigger than 21px the font will be cut off…
How can I fix that?
type: custom:mushroom-entity-card
entity: sensor.time
primary_info: none
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 30px;
align-items: center;
}
layout_options:
grid_columns: 2
grid_rows: 1
Try with this:
Awesome! Didn’t noticed that.
Thank you so much.
Hello, is it posible to invert just the slider part ?
Keep in mind that neither of these will fix the fact that the controls will not invert. These are made with javascript so cant be modified with card mod. So in either case when you try to move the slider right it will move left with the below applied.
card_mod:
style:
mushroom-cover-position-control$:
mushroom-slider$: |
.slider {
rotate: 180deg;
}
mushroom-cover-tilt-position-control$:
mushroom-slider$: |
.slider {
rotate: 180deg;
}
Or:
card_mod:
style: |
mushroom-cover-position-control {
transform: scalex(-1) !important;
}
mushroom-cover-tilt-position-control {
transform: scalex(-1) !important
}
- type: horizontal-stack
cards:
- type: "custom:stack-in-card"
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Airco
icon: mdi:fan
tap_action:
action: call-service
service: script.airco
service_data:
option: "ruimte1_airco"
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.container {
margin: 10px;
}
mushroom-shape-icon$: |
.shape {
margin-top: 0px;
}
.: |
ha-state-icon {
{% if not is_state('climate.ruimte1_airco','off') %}
animation: spin 1s linear infinite ;{%- endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
ha-card {
height: 60px !important;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
{% if is_state('climate.ruimte1_airco','on') %}
background-color: rgba({{ states("input_text.kleur_iconen")}},1) !important;
{%- else -%}
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
{%- endif %}
}
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_number.aline_airco
secondary_info : "{{state_attr('climate.ruimte1_airco','temperature') | round(1) | float(0) }} °C"
name: " "
icon: " "
card_mod:
style: |
.content {
position: relative;
flex-direction: column !important;
bottom: 20%;
}
card_mod:
style: |
ha-card {
height: 60px !important;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
{% if is_state('climate.ruimte1_airco','on') %}
background-color: rgba({{ states("input_text.kleur_iconen")}},1) !important;
{%- else -%}
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
{%- endif %}
}
alignment: end
is it possible to remove the gap between the cards ?
in that same code, the chips card gives me the state, but not the attribute “temperature”. In developper mode, it gives me the temperature …
- type: custom:mushroom-chips-card chips: - type: entity entity: climate.ruimte1_airco primary_info : "{{state_attr('climate.ruimte1_airco','temperature') | round(1) | float(0) }} °C" name: " " icon: " " card_mod: style: | .content { position: relative; flex-direction: column !important; bottom: 20%; }
Look i know i have said this to you before. but it seems like you arent going and checking the fundamentals.
you cant use templates in a non template card (or chip in this instance).
so this:
- type: entity
entity: climate.ruimte1_airco
primary_info : "{{state_attr('climate.ruimte1_airco','temperature') | round(1) | float(0) }} °C"
will never ever work, as it isnt a template chip you are using. also. chips dont have a primary or secondary line. they only have 1 line called content.
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_number.aline_airco
content: "{{state_attr('climate.ruimte1_airco','temperature') | round(1) |
float(0)}}" °C
to solve the gap i would just increase the width of the first card. but to eliminate it entirely i would just use a stack in card in horizontal mode instead:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Airco
icon: mdi:fan
tap_action:
action: call-service
service: script.airco
service_data:
option: ruimte1_airco
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.container {
margin: 10px;
}
mushroom-shape-icon$: |
.shape {
margin-top: 0px;
}
.: |
ha-state-icon {
{% if not is_state('climate.ruimte1_airco','off') %}
animation: spin 1s linear infinite;
{%- endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
ha-card {
height: 60px !important;
{% if is_state('climate.ruimte1_airco','on') %}
background-color: rgba({{ states("input_text.kleur_iconen")}},1) !important;
{% else %}
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_number.aline_airco
content: >-
{{state_attr('climate.office_heating','temperature') |
round(1) | float(0)}} °C
name: ' '
icon: ' '
card_mod:
style: |
.content {
position: relative;
flex-direction: column !important;
bottom: 20%;
}
alignment: end
card_mod:
style: |
ha-card {
height: 60px !important;
{% if is_state('climate.ruimte1_airco','on') %}
background-color: rgba({{ states("input_text.kleur_iconen")}},1) !important;
{% else %}
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
{% endif %}
}
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
}
if you want the if statements with the background to be for the entire card instead, i would just apply it to the stack in card instead of the individual cards like you have now.
I’m trying to get my icon animated on the condition if its on.
But as I want this card integrated into another card, I need to remove the box shadow, background and border.
Is it possible to keep both the animation and the ha-card formatting?
type: custom:mushroom-entity-card
entity: input_boolean.test
icon_color: green
tap_action:
action: toggle
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('input_boolean.test', 'on') %}
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid green;
border-color: green transparent green transparent;
animation: spin 3s linear infinite;
}
{% endif %}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
ha-card: |
box-shadow: none;
background: none;
border: none;
This part
ha-card: |
box-shadow: none;
background: none;
border: none;
doesn’t seem to function.
Has anyone been having any trouble with configuring the background of their buttons? I have the following code that, in theory, should be changing the background of my button AND the background of my icon’s shape. However, the screenshot shows what the end result is; just the icon changing.
card_mod:
style:
mushroom-shape-icon$: |
.shape{
--shape-color: black !important;
}
mushroom-button:nth-child(1)$: |
.button {
--bg-color: red !important;
}
card_mod:
style:
mushroom-shape-icon$: |
.shape{
--shape-color: black !important;
}
mushroom-lock-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
--bg-color: #780000;
}
Buttons are in the shadow root of the control group. Cant access the button before first going through the appropriate shadow root.
Read the section in the first post about what .: | & $ do.
But here is the solution:
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('input_boolean.test', 'on') %}
.shape::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid green;
border-color: green transparent green transparent;
animation: spin 3s linear infinite;
}
{% endif %}
.: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
Oh, perfect! IDK why I couldn’t see the lock-buttons-control line to save my life, but it works flawlessly now that I’ve got it loaded up. Thanks, Dimitri!
Hi there Mushroom Guide Creator 
Its funny, in real life one of the foods I detest most is mushrooms, and yet I find my favourite card is the mushroom slider 
I just wanted to let you know that one of the instructions in your manual (which is fantastic btw, so much help!) is incorrect:
Under the Light Card Text Styling section, for how to change font color, you have:
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
but it should read:
card_mod:
style:
mushroom-state-info$: |
.container {
---primary-text-color: blue;
----secondary-text-color: orange;
}
I couldn’t figure out why it wasn’t working for me. Hopefully this works on your end too
Thanks for the comment - but i hate to say that you are incorrect.
this was changed fairly recently to what is in the guide now:
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
You are likely on an older version of the Mushroom cards
furthermore:
---primary-text-color: blue;
----secondary-text-color: orange;
these are also wrong - both have too many --, should only be 2 normally (atleast that is the convention for naming variables in CSS).
Sorry about the extra dashes, yes I know it should be two, I was typing standing up at an angle and wasn’t paying attention. However, with two dashes it works. My mushroom card is updated (at least when I click “Check for Updates” in HAss it doesn’t say there is anything to update, and in HACS, I don’t see any notifications to update any of my cards. But the code you provided still doesn’t work but the code I provided (minus extra dashes) does work. Any idea why that would be? Everything else works fine, just that one line of code.
You could have --primary-text-color being defined in your theme perhaps?
OR it could be that you need to clear your cache as --primary-text-color is still being cached, if you updated fairly recently.
but otherwise i would bet on mushroom being an old version. have a look in HACS and check the version number.
4.0.0 was recently released - has some new features for HA 2024.8.0
but honestly any version above like 3.5.4 should use the --card-primary-color
Hi! I’m trying to create a card like in example 3. But when I open the iOS HA or Chrome application on PC I see a card like in example 1! If I refresh the page it turns out like in example 2! If I refresh the page again, it will look like in example 3! The main icon is shifting each time, room ifo section loads from time to time. Need yours help ) THANX
All other cards are working perfect!
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 80% 20%
grid-template-rows: 4
grid-template-areas: |
"template1 zone1"
"d1 zone2"
"d1 zone3"
"icon zone4"
cards:
- type: markdown
content: >
<font size=3px>Кинотеатр <br> <font size=5px><font color=black> {{
states('sensor.0x00158d00090e5b38_temperature') | round(1) }}°C
<font size=2px><font color=grey>
{{states('sensor.0x00158d00090e5b38_humidity') | round(1) }}%
view_layout:
grid-area: template1
card_mod:
style: |
ha-markdown {
padding: 0 0 0 3px !important;
}
ha-card {
background-color: transparent;
}
- type: custom:mushroom-entity-card
entity: input_boolean.alarm_away
icon_color: yellow
fill_container: false
primary_info: none
secondary_info: none
tap_action:
action: toggle
view_layout:
grid-area: zone1
card_mod:
style: |
ha-card {
--icon-symbol-size: 35px;
--icon-size: 40px;
--ha-card-background: none;
margin-top: -10px;
margin-left: -10px;
}
- type: custom:mushroom-entity-card
entity: fan.airfresh_kitchen_150
icon: mdi:fan
icon_color: |-
{% if is_state ('fan.airfresh_kitchen_150', 'on')%}
green
{% else %}
#98a2a6
{% endif %}
tap_action:
action: toggle
hold_action:
action: none
view_layout:
grid-area: zone2
card_mod:
style: |
ha-card {
--icon-symbol-size: 35px;
--icon-size: 40px;
--ha-card-background: none;
margin-top: -35px;
margin-left: -10px;
}
- type: custom:mushroom-template-card
icon: ytz:soup-plate
entity: switch.0x54ef441000579805_right
tap_action:
action: toggle
double_tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''#b7c3c7'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
view_layout:
grid-area: icon
card_mod:
style: |
ha-card {
--icon-symbol-size: 80px;
--icon-size: 100px;
--ha-card-background: none;
--box-shadow: none;
bottom: 85px !important;
right: 32px !important;
}
card_mod:
style: |
ha-card {
background-color: rgba(224,234,237,1) !important;
height:200px !important;
}
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png