You need single quotes around {% if is_state('binary_sensor.group_watersensor', 'on') %}
Damn, it thought I tried that one. Copied youāre version and now it is working. Thanks!
P.s. I love frenchies. Still miss her.
1 Like
A missing bracket and I streamlined the If statement
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 15px 0px 55px 10px;
}
mushroom-shape-icon$: |
.shape {
margin-top: -40px;
}
.: |
ha-state-icon {
{% if is_state('input_boolean.ruimte5','on') %}
animation: blink 1s infinite, illumination 1s infinite ;{%- endif %}
}
@keyframes blink {
50% {opacity: 0;}
}
@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%); }
}
ha-card {
height: 108px !important;
{% if is_state('input_boolean.ruimte5','on') %}
background-color: rgb({{ states("input_text.kleur_iconen")}})
{%- else -%}
background: none;
{%- endif %}
}
2 Likes
Our first one was black/white like the right one.
Our second like the left one 
2 Likes
Cuteness overload
Is anyone else having problems with the alarm control card not showing the icon for āvacationā since the last version? Iāve already tried without success the procedure suggested here: GitHub - piitaya/lovelace-mushroom: Build a beautiful Home Assistant dashboard easily
Same here, the vacation icon is gone.
Just submitted a PR, it was a simple typo.
Iāve got my mobile dashboard exactly how I want itā¦almost. I like the ādark cockpitā concept. In other words, I want all my icons greyed out unless there is something active or not in the proper condition. The only card I have remaining to configure is the Security card.
Does anyone know of a way that I can make the security card grey when the system is disarmed?
Additonally, when you tap the card, I would like it to ONLY give the options for AWAY and HOME (not vacation, night, and the others).
Any ideas on how to better customize this card?
(let me know if there is a better forum for this question, thanks!)
is there a way to make the card act like a button ( visually). so maybe like a small pop (a littke smaller or bigger and then normal size) ?
you can do it like this. I donāt have a alarm card myself so I canāt test it. also I am not sure how many different states there areā¦ armed_home and disarmed ?
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.home_mode
states:
- armed_home
card_mod:
style: |
ha-state-icon {
{% set state = states('alarm_control_panel.home_mode') %}
{% if state == ('armed_home') %}
color: var(--blue-color) ;
(% else %)
color: var(--grey-color) ;
{% endif %}
}
if you needed another state change just add
{% elif state == ('armed_away') %}
color: var(--green-color) ;
edit:
just noticed you wanted 3 states
add this bellow entity
states:
- armed_home
- armed_away
Thank you, I will mess around with that a bit. I guess the real question becomes, how do I do the āpop upā that gives you the choices to arm AWAY, HOME, or DISARM. I tried playing with bubble cards, but I canāt get one that fits and looks like the rest of the mushroom cards. I know that I can create another āviewā page, but would rather it be a pop up in style. Sort of the the āmore infoā pop up it has now.
that I canāt help you with but thereās many talented people about that can answer that question.
To add to the above code you may want to experiment with the shape color aswell
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.home_mode
states:
- armed_home
- armed_away
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set state = states('alarm_control_panel.home_mode') %}
{% if state == ('armed_home') %}
--shape-color: lightblue !important;
{% elif state == ('armed_away') %}
--shape-color: lightgreen !important;
(% else %)
--shape-color: lightgrey !important; ;
{% endif %}
}
.: |
ha-state-icon {
{% set state = states('alarm_control_panel.home_mode') %}
{% if state == ('armed_home') %}
color: var(--blue-color) ;
{% elif state == ('armed_away') %}
color: var(--green-color) ;
(% else %)
color: var(--grey-color) ;
{% endif %}
}
- type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
entity: input_boolean.popup
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Weet je het zeker ?
icon: mdi:help
card_mod:
style: |
ha-card {
pointer-events: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Ja
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
- type: custom:mushroom-template-card
primary: Neen
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
How can I make my 2 cards (who act like a button) smaller ?
You need to define how small? For example, you can adjust the width by simply adding the code below. Going small may include adjusting the icon and card text too.
card_mod:
style: |
ha-card {
width: 200px;
}
Full Code
type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
entity: input_boolean.popup
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Weet je het zeker ?
icon: mdi:help
card_mod:
style: |
ha-card {
pointer-events: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Ja
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
- type: custom:mushroom-template-card
primary: Neen
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
card_mod:
style: |
ha-card {
width: 200px;
}
EDIT: I saw your cross post. My advice here is only going to apply to a portion of your dilemma
And does it work for height too ?
And how you place the card modā¦ Isnāt it making my original card 200 px and not the popup card ? ( Just guessing, not tested yet)
Yes, but donāt you want everything centered?
I want a lot 
Centered, specific height and width, around the card Blurred ( that is ok) and when pressed yes it has to run a script ( that is ok) , and closes the popup. When entered Neen, it just closes the popupā¦
So a lot that is not working yetā¦ I thought it was easier 
Are there any washing machine cards like this available to use?
https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_haven_washer/