more-info is correct not more_info That is your issue
not really. I would like to seperate the tap_action between card & Icon.
If i tap the icon turn the light on/off (toogle), but if I tap on the card show me more information like brightness and color-controll.
Oh, Thatās a lot clearer. Let me see what I can do. We can just merge two cards into one with template cards. Iāll put together an example.
Try this outā¦
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 3fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
teal
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: -30px;
top: 10px;
}
1 Like
So fast a working solution?! Very nice. Thanks.
A little problem is now, that i canāt have two cards next to each other:
First row is standard, second is your code.
Layout-card is a good option. I will try with this a litte 
We can make it fit. Iāll adjust and post the code. I alsakso need to adjust for your colors
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
this works, but can I make it easier?
I use a horizontal-stack to make it a little more lookalike to my view. Now I have only to adjust the hight of this āstackā and maybe make the right tap part a little bigger.
looks nice
The adjustment of brackground color is only to make it ātransparentā All other comes from ios-Theme iām using
edit:
another simple thing I need for an other entity: How can I remove the Background / circle of the Icon?
is it possible to change the picture used in the template card based on the user that is logged in (using the ha-app)?
something like:
picture:
{% if user1 %}
picure_user1
{% elif user2 %}
picture_user2
{% endif}
guess itĀ“s possible, i just donĀ“t know how to set the if to the user
not sure on the statement but you can use {{user}}
i know about the {{user}} but canĀ“t get it workingā¦
guess it looks something like this:
{% if {{user}} == 'user1' %}
picure_user1
{% elif {{user}} == 'user2' %}
picture_user2
{% endif}
Jsut want to try bumping this once. Never thought I would struggle so bad to get an icon to turn white lol
this works for me icon colour depending on whoās logged in
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: ''
icon: mdi:home
icon_color: |-
{% set state = user %}
{% if state == 'Simon Benson' %} green
{% elif state == 'Hollie Benson' %} red
{% else %} grey
{% endif %}
1 Like
this does the icon
card_mod:
style: |
ha-state-icon {
color: white;
}
this will do the shape
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: white !important;
}
1 Like
I am trying to add animations to mushroom chip cards, but I cannot get card_mod to work with animations. I have confirmed that card_mod works for other cards I have just not Mushroom Cards.
Any help is appreciated.
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.office
content: Office
icon: mdi:lightbulb
- type: template
- type: template
card_mod:
style: |
ha-card {
color: red;
}
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); }
}
mushroom-template-chip:nth-child(3)$: |
ha-icon {
{{ 'animation: boing 3s linear infinite; transform-origin: 50% 90%;'}}
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
mushroom-template-chip:nth-child(2)$: |
ha-icon {
{{ 'animation: rotation 0.75s linear infinite;' if is_state('light.office', 'on') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
can you try this
type: custom:mushroom-chips-card
chips:
- type: template
content: Test
icon: mdi:home-account
icon_color: blue
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
@Raven999 There was a change from ha-icon to ha-state-icon a while back.
@Frosty code reflects that change. Some older guides have not been updated.
This should work for youā¦
I added
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
Full card
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
1 Like
I tryed it with background: transparent, but it didnāt work.
I cant understand why it is sometimes a ānoneā and sometimes a ātransparentā, but let it be a mystery. Thanks a lot for your nice help.
It is possible to regulate the height of the complete card? or have I to do all other Buttons like this one to make it looking simular?
You can control the height. I am not sure what height the other cards are, but just adjust the 80px height in two spots.
card_mod:
style: |
ha-card {
height:80px;
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.kueche_lightstripe
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
card_mod:
style: |
ha-card {
height: 80px;
}
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 0.2fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
color_type: icon
color: var(--button-card-light-color)
entity: light.pc_lights
icon: mdi:lightbulb-on
icon_color: |-
{% if is_state(config.entity,'on') %}
{{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
.: |
ha-card {
border: none;
background: transparent !important;
}
- type: custom:mushroom-template-card
primary: LED-Stripe
tap_action:
action: more-info
entity: light.kueche_lightstripe
card_mod:
style: |
ha-card {
border: none;
left: 0px;
top: 10px;
background: transparent !important;
}
card_mod:
style: |
ha-card {
height: 80px;
}
background: transparent !important; works too. It was probably missing the !important
1 Like
Damn. Thats easy. I bet I had used more backspaces in the section for the height, so that doesnāt worked, but not everything is okay.
I will play with the px, its more like 60/65 or something. and than I will adjust the position of the icon and the text and than Iām happy