Please. Still no luck to fix that by myself
Maybe you can help ne Here again?
It makes me Crazy😂
Want to have the Same Style and so, Like the Other, nur Here with a rotating Icon.
This works, but the Fan is Not correct positioned and so on😵💫
type: custom:mushroom-template-card
primary: Heizung
icon: mdi:fan
icon_color: |
{% if is_state('climate.heizung_dachflur','heat') %}
red
{% else %}
black
{% endif %}
entity: climate.heizung_dachflur
layout: vertical
picture: ''
card_mod:
style:
mushroom-shape-icon: |
mushroom-shape-icon {
--icon-size: 0px;
}
ha-state-icon {
--icon-symbol-size: 60px;
margin-top: 10px;
{{ 'animation: spin 2s linear infinite;' if is_state('climate.heizung_dachflur','heat') }}
}
ha-card {
--card-primary-font-size: 16px
background: blue !important;
border: 1px solid white;
height: 83px !important;
zoom: 150%;
}
Struggling to get a scrollable title with chips. Well it works but the visual editor for chips is gone for some reason. Not a big deal but would love to get it back. Get the standard * At path: chips.0.card_mod – Expected a value of type never, but received: [object Object]
Searched through the topic but couldn’t find something related. Indention seems fine.
Hello, please tell me. My code has an animation that runs when the switch is active and turns off when the switch is disabled. I need to make sure that when the switch is turned on, the animation runs for 2 seconds and turns itself off, and the switch itself remains on. is it possible to do this? Now this animation is turned off by home assistant automation, but this imposes a number of restrictions. I wish the animation would turn itself off…
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
secondary: ''
entity: input_boolean.vkliuchenie_rozetok_kukhnia
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
{% if states('input_boolean.vkliuchenie_rozetok_kukhnia') == 'on' %}
.shape:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
border: 4px solid transparent;
border-top-color: rgb(var(--rgb-deep-orange));
border-bottom-color: rgb(var(--rgb-deep-orange));
border-radius:50%;
animation: spin 2s ease infinite;
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform:rotate(360deg);}
}
{% endif %}
.: |
ha-card {
background: none;
box-shadow: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
#width: 75%;
}
I’ll have to think about that. I can make it run for 2 seconds, but making the lines go away is another challenge.
Please post your code using the community standards. #11
My mistake. It’s just the topics I’ve searched everyone demanded screenshots of the full code 
type: custom:mushroom-chips-card
chips:
- type: template
content: Bedroom
card_mod:
style: |
ha-card {
transform: translateY(-15px);
margin: 0px 0px 12px;
--chip-background: none;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-border-radius: 2px;
--chip-height: 65px;
--chip-padding: 14px;
--chip-spacing: -35px;
--chip-icon-size:0.28em;
}
- type: entity
entity: sensor.bedroom_temperature_atc
tap_action:
action: more-info
- type: entity
entity: sensor.bedroom_humidity
tap_action:
action: more-info
- type: template
entity: cover.curtain_bedroom
icon: >-
{% if is_state('cover.curtain_bedroom', 'open') %} mdi:curtains {% else %}
mdi:curtains-closed {% endif %}
icon_color: >-
{% if is_state('cover.curtain_bedroom', 'open') %} orange {% else %} grey
{% endif %}
content: '{{ state_attr(''cover.curtain_bedroom'', ''current_position'') }}%'
tap_action:
action: more-info
- type: entity
entity: climate.bedroom_trv
tap_action:
action: more-info
card_mod:
style: |
ha-card > .chip-container {
flex-wrap: nowrap;
overflow-x: auto;
}
ha-card > .chip-container > * {
flex-shrink: 0;
}
Its easier to copy and paste the code this way. I generally test my work prior to replying with a resolution.
Let’s start with this…
type: custom:mushroom-template-card
primary: Heizung
icon: mdi:fan
icon_color: |
{% if is_state('climate.heizung_dachflur','heat') %}
red
{% else %}
black
{% endif %}
entity: climate.heizung_dachflur
layout: vertical
picture: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
--icon-symbol-size: 50px;
top: 10px;
}
.: |
ha-card {
padding: 0px !important;
border: 1px solid white;
background: blue !important;
height: 83px !important;
zoom: 150%;
}
In general you don’t need to use zoom. You can control the size of the icon and font without zoom.
These control those two items.
--icon-symbol-size: 60px;
--card-primary-font-size: 20px;
Full Card code
type: custom:mushroom-template-card
primary: Heizung
icon: mdi:fan
icon_color: |
{% if is_state('climate.heizung_dachflur','heat') %}
red
{% else %}
black
{% endif %}
entity: climate.heizung_dachflur
layout: vertical
picture: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
--icon-symbol-size: 60px;
top:5px;
}
.: |
ha-card {
padding: 0px !important;
border: 1px solid white;
background: blue !important;
height: 83px !important;
--card-primary-font-size: 20px;
}
Many thanks!!!
And the Animation will be Planed, Like I did before?
I don’t know what you mean by Planed?
I missed this, do you still need assistance? .: | was indented too far…make sure it’s aligned with the m in mushroom.
Sorry,
I mean „Placed“
There should be no issues with animation. If you have a problem just post the code with a description and I’ll take a look. I’ve worked on so many cards, I sometimes need a reminder 
Heheh everything is good.
In my Post 335 there was an Animation also, nur in your corrected Code, this was Not Mentioned😊
I just implemented Again and it works:partying_face:
No worries, you are busy and don’t have to replay at all. You always so kind helping us. I will check this tonight. Just curios, how I can make lines, which is going down from fan light flicker? @LiQuid_cOOled , I don’t know how to show my appreciation to you and @Ildar_Gabdullin, because of you guys , I learn a lot( still learning) and have a really good dashboard.
I’ll should have a solution this evening.
1 Like
This should work for you
type: custom:stack-in-card
mode: vertical
card_mod:
style: |-
ha-card {
{% if states('light.living_fan') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.living_fan', 'on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
}
cards:
- type: custom:mushroom-fan-card
entity: fan.living_fan
name: ' '
show_percentage_control: true
show_oscillate_control: true
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:fan
icon_color: |
{{ '#00bcd4' if is_state(config.entity, 'on') else 'blue' }}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
animation:
{% set pwr = states(config.entity) %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set spd = 'rotation infinite linear' %}
{% if ( pwr == 'off') %} 0s {{spd}}
{% elif (perc <= 17 and pwr == 'on') %} 2.5s {{spd}}
{% elif (perc <= 34 and pwr == 'on') %} 2s {{spd}}
{% elif (perc <= 51 and pwr == 'on') %} 1.5s {{spd}}
{% elif (perc <= 67 and pwr == 'on') %} 1s {{spd}}
{% elif (perc <= 84 and pwr == 'on') %} .75s {{spd}}
{% elif (perc <= 100 and pwr == 'on') %} .5s {{spd}}
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);} }
ha-card {
border: none;
background: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
}
- type: custom:mushroom-light-card
entity: light.living_fan
name: ' '
icon: mdi:ceiling-fan-light
use_light_color: true
show_brightness_control: true
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state('light.living_fan', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(70% 0, 30% 0, 13% 15%, 0 40%, 0 72%, 30% 62%, 40% 72%, 60% 72%, 70% 63%, 100% 72%, 100% 40%, 87% 15%)};
}
1 Like
Hi, I’m a very beginner. Now I am facing this problem:
I would like to change only the primary text color depending on the state of a motion detector.
Where am I going wrong? What do I do wrong? What should I do differently?
Here is my current code:
- type: custom:mushroom-template-card
primary: Fürdő
secondary: |-
{{states('sensor.furdo_d952_temperature') | float | round(1)}} °C
{{states('sensor.furdo_d952_humidity') | float | round(1)}} %
icon: mdi:bathtub
multiline_secondary: true
icon_color: |-
{% if is_state('light.led_driver_furdoszoba','on') %}
orange
{% endif %}
{% if is_state('switch.wall_switch_mirror','on') %}
amber
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-kezelfelulet/furd
card_mod:
style: |
:host {
{% set sensor_dws_state =
states('binary_sensor.dws_furdoszoba_contact') %}
{% set sensor_zone_state =
states('binary_sensor.zone_furdo_abl_open') %}
{% if sensor_dws_state == 'on' and sensor_zone_state == 'on' %}
--ha-card-box-shadow: 0 0 10px red;
{% elif sensor_dws_state == 'off' and sensor_zone_state == 'off' %}
--ha-card-box-shadow: none;
{% elif sensor_dws_state == 'on' and sensor_zone_state == 'off' %}
--ha-card-box-shadow: 0 0 10px orange;
{% else %}
--ha-card-box-shadow: 0 0 10px grey;
{% endif %}
}
.: |
ha-card {
{% set state=states('binary_sensor.motion_sensor_furdoszoba_occupancy') %}
{% if state=='off' %}
--primary-text-color: red
{% else %}
--primary-text-color: none
{% endif %}
}