Depends on what you are putting in the body of the card. The post only showed a pic in the left top corner
It’s probably some minor mistake, but I can’t figure it out without our EXPERTS LiQuid and Dmitri. My fan light not animated when I turn light on
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;
}
layout: null
- 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
layout: null
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(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
Thank you
No, that was a question about this code
type: custom:mushroom-template-card
entity: fan.ventilation_pwm_fan1
tap_action:
action: toggle
icon: mdi:fan
icon_color: |
{{ 'blue' if is_state(config.entity, 'on') else 'grey' }}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
{% set pwr = states(config.entity) %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% if (perc <= 17 and pwr == 'on') %} animation: rotation 2.5s linear infinite
{% elif (perc <= 34 and pwr == 'on') %} animation: rotation 2s linear infinite
{% elif (perc <= 51 and pwr == 'on') %} animation: rotation 1.5s linear infinite
{% elif (perc <= 67 and pwr == 'on') %} animation: rotation 1s linear infinite
{% elif (perc <= 84 and pwr == 'on') %} animation: rotation .75s linear infinite
{% elif (perc <= 100 and pwr == 'on') %} animation: rotation .5s linear infinite
{%- else %} animation: rotation 0s linear infinite
{% endif %};
}
ha-card {
background: none;
box-shadow: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
#width: 75%;
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);
}
Hey
Can someone help, to Card mod an Image instead of an Icon?
I Want that the picture is near the middle and Not as Here shown on top?
Do Not know how…
Hope someone can help here 
Thank you!
Please post your code using the community standards. See #11
Sorry!!!
type: custom:mushroom-template-card
primary: Terrasse 2
secondary: ''
icon: ''
entity: switch.terrasse_2_sockel_1
picture: |-
{% if is_state(entity, 'on') %}
/local/my_icons/IMG_4867.png
{% else %}
/local/my_icons/IMG_4866.png
{% endif %}
fill_container: true
multiline_secondary: false
layout: vertical
card_mod:
style: |
ha-card {
padding: 0px !important;
--ha-card-border-width: 1px !important;
--ha-card-border-color: white !important;
zoom: 180% !important;
background: transparent;
height: 70px !important;
}
still not right. Use the back tick vs quotes
Oh no, I Changed it😊
Try this
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
margin: -10px;
.: |
ha-card {
padding: 0px !important;
border: 1px solid white;
background: transparent;
height: 100px !important;
}
I consolidated your border code. You’ll nee to make other tweaks, but it should point you in the right direction.
Thank you😊
I used your Code and it Seems to be that nothing changed…
Looks originally😔
I know it’s working because I can do this…
type: custom:mushroom-template-card
primary: Terrasse 2
entity: switch.kitchen_lights
picture: |
/local/pics/space.png
fill_container: true
multiline_secondary: false
layout: vertical
secondary: ''
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
margin:50px;
.: |
ha-card {
padding: 0px !important;
border: 1px solid white;
background: transparent;
height: 100px !important;
}
I can move it under too
type: custom:mushroom-template-card
primary: Terrasse 2
entity: switch.kitchen_lights
picture: |
/local/pics/space.png
fill_container: true
multiline_secondary: false
layout: vertical
secondary: ''
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
margin:-80px;
.: |
ha-card {
padding: 0px !important;
border: 1px solid white;
background: transparent;
height: 120px !important;
}
Hm,
Maybe it is Not Working with the „Zoom:“
I Need to make the picture higher, because it is too small…
So this is why I Need to use the „Zoom“ also…
Any idea how to implement it in your Perfect Code?
It can work with Zoom. Can you create a pic of what you’d like it to look like?
type: custom:mushroom-template-card
primary: Terrasse 2
entity: switch.kitchen_lights
picture: |
/local/pics/space.png
fill_container: true
multiline_secondary: false
layout: vertical
secondary: ''
card_mod:
style:
mushroom-shape-avatar$: |
.container {
margin-top: 20px;
}
mushroom-state-info$: |
.container {
--card-primary-color: blue;
margin-top: -10px;
.: |
ha-card {
padding: 0px !important;
border: 1px solid white;
background: transparent;
zoom: 180% !important;
height: 100px !important;
}
Perfect code???
Des, I think your code is Perfect😊
Ah ok with Avatar, I can change the Position in the picture.
With state_info, I can change the Position of the Text,
Very Nice!!!
I do have a Maximum „high“ of 83px, so O’Neill try this Code😊
Mans thanks!
1 Like
May bee helpful to move the zoom off the entire card
type: custom:mushroom-template-card
primary: Terrasse 2
entity: switch.kitchen_lights
picture: |
/local/pics/yt.png
fill_container: true
multiline_secondary: false
layout: vertical
secondary: ''
card_mod:
style:
mushroom-shape-avatar$: |
.container {
margin-top: 10px;
zoom: 120% !important;
}
mushroom-state-info$: |
.container {
--card-primary-color: red;
margin-top: -10px;
zoom: 80% !important;
.: |
ha-card {
padding: 0px !important;
border: 1px solid white;
background: transparent;
height: 83px !important;
}
Perfect man!
Think you very much.
With transponiert in the Avatar Code, it Looks Perfect for me
🫶🏽
Left you See befor and on the Right you can See it with your Code 🫶🏽
1 Like
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.
