Add --card-primary-line-height: 35px !important;
card_mod:
style: |
ha-card {
{% if is_state('light.gameroom_fan','on') %}
--ha-card-background: var(--lights-button-color); {% endif %}
--card-primary-font-size: 35px !important;
--card-primary-line-height: 35px !important;
--icon-symbol-size: 60px;
}
Is this for me? I need to change the color of the icon and the color of the text depending on the value
Yes his message was for you 
The template chip is more customizable.
- type: template
icon_color: |
{{ 'red' if states(config.entity) | int <= 20 else 'orange' }}
entity: sensor.datchik_vlazhnosti_i_temperatury_spalnia_humidity
content: test
icon: mdi:home
card_mod:
style: |
ha-card {
--text-color:
{{ 'red' if states(config.entity) | int <= 20 else 'lime' }}
}
There are several ways to address your request. Check out the chips link in his guide
I didn’t miss understand, this is a mushroom cards topic. so therefore I was showing you how to use Mushroom cards with auto entities.
the entity filter uses the stock entities card.
maybe I should have made that clear.
To get rid of the empty card use
show_empty: false
insert this line under
type: entity-filter
and how to output the sensor values?
content: |
{{ states('sensor.your_sensor')}}%
Thank you man!
And how I can get the Space between them smaller?
Tried allready spacing:
But no Resultat…
no problem.
take a look at alignment: justify
try changing it to start, end or center
the current “justify” will space them equally from left to right
Simple and beautiful 
Can you please share your code?
Here you go:
type: entity-filter
entities:
- entity: binary_sensor.tf_w_sz_tur
name: null
- entity: binary_sensor.tf_w_kz_tur
name: Léon
- entity: binary_sensor.tf_w_sb_tur
name: Südbalkon
- entity: binary_sensor.tf_w_wb_tur
name: Westbalkon
- entity: binary_sensor.tf_k_k_tur
name: Keller
state_color: true
state_filter:
- 'on'
Yeah, it disappears right now when all doors are closed 
Thank you, so easy.
Sometimes you do Not See the Forest, regarding to many trees:joy:
Hi out there, I have a question about the Mushroom Light Card, more specifically about its brightness control:
Is it possible for the brightness change to be displayed as a percentage during adjustment, as the native control of HA does?
Background to the question, I would like to show only the brightness control. This is possible with the Mushroom Light Card, but unfortunately the percentage changes are not displayed live when adjusting.
Maybe someone knows how and if this is possible. Or does anyone know of an alternative custom card that can do that?
When you say you want to show only the brightness control what do you mean? just show the slider? this is also possible with the tile card and card mod like this:
type: tile
entity: light.office_main_light
features:
- type: light-brightness
card_mod:
style: |
.content {
display: none !important;
}
hui-card-features {
padding-top: 12px;
}
Dimitri…can You help once more
Currently ill use:
card_mod:
style:
mushroom-media-player-media-control$: |
mushroom-button:nth-child(1) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(2) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(3) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(4) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-media-player-volume-control$: |
mushroom-button:nth-child(1) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(2) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(3) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(4) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
.: |
mushroom-button {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
ha-card {
height: 50px !important;
}
mushroom-shape-icon$: |
.shape {
background: none !important;
}
On the media card…
And works great tho
But i fail to import:
mushroom-media-player-volume-control$: mushroom-slider$: |
.slider { height: 200px !important; }
Did try on several places…but ended up on some indentations
To change…results where then no errors
But still the slider is bigger then i wanted to be at 25px
Any idea?
Thank You!
try like this:
type: custom:mushroom-media-player-card
entity: media_player.dimitris_pc
show_volume_level: true
use_media_info: true
volume_controls:
- volume_mute
- volume_buttons
- volume_set
media_controls:
- on_off
- shuffle
- previous
- play_pause_stop
- next
- repeat
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
mushroom-media-player-media-control$: |
mushroom-button:nth-child(1) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(2) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(3) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(4) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-media-player-volume-control$:
mushroom-slider$: |
.slider {
height: 200px !important;
}
.: |
mushroom-button:nth-child(1) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(2) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(3) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
mushroom-button:nth-child(4) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
.: |
mushroom-button {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
ha-card {
height: 50px !important;
}
The issue is that you cant have 2 seperate places refer to the same thing.
you already have mushroom-media-player-volume-control$: being referred to in 1 place here:
mushroom-media-player-volume-control$: |
mushroom-button:nth-child(1) {
height: 30px !important;
width: 30px !important;
margin-top: 7px !important;
}
you cant refer to it again, that would be a duplication.
so you have to append the mushroom-slider$: | to mushroom-media-player-volume-control$: like the above, but then access mushroom-media-player-volume-control$: directly as well, using .: | to get to each of the buttons.
Yes! @dimitri.landerloos You got me just right. Super! I didn’t even come up with the idea to try card mod and what options would have had to be set. You are the best. So it works perfectly and exactly the way I wanted it. Thank you very much!
Thank You Dimitri for guidance…
Now i saw what i did wrong
Keep rocking m8!
Trying to get the icon to animate, but been unsuccessful. Any help please? thanks
type: custom:mushroom-template-card
primary: Washing Machine
secondary: >-
{% if is_state("sensor.washer", "on") %} Currently {{
state_attr("sensor.washer", "run_state") }} | {{ state_attr("sensor.washer",
"remain_time") }}/{{ state_attr("sensor.washer", "initial_time") }} elapsed
{{ state_attr("sensor.washer", "current_course") }} {% else %} Off {% endif %}
icon: mdi:tumble-dryer
entity: sensor.washer
multiline_secondary: true
icon_color: indigo
tap_action:
action: more-info
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}