probably not, I try…
that makes the card work as a button, thanks. But the alignment is not the same anymore
##########
# Ruimte 1#
##########
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: switch_ruimte1_verlichting
primary: '{{ states(''input_text.ruimte_1'')}}'
icon: mdi:lightbulb
icon_color: >
{% if is_state("switch_ruimte1_verlichting", 'on') %}
138,153,119
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 55px;
}
######
# Ruimte2
#######
- type: custom:mushroom-template-card
primary: '{{ states(''input_text.ruimte_2'')}}'
icon: mdi:lightbulb
entity: switch_ruimte2_verlichting
tap_action:
action: toggle
icon_color: >
{% if is_state("switch_ruimte2_verlichting", 'on') %}
138,153,119
{% else %}
disabled
{% endif %}
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
padding-bottom: 55px !important ;
}
mushroom-state-info$: |
.container {
margin: -50px;
}
.primary {
padding: 0px;
}
Adjust the alignment
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 55px 0px 55px 10px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: switch_ruimte1_verlichting
primary: '{{ states(''input_text.ruimte_1'')}}'
icon: mdi:lightbulb
icon_color: >
{% if is_state("switch_ruimte1_verlichting", 'on') %}
{{ states("input_text.test_kleur_icoon_bij_aan")}}
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 55px 0px 55px 10px;
}
gives me same result
yes I get the same, but I want it lie “Gert-Jan”, because in another screen it is like that… 
I just have to play with the padding to get the text ok, but what with the icon ?
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin-top: -40px;
}
mushroom-state-info$: |
.container {
margin-top: -40px;
}
.primary {
padding: 55px 0px 55px 10px;
}
Not All Heroes Wear Capes
- type: custom:mushroom-template-card
primary: '{{ states(''input_text.ruimte_2'')}}'
icon_color: >
{% if is_state("switch_ruimte1_verlichting", 'on') %}
{{ states("input_text.test_kleur_icoon_bij_aan")}}
{% else %}
{{ states("input_text.test_kleur_icoon_bij_aan")}}
{% endif %}
just trying ( i know it’s 2 times the same result)…
this gives me
why doesn’t the icon get coloured ?
type: custom:mushroom-template-card
primary: |
{{ states(''input_text.test'')}}
icon: mdi:label
icon_color: |
{% if is_state('switch.kitchen_lights', 'on') %}
{{ states('input_text.test')}}
{% else %}
{{ states('input_text.test')}}
{% endif %}
I get positive results…
1 Like
weird…
I’ll try again
Nice looking card! Would you mind sharing the code for this ?
3 more questions
- How do I make the template card al little bigger ( higher) ?
edit :
card_mod:
style:
ha-card {
height: 110px !important;
}
- what do I have to add to card_mod to change the color of the card when the state is on ? Now I only change the icon color, but it would be nice to have the whole button
edit: add this
.: |
ha-card {
{% if is_state('climate.eetplaats','off') %}
background-color: rgb({{ states("input_text.kleur_iconen")}})
{%- else -%}
background: none;
{%- endif %}
}
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily-part-2/693055/134?u=faecon
3. is it possible to get the button “animated” ? when pressed it goes a little smaller , release is original …
Hello!
I hope someone could help me.
I can’t get the icon animation to work.
view_layout:
grid-area: chips
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.washing_machine
primary: null
secondary: |-
{% if states(entity) == 'on' %}
{{ states(entity) | round(0) }} W
{% else %}
Off
{% endif %}
icon: mdi:washing-machine
icon_color: cyan
content_info: none
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); }
}
ha-card {
--chip-height: 55px;
width: var(--chip-height) !important;
border-radius: 50% !important;
background-size: cover;
- type: template
entity: binary_sensor.droger
secondary: |-
{% if states(entity) == 'on' %}
{{ states(entity) | round(0) }} W
{% else %}
Off
{% endif %}
icon: mdi:tumble-dryer
icon_color: '{{ ''orange'' if states(entity) == ''on'' else ''#8000ff'' }}'
content_info: none
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); }
}
ha-card {
--chip-height: 55px;
width: var(--chip-height) !important;
border-radius: 50% !important;
background-size: cover;
- type: template
entity: sensor.imap_debbiekevin_familiegeboers_nl
icon: mdi:mailbox
icon_color: '{{ ''orange'' if states(entity) == ''on'' else ''#ff0080'' }}'
content_info: none
card_mod:
style: |
ha-card {
--chip-height: 55px;
width: var(--chip-height) !important;
border-radius: 50% !important;
background-size: cover;
- type: template
entity: light.group_woonkamer_verlichting
icon: mdi:sofa
icon_color: '{{ ''orange'' if states(entity) == ''on'' else ''#2ee6e6'' }}'
content_info: none
card_mod:
style: |
ha-card {
--chip-height: 55px;
width: var(--chip-height) !important;
border-radius: 50% !important;
background-size: cover;
- type: template
entity: light.group_tuin_verlichting
icon: mdi:flower
icon_color: '{{ ''orange'' if states(entity) == ''on'' else ''green'' }}'
content_info: none
card_mod:
style: |
ha-card {
--chip-height: 55px;
width: var(--chip-height) !important;
border-radius: 50% !important;
background-size: cover;
- type: template
entity: binary_sensor.group_watersensor
icon: mdi:water
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''#0000ff'' }}'
content_info: none
card_mod:
style: |
ha-card {
--chip-height: 55px;
width: var(--chip-height) !important;
border-radius: 50% !important;
background-size: cover;
}
Card mod installed ?
Yup. Card mod is installed.
Need help with the sprinkler animation. Pretty simple, I would like a grey non animated sprinkler when it’s off, and the animated one when it’s on. This is what I have so far:
type: custom:mushroom-template-card
entity: switch.rain_bird
primary: Rain Bird
secondary: |-
{% if is_state ('switch.rain_bird', 'off') %}
Off
{% else %}
On
{% endif %}
icon: |-
{% if is_state ('switch.rain_bird', 'off') %}
mdi:sprinkler
{% else %}
mdi:sprinkler
{% endif %}
icon_color: |-
{% if is_state ('switch.rain_bird', 'off') %}
grey
{% else %}
blue
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$:
ha-icon {
--icon-animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
Your animation code needed updated.
type: custom:mushroom-template-card
entity: switch.rain_bird
primary: Rain Bird
secondary: |-
{% if is_state ('switch.rain_bird', 'off') %}
Off
{% else %}
On
{% endif %}
icon: |-
{% if is_state ('switch.rain_bird', 'off') %}
mdi:sprinkler
{% else %}
mdi:sprinkler
{% endif %}
icon_color: |-
{% if is_state ('switch.rain_bird', 'off') %}
grey
{% else %}
blue
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%; {% endif %}
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
No need to template if the icon isn’t changing icon: mdi:sprinkler
icon: |-
{% if is_state ('switch.rain_bird', 'off') %}
mdi:sprinkler
{% else %}
mdi:sprinkler
{% endif %}
Now I adde the ha-card and all of the mushroom code does not work anymore…
card_mod:
style: |
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 15px 0px 55px 10px;
}
mushroom-shape-icon$: |
.shape {
margin-top: -40px;
}
ha-card {
height: 108px !important;
}
what I added was a “|” because I get a multiline error. probably something with that ?