Some variables have changed it seems.
mushroom-state-info$: |
.container {
--primary-text-color: blue;
--secondary-text-color: orange;
}
should be
mushroom-state-info $: |
.container {
--card-primary-color: red;
--card-secondary-color: red;
}
[Bug]: primary-text-color no longer working? · Issue #1355 · piitaya/lovelace-mushroom (github.com)
Has been that way since version 3.4.1. Lots of posts here about it.
Hello,
thank you for your help. Yes, I want to have the follow color situation:
If the windows is closed, the shape background should be transparent. If the window is open, the shape background color should change to red.
The icon color change is already working related to the status of the window.
Further, the color of the control buttons should always be “white”. Actually. the color of the control button is also changing related to the status. I can’t fix this color to “white” always.
Thank you very much for your support.
type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.bed_curtains
layout: vertical
show_buttons_control: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('binary_sensor.fenster_buro', 'off') %}
background: transparent !important;
{% else %}
background: red !important;
{% endif %}
}
.: |
ha-state-icon {
{% if is_state('binary_sensor.fenster_buro', 'off') %}
color: green !important;
{% else %}
color: red !important;
{% endif %}
}
Hi, because the padding or margin doesn’t work well? When i wrong? Can i move the chips row to 5-10px offset to top?
type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: input_select.riccardo_in_casa
icon_type: entity-picture
primary_info: state
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
mushroom-badge-icon {
{% if is_state(config.entity, 'fuori casa') %}
--card-mod-icon: mdi:home-export-outline;
--main-color: orange !important;
{% else %}
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: >
{% set battery_level = (states(entity) | int / 10) | round(0) | int *
10 %} {% if is_state('sensor.iphone_di_riccardo_battery_state',
'Charging' ) %}
{% if battery_level > 0 %}
mdi:battery-charging-{{ battery_level }}
{% else %}
mdi:battery-charging-outline
{% endif %}
{% else %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
content: '{{ states(entity) }} %'
card_mod:
style: |
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
{% if (states(config.entity) | int) < 15 %}
animation: blink 1s linear infinite;
{% endif %}
}
tap_action:
action: none
entity: sensor.iphone_di_riccardo_battery_level
- type: template
tap_action:
action: toggle
entity: sensor.iphone_di_riccardo_sim_1
icon_color: >-
{% if is_state('sensor.iphone_di_riccardo_connection_type', 'Cellular'
) %}
green
{% else %}
grey
{% endif %}
icon: >
{% if is_state('sensor.iphone_di_riccardo_connection_type', 'Cellular'
) %}
mdi:cellphone
{% else %}
mdi:cellphone
{% endif %}
- type: template
tap_action:
action: toggle
entity: sensor.iphone_di_riccardo_ssid
icon_color: >-
{% if is_state('sensor.iphone_di_riccardo_connection_type', 'Wi-Fi' )
%}
green
{% else %}
grey
{% endif %}
icon: >
{% if is_state('sensor.iphone_di_riccardo_connection_type', 'Wi-Fi' )
%}
mdi:wifi
{% else %}
mdi:wifi
{% endif %}
- type: template
tap_action:
action: toggle
entity: binary_sensor.iphone_di_riccardo_focus
icon_color: |-
{% if is_state('binary_sensor.iphone_di_riccardo_focus', 'Spento' ) %}
green
{% else %}
grey
{% endif %}
icon: |
{% if is_state('binary_sensor.iphone_di_riccardo_focus', 'Spento' ) %}
mdi:moon-waning-crescent
{% else %}
mdi:moon-waning-crescent
{% endif %}
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding-bottom: 20px !important;
}
card_mod:
style: |
ha-card {
height: 102px;
}
Great guide, thanks a lot!
What I couldn’t find is whether you can dynamically change the color of each chip in a chips card based on the state of the respective entity?
E.g., with this:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.cooking_mode
tap_action:
action: toggle
icon: mdi:silverware-fork-knife
- type: entity
entity: input_boolean.party_mode
tap_action:
action: toggle
- type: entity
entity: input_boolean.guest_mode
tap_action:
action: toggle
Can I make each “chip” have a different background color depending on whether the input_boolean is on or off?
So something like this:
card_mod:
style: |
ha-card {
{% if states('your_entity_id') == 'on' %}
--chip-background: yellow;
{% else %}
--chip-background: gray;
{% endif %}
}
But changing each chip based on the state of only it’s “own” entity? That would be great to be able to remove the state text, but still see the state.
Yes just put the mod on the individual chip
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
card_mod:
style: |
ha-card {
{% if states('your_entity_id') == 'on' %}
--chip-background: red;
{% else %}
--chip-background: grey;
{% endif %}
}
- type: template
icon: mdi:mushroom
card_mod:
style: |
ha-card {
{% if states('your_entity_id') == 'on' %}
--chip-background: blue;
{% else %}
--chip-background: grey;
{% endif %}
}
- type: template
icon: mdi:mushroom
card_mod:
style: |
ha-card {
{% if states('your_entity_id') == 'on' %}
--chip-background: yellow;
{% else %}
--chip-background: grey;
{% endif %}
}
Yes just add top: -15px; to your mod.
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding-bottom: 20px !important;
top: -15px;
thanks, it’s work well!
Ahh, very nice (and intuitive, if I had just thought a bit longer 
) Thanks!
I was able to figure out the Mushroom Alarm Card
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.ha_alarm
states:
- armed_home
- armed_away
- armed_night
card_mod:
style:
mushroom-button:nth-child(1):
$: |
.button {
--bg-color: orange !important;
--icon-color: blue !important;
}
mushroom-button:nth-child(2):
$: |
.button {
--bg-color: red !important;
--icon-color: white !important;
}
mushroom-button:nth-child(3):
$: |
.button {
--bg-color: grey !important;
--icon-color: yellow !important;
}
Yes it will work with a chips card. This will force pretty much any card to the bottom of the screen.
position: fixed;
bottom: 3px;
full card code
type: custom:mod-card
card_mod:
style: |
ha-card {
background: transparent;
position: fixed;
bottom: 3px;
z-index: 1;
width: calc(100% - 100px);
padding: 8px ;
left: 100px;
border: none;
}
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: ''
icon: mdi:home
content: test1
- type: template
tap_action:
action: navigate
navigation_path: ''
icon: mdi:bed
content: test2
- type: template
icon: mdi:human-baby-changing-table
content: test3
It’s not related to the previous question or the grid layout code you have posted.
Just a the regular mushroom Chip card with a secondary text line beneath the primary text.
Hello Community! Can somebody help me out… i want to increase the text size of a sensor card in mushroom… i cant figure it out what I’m doing wrong, size of sensor text is not increasing… i highlighted the card mod that im using… any help is appreciated.
The code you have is showing standard HA sensor card and is not related to Mushroom.
Please refer to the following guide for a solution
How do I combine these two sets of card-mod entries to function at the same time?
Would like the slider colour, font changes and also have the margins updates (to combine text with dimmer slider) all combined but can’t seem to figure it out so far.
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control $: |
mushroom-slider {
--main-color: white !important;
--secondary-color: clear
}
mushroom-state-info $: |
.container {
--card-secondary-font-size: 14px;
--card-primary-font-size: 16px;
--card-secondary-color: grey
}
card_mod:
style: |
div.actions {
margin-top: -3.8em;
margin-left: 45px;
opacity: 0.4;
}
I love this guide and use it for reference a lot. I know that there was some discussion a while back about changes to some of the CSS code. Specifically, the colour of text in a template card has moved to ha-card I believe - is the guide going to be updated?
Thanks for the work!
I’m having some problems trying to change the icon shape colour to another colour or transparent. I have the mushroom-template-card within a conditional card:
type: conditional
conditions:
- condition: state
entity: sensor.water_softener_salt_level
state: ok
card:
type: custom:mushroom-template-card
primary: Water softener salt tank empty!
secondary: Please refill
icon: mdi:water
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
badge_color: white
card_mod:
style: |
ha-card {
background-color: #8c0101;
--card-primary-color: white;
--card-secondary-color: white;
}
ha-state-icon {
color: white;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
Colour or transparency for the icon shape doesn’t change. What have I got wrong?
With the help of Bing ChatGPT, this seems to work:
type: custom:mushroom-light-card
entity: light.l23_2
name: L23 Test (All CSS together)
show_brightness_control: true
collapsible_controls: true
icon_color: white
card_mod:
style:
.: |
div.actions {
margin-top: -3.8em;
margin-left: 45px;
opacity: 0.2;
}
ha-card {
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--card-secondary-color: grey;
}
