It works only if the entity is “on”.
Try this one, if u ever want it transparent:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: transparent !important;
}
1 Like
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