Tell me, is it possible to make this object in the form of a card as in the second picture? Can you help?
Yes. Unfortunately that is how browsers register mobile taps. You could try and change :active to :hover instead and that Might work better for your usecase.
type: custom:mushroom-cover-card
entity: cover.office_blinds
show_position_control: true
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
--slider-bg-color: red !important;
--slider-color: blue !important;
}
These all work and correspond to the actual color.
--rgb-state-climate-auto
--rgb-state-climate-cool
--rgb-state-climate-dry
--rgb-state-climate-fan-only
--rgb-state-climate-heat
--rgb-state-climate-heat-cool
--rgb-state-climate-idle
--rgb-state-climate-off
1 Like
Thank you so much Dimitri!
It as worked…
How i know i need to put this mushroom-cover-position-control$:?
Take a look at the guide in my profile. First post section titled: “what the $ and .: | symbols do”.
That will explain how you can do it 
Excelent work, i had not seen, thanks a lot, for your work and help 
I love this! but struggling to solve my own needs on this issue How do i create an badge with a spinning green fan if <switch.double_switch_2_current_value_2> is on for this card?
type: custom:mushroom-template-card
primary: Bad
secondary: |-
{{states ('sensor.sensor_bad_1_etg_temperature')}}°C
-
{{states ('sensor.sensor_bad_1_etg_humidity')}}%
icon: mdi:bathtub
entity: switch.double_switch_2_current_value
icon_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
orange
{% endif %}
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/bad
hold_action:
action: toggle
fill_container: true
Thank you. This works as expected:
type: custom:mushroom-climate-card
entity: climate.2e_ac
icon: mdi:air-conditioner
fill_container: false
show_temperature_control: true
collapsible_controls: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, "heat") %}
--shape-animation: pingheat 1.5s infinite;
{% elif is_state(config.entity, "cool") %}
--shape-animation: pingcool 1.5s infinite;
{% elif is_state(config.entity, "dry") %}
--shape-animation: pingdry 1.5s infinite;
{% elif is_state(config.entity, "fan_only") %}
--shape-animation: pingfan 1.5s infinite;
{% endif %}
} @keyframes pingheat {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-state-climate-heat),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
} @keyframes pingcool {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-state-climate-cool),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
} @keyframes pingdry {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-state-climate-dry),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
} @keyframes pingfan {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-state-climate-fan-only),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
cheers,
You could just use the built in badges for the majority of that and then animate it.
type: custom:mushroom-template-card
primary: Bad
secondary: |-
{{states ('sensor.sensor_bad_1_etg_temperature')}}°C
-
{{states ('sensor.sensor_bad_1_etg_humidity')}}%
icon: mdi:bathtub
entity: switch.double_switch_2_current_value
icon_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
orange
{% endif %}
badge_icon: |-
mdi:fan
badge_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
blue
{% endif %}
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/bad
hold_action:
action: toggle
fill_container: true
card_mod:
style: |
mushroom-badge-icon {
{% if is_state('switch.double_switch_2_current_value', 'on')%}
animation: spin 1s linear infinite;
{% else %}
display: none;
{% endif %}
}
1 Like
Hello,
Does anyone know how I can set the bottom bar to “automatic” distance, for any desired device?
now there is always wasted space under the last bar, and I would like everything to fill the screen.
Climate card:
Any way to increase the container size of the temperature controls?
type: custom:mushroom-climate-card
entity: climate.thermostats_2e
fill_container: true
show_temperature_control: true
layout: vertical
primary_info: none
icon_type: none
secondary_info: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 3rem;
padding: 1rem
}
#container {
background: red;
height: 5rem ;
padding: 1rem;
}
#container .button:nth-child(1) {
--control-icon-size: 4rem; }
#container .button:nth-child(3) {
--control-icon-size: 4rem; }
.: |
ha-card {
width: 20rem;
height: 10rem !important;
padding: 0rem !important;
border: solid ;
background: yellow ;
}
try like this:
type: custom:mushroom-climate-card
entity: climate.office_heating
fill_container: true
show_temperature_control: true
layout: vertical
primary_info: none
icon_type: none
secondary_info: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 3rem;
padding: 1rem
}
#container {
background: red;
padding: 1rem;
height: 200px !important;
}
#container .button:nth-child(1) {
--control-icon-size: 4rem;
}
#container .button:nth-child(3) {
--control-icon-size: 4rem;
}
mushroom-button-group$: |
.container {
height: 200px !important;
}
.: |
ha-card {
width: 20rem;
height: 10rem !important;
padding: 0rem !important;
border: solid ;
background: yellow ;
}
1 Like
Why do I end up with an offset between the 2 containers ?
ps: styles and colors for testing purposes only 
type: custom:mushroom-climate-card
entity: climate.thermostat_2e_fireplace
show_temperature_control: true
layout: horizontal
primary_info: none
icon: mdi:thermometer
secondary_info: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 2rem;
padding-left: 1rem
padding-right: 1rem
}
#container {
background: red;
padding: 1rem;
height: 4rem !important;
width: 20rem !important;
}
#container .button:nth-child(1) {
--control-icon-size: 3rem;
}
#container .button:nth-child(3) {
--control-icon-size: 3rem;
}
mushroom-button-group$: |
.container {
height: 4rem !important;
width: 20rem !important;
background: green;
padding: 0rem !important;
}
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 3rem;
--icon-size: 4rem;
}
.: |
ha-card {
width: 30rem;
height: 5rem !important;
padding: 0rem !important;
border: solid ;
background: yellow ;
align-items: center;
}
try to throw a justify-content: flex-start !important; in your button group container.
its currently flex end so it wont fit.
1 Like
That was it 
Thank you!
hi Dimitri.
Can you help to set “secondary” in Christmas tree card (animated)… if I add secondary It give me an error.
Anyway, I have two Christmas tree, and I need two card. could you show me a different Christmas tree card so I can avoid errors to turn on the lights?
thanks
Trying to figure out the switch to dark-mode, but can’t quite figure out how to adjust the colors based on the state of the host. I’ve removed the references to :host here for clarity. It currently looks like the first image, which is fine when in light mode, but I’m trying to have it adjust to the second when dark mode is detected.
type: custom:stack-in-card
cards:
- type: custom:mushroom-fan-card
entity: fan.air_purifier
primary_info: name
show_oscillate_control: false
show_percentage_control: true
icon: mdi:blank
name: Air Purifier
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: #7fdee9 !important;
--bg-color: #ccf2f6 !important;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
}
- type: custom:mushroom-template-card
primary: null
layout: horizontal
entity: fan.air_purifier
icon: mdi:air-purifier
icon_color: '{{ ''cyan'' if is_state(entity, ''on'') else ''disabled'' }} '
tap_action:
action: toggle
hold_action:
action: more-info
badge_icon: mdi:power
badge_color: '{{ ''#3CB371'' if is_state(entity, ''on'') else ''#DAA520'' }} '
card_mod:
style: |
{% if is_state(config.entity, 'on') %}
ha-state-icon {
animation: air {{ 25 / state_attr(config.entity , 'percentage') }}s infinite;
}
@keyframes air {
0%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 98% 32%, 63% 42%, 65% 58%, 100% 43%); }
75% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% 44%, 64% 61%, 64% 73%, 100% 72%); }
50% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 78% 38%, 64% 43%, 64% 72%, 100% 73%); }
}
{% else %}
{% endif %}
ha-card {
width: 69px;
top: -121px;
}
- type: custom:mushroom-template-card
primary: null
layout: horizontal
entity: switch.air_purifier_auto_mode
icon: mdi:fan-auto
icon_color: '{{ ''#FF8360'' if is_state(entity, ''on'') else ''disabled'' }} '
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
{% if is_state(config.entity, 'on') %}
{% else %}
{% endif %}
ha-card {
width: 69px;
top: -186px;
float: right;
}
- type: custom:mushroom-template-card
primary: null
layout: horizontal
entity: light.air_purifier_led
icon: >-
{{ 'mdi:lightbulb-on' if is_state(entity, 'on') else 'mdi:lightbulb-off'
}}
icon_color: '{{ ''#FEDC97'' if is_state(entity, ''on'') else ''disabled'' }} '
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
{% if is_state(config.entity, 'on') %}
{% else %}
{% endif %}
ha-card {
width: 43px;
top: -252px;
left: -69px;
float: right;
}
card_mod:
style: |
ha-card {
height: 122px;
}