I was replying to @Giuseppe_Venuti - only works on pictures, not icons
Hopefully ma last question:
Weisserwolf611 had the right answer but now in off state the icon is grey,
i want the off state steel blue and on Orange.
And this combined with
thx again
@Degerman
1.) Why you ignored my answer? and why post the code as screenshot?!
2.) My solution works, but you doesnāt use my code. I can see the shape.
3.) This code could everything you want.
type: custom:mushroom-light-card
entity: light.beleuchtung
icon: mdi:lightbulb
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: transparent !important;
box-shadow: none;
border: none;
}
.: |
ha-state-icon {
color: {% if is_state(config.entity, 'on') %} orange {% else %} steelblue {% endif %} !important;
}
hi, just a lot of time trying to get the following
I want a presence sensor shape to be styled depending on the time it has beeen trriggered, for the 2 first seconds I want a fast blink effect, and for the second 2 seconds a different blinking rate.
for that I have been deep diving into coding with I dont know at all. I created a template that gives the time the state got on, then substracted the now() time
so the time problem is solveed, as far as I know, just kidding, in the template section of developer tools it works, 
now I have come to this code inside the custom button card code
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px;
--icon-size: 50px;
--shape-color: rgba(219, 107, 98, 1 );
--icon-color: rgba(10, 44, 101, 1);
--shape-animation: >
{% set starton = as_timestamp(states('sensor.luz_pasillo_off_on')) |int %}
{% set diferencia = (as_timestamp(now()) |int) - (as_timestamp(starton) | int) %}{{ diferencia %}
{% if diferencia <= 2 %}
blink-fast 0.5s infinite;
{% else %}
blink-slow 1s infinite;
{% endif %}
}
@keyframes blink-fast {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
@keyframes blink-slow {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
}
I canĀ“t make it work, no aoutup at all, could you please take a look and advice what is happening that prevents it to work?
zu 1: I did not ignore you we just misunderstood. The screenshot I posted should show what I mean. I want the background of the card invisible too, but I can not get it work all together.
My English is not the best.
zu 2: I wrote your post did it, so it works
zu 3: this code works to
I try to combine all 3 to one and I get it in a testcard there it works.
type: custom:mushroom-light-card
entity: light.flur
icon: mdi:lightbulb
layout: vertical
name: " "
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: transparent !important;
box-shadow: none;
border: none;
}
.: |
ha-state-icon {
color: {% if is_state(config.entity, 'on') %} orange {% else %} steelblue {% endif %} !important;
}
ha-card {
background-color: transparent;
box-shadow: none;
border: none;
}
:host {
--mush-icon-size: 70px;
}
but when I try to add in my working cards it stops working. So my question:
how can I integrate the code above in my code:
- type: markdown
content: "---"
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
margin-top: -20px;
margin-bottom: -100px;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
layout: vertical
name: " "
use_light_color: false
show_brightness_control: true
collapsible_controls: true
show_color_temp_control: false
show_color_control: false
entity: light.wohnen
card_mod:
style: |
:host {
--mush-icon-size: 70px;
}
ha-card {
background-color: transparent;
box-shadow: none;
margin-top: 25px;
border: none;
}
- type: vertical-stack
cards:
- type: entity
entity: sensor.wohnen_power_stromi
name: " "
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
border: none;
margin-top: -10px;
}
state_color: false
icon: " "
- type: entity
entity: sensor.shellydimmer2_ec64c9c4f5f4_energy
name: " "
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
border: none;
margin-top: -25px;
}
state_color: false
icon: " "
- type: markdown
content: "---"
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
margin-top: -20px;
margin-bottom: -100px;
border: none;
}
Puh I hope now you understand me.
Sorry for the UmstƤnde 
Hi,
I would like to change the background color of a custom:mushroom-entity-card based on the value of a defined text-helper - input_text.helper_rainbackground: value can be blue or black)
#that works and colors the background blue.
background-color: blue;
#that does not work if input_text.helper_rainbackground=blue
background-color: |
[[[ return states['input_text.helper_rainbackground'].state]]];
I also tried some other code combinations but I donĀ“t get it work.
Can anybody please help me with the code?
Hello, itās possible to show name and state on chips cards because it not make sense to use it when I donāt see what is open or close.
Regards.
Quick question regarding card-mod in themesā¦
Iām building a dashboard with Mushroom Cards and Iād like to have 2 different fonts for the primary & secondary info. Right now I can achieve this by adding the following to each mushroom card manually:
style:
mushroom-state-info$: |
span.primary {
font-family: Inter-Bold;
}
span.secondary {
font-family: Inter-Light;
}
Iād like to be able to apply this through a theme so it kicks in on all Mushroom cards. How can I achieve this?
Thanks in advance.
1 Like
solved it mysefl:
background-color: {{ states[āinput_text.helper_rainbackgroundā].state }};
1 Like
Hi all, hope someone can help me. Iām having trouble colouring my icons with the mushroom chips card. I have a few buttons for a ceiling fan to be āoff, 1, 2, 3ā and would like to keep it coloured green for whichever state its on. Iām canāt seem to get it working with the percentages.
Happy to use the normal chips icon colour, but using ha-card to colour the background green might be even better.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:fan-off
entity: fan.living_room_fan
icon_color: ""
tap_action:
action: perform-action
perform_action: fan.turn_off
target:
entity_id:
- fan.living_room_fan
- type: template
icon: mdi:numeric-1
entity: fan.living_room_fan
icon_color: ""
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
entity_id: fan.living_room_fan
data:
percentage: 33
- type: template
icon: mdi:numeric-2
entity: fan.living_room_fan
icon_color: ""
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
entity_id: fan.living_room_fan
data:
percentage: 66
- type: template
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
entity_id: fan.living_room_fan
data:
percentage: 100
icon: mdi:numeric-3
entity: fan.living_room_fan
thanks in advance
Hi my fan-config works with states (low, medium, high ect) instead of percentages but perhaps you can find something usefull in it.
type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: low
target:
entity_id: fan.nrg_fan
icon: mdi:fan
icon_color: |-
{% if is_state_attr('fan.nrg_fan', 'preset_mode', 'low')%}
blue
{% elif is_state_attr('fan.nrg_fan', 'preset_mode', 'medium')%}
green
{% elif is_state_attr('fan.nrg_fan', 'preset_mode', 'high')%}
red
{% else %}
disabled
{% endif %}
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: "off"
target:
entity_id: fan.nrg_fan
hold_action:
action: more-info
entity: fan.nrg_fan
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--chip-box-shadow: 0px 0px;
animation: rotation linear infinite;
{% if states('fan.nrg_fan') == 'on' %}
animation-duration: 3s;
{%- else -%}
{%- endif %}
}
- type: template
icon: mdi:numeric-1-circle
icon_color: |-
{% if is_state_attr('fan.nrg_fan', 'preset_mode', 'low')%}
blue
{% else %}
disabled
{% endif %}
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: low
target:
entity_id: fan.nrg_fan
- type: template
icon: mdi:numeric-2-circle
icon_color: |-
{% if is_state_attr('fan.nrg_fan', 'preset_mode', 'medium')%}
blue
{% else %}
disabled
{% endif %}
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: medium
target:
entity_id: fan.nrg_fan
- type: template
icon: mdi:numeric-3-circle
icon_color: |-
{% if is_state_attr('fan.nrg_fan', 'preset_mode', 'high')%}
blue
{% else %}
disabled
{% endif %}
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: high
target:
entity_id: fan.nrg_fan
alignment: center
can I add a shadow to the āoutlineā of the button-field for the number-card? My theme makes it a bit hard to see in dark mode, so a subtle shadow would make it pop, see picā¦ Iām terrible at CSS so dont kill meā¦
You were nearly there:
card_mod:
style:
mushroom-number-value-control$:
mushroom-input-number$: |
#container {
background: red;
}
1 Like
I would, ideally, like to reduce the space around icons in some Template cards. Is this possible?
you could add mush-spacing: 5px to your theme to reduce spacing around icons
1 Like
Hey guys,
I have been trying for some days to find out what the issue ist but I am not able to solve the problem. I hope some of you guys can help me out.
Iām trying to create a card with an icon on the left side of the card. Therefore, Iām using the card_mod to adjust the margin but on matter what Iām filling out nothing happens. Itās like something is overwriting it or the card_mod isnāt working at all.
Here is the code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lounge
secondary: "{{ states(\"sensor.wohnzimmer_dg_heizung\") | round(0) }} Ā°C"
icon: mdi:sofa
fill_container: false
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background-blend-mode: darken;
}
:host {
background-image: url('/local/lounge.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
background-size: 50% 100%;
background-position: right;
background-repeat: no-repeat;
--mush-icon-size: 76px;
height: 66px;
margin-left: -28px !important;
}
I have HA 2024.11.1 installed and also card-mod 3.4.3
Iāve made significant progress, but thereās one problem I canāt resolve: preventing the title from being cut off.
Does anyone have any ideas?
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: climate.wohnzimmer
primary: Wohnzimmer DG
secondary: >
{% set temp = state_attr('climate.wohnzimmer_dg',
'current_temperature') %} {{ temp | round(2) | string | replace('.',
',') }}Ā°C
icon_type: none
tap_action:
action: more-info
fill_container: false
card_mod:
style:
.: |
ha-card {
--card-primary-font-size: 15px; !important;
--card-secondary-font-size: 14px;
}
mushroom-shape-icon {
position: absolute;
--icon-size: 130px;
margin-left: -1.8em;
}
- type: custom:mushroom-template-card
entity: climate.wohnzimmer
icon: >
{% set action = state_attr('climate.wohnzimmer', 'hvac_action') %} {%
set mode = states('climate.wohnzimmer') %} {% if mode == 'off' %}
mdi:power
{% elif mode == 'auto' and action == 'heating' %}
mdi:fire
{% elif mode == 'auto' and action != 'heating' %}
mdi:thermostat-auto
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:thermostat
{% endif %}
icon_color: >
{% set action = state_attr('climate.wohnzimmer', 'hvac_action') %} {%
set mode = states('climate.wohnzimmer') %} {% if mode == 'off' %}
grey
{% elif mode == 'auto' and action == 'heating' %}
red
{% elif mode == 'auto' and action != 'heating' %}
green
{% elif mode == 'heat' %}
red
{% else %}
blue
{% endif %}
alignment: end
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 35px;
top: 2px;
left: -5px;
}
mushroom-state-item {
text-align: right;
transform: translateX(0%);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: climate.wohnzimmer
primary: null
tap_action:
action: more-info
secondary: null
icon: mdi:sofa
icon_color: >
{% set action = state_attr('climate.wohnzimmer', 'hvac_action') %} {%
set mode = states('climate.wohnzimmer') %} {% if mode == 'off' %}
grey
{% elif mode == 'auto' and action == 'heating' %}
red
{% elif mode == 'auto' and action != 'heating' %}
green
{% elif mode == 'heat' %}
red
{% else %}
blue
{% endif %}
fill_container: false
layout: horizontal
multiline_secondary: false
card_mod:
style:
.: |
ha-card {
min-height: 80px; /* Mindesthƶhe der Karte */
background-color: transparent !important; /* GrĆ¼ne Hintergrundfarbe */
color: white; /* WeiĆer Text fĆ¼r Kontrast */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Optionaler Schatten */
transition: background-color 0.3s ease; /* Sanfter Ćbergang bei Farbwechsel */
--card-primary-font-size: 17px; !important;
--card-secondary-font-size: 14px;
alignment:
margin-top: 0.5rem;
}
mushroom-shape-icon {
position: absolute;
--icon-size: 130px;
margin-left: -1.8em;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: none
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: none
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.wohnzimmer_luftfeuchtigkeit
content_info: state
icon: mdi:water
icon_color: blue
card_mod:
style: |
ha-card {
display: flex; /* Flexbox aktivieren */
justify-content: flex-end; /* Chips am rechten Rand ausrichten */
--chip-background: transparent;
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 35px;
--chip-padding: 30px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.wohnzimmer_heizung
icon: mdi:heat-wave
content_info: state
icon_color: null
card_mod:
style: |
ha-card {
display: flex; /* Flexbox aktivieren */
justify-content: flex-end; /* Chips am rechten Rand ausrichten */
--chip-background: transparent;
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 35px;
--chip-padding: 15px;
{% set value = states('sensor.wohnzimmer_heizung') | float(0) %}
{% if value > 70 %}
--card-mod-icon-color: #c62828; /* Stark rot */
{% elif value > 30 %}
--card-mod-icon-color: #FF6347; /* Mittelrot (Tomato) */
{% elif value > 0 %}
--card-mod-icon-color: #FFA07A; /* Leicht rot (Light Salmon) */
{% else %}
--card-mod-icon-color: grey; /* Standardfarbe fĆ¼r 0 oder kleiner */
{% endif %}
}Hi all! I have a mushroom-chips-card. What is code for change background colors:
if entity state is A , then color is red; if if entity state is b , then color is blue ā¦
thank you.
now i use this code:
card_mod:
style: |-
ha-card {
border: var(--supplies-button-border) !important;
justify-content: center !important;
{% set bl = states(config.entity) | int %}
{% if bl == 'Carta e cartone' %}
--chip-background: rgb(255,179,67);
{% elif bl == 'Plastica') %}
--chip-background: blue;
{% else %}
--text-color: var(--supplies-button-text-color-off);
--card-mod-icon-color: var(--supplies-button-text-color-off);
--chip-background: var(--supplies-button-color-off);
{% endif %}
}
Maybe now is ok:
card_mod:
style: |-
ha-card {
border: var(--supplies-button-border) !important;
justify-content: center !important;
{% if (states(config.entity) == 'Carta e cartone') %}
--chip-background: rgb(255,179,67);
{% elif (states(config.entity) == 'Plastica e metalli') %}
--chip-background: blue;
{% else %}
--text-color: var(--supplies-button-text-color-off);
--card-mod-icon-color: var(--supplies-button-text-color-off);
--chip-background: var(--supplies-button-color-off);
{% endif %}
}