It looks a lot better but is not perfect. It shows a shadow on the right side now where the bottom card doesnāt. Maybe a padding issue.
Try and post your yaml. Do you have 2 cards in a stack that both swipe by any chance?
EDIT: Actually send me a message instead. This has nothing to do with mushroom so lets take it off the thread.
1 Like
Can you share the code for the first 2? Pretty useful overview 
3 Likes
Hi
You must have at least two cards. The first is a simple card with a tap_action which will call the service:
type: custom:mushroom-template-card
secondary: ''
icon: mdi:home
layout: vertical
icon_color: green
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- home: toggle
in this example I named the map āhomeā but you can name it whatever you want.
then the second map is defined like this:
type: custom:local-conditional-card
default: hide
id: home
card:
type: vertical-stack
title: Lampes
cards:
- square: false
type: grid
cards:
- type: custom:mushroom-template-card
layout: vertical
primary: Led
secondary_info: none
entity: switch.lampe_led
icon: mdi:wall-sconce-round-variant
icon_color: |-
{% if is_state('switch.lampe_led', 'on') %}
black
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
background-color: rgba(147,112,219, 1);
{% else %}
background-color: rgba(var(--rgb-card-background-color));
{% endif %}
}
you have to define the id of the card with the same name as the one above (in this example āhomeā) and then you put the card you want
1 Like
Hi, i have added a card with the code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
primary: Trash
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
clip-path: inset(26% 0 0 0);
}
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: lid 1s ease infinite;
clip-path: inset(0 0 75% 0);
transform-origin: 50% 25%;
}
@keyframes lid {
0%, 50%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-5px) rotate(-37deg); }
20% { transform: translateY(-5px) rotate(31deg); }
30% { transform: translateY(-5px) rotate(-25deg); }
40% { transform: translateY(-5px) rotate(19deg); }
60% { transform: translateY(-3px); }
}
.shape {
--shape-color: none;
top: 0.3px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
but the result is without animation
what am I wrong?
Check the updated animations.
the way that animations are applied has changed.
2 Likes
Hey everyone, I recently set up the Mushroom theme and I really like it, but thereās one issue Iāve noticed and wondering if anyone has this same issue?
When using the mushroom light control slider, when I am controlling a single light such as a lamp, the slider is smooth and acts as I would expect.
When I have a group of lights and an adjusting the brightness slider, it jumps around for about a second after I make the change. I believe itās updating all of the lights in the group and is a bit delayed in updating the brightness slider in the UI to reflect all of the lights updating. Does this make sense?
So for example I will update a light group with the slider from 100% to 25%, when I release the slider it will jump from 100 to 25 back to 100 and then settle on 25. The lights themselves dim as expected but itās hard to get it to move to the correct setting as it will jump around in the UI a couple times before going to the correct setting. Anyone else seen this?
Edit: just realized itās not only with mushroom. Seems to be some sort of issue with Philips hue lights that was supposedly fixed a while ago but doesnāt seem to be working for me. Iāll look into it more elsewhere
1 Like
Good morning everyone, I created this pop-up menu to navigate between the tabs of the various pages. I followed @Guizmos advice to use local-conditional-card but now I have to solve this problem with CSS.
Now, however, I have to make sure that when I tap on the icon, both the tab changes and the selected room is also highlighted in the pop-up menu. The problem is that the tap_action supports only one function and I wasnāt able to do it using a script.
type: custom:local-conditional-card
default: hide
id: prova
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Home
secondary: ''
icon: mdi:home
icon_color: white
fill_container: false
layout: vertical
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- rooms: toggle
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Home') else 'none' }}), 0.4) !important;
}
- type: custom:mushroom-template-card
primary: Cucina
secondary: ''
icon: mdi:fridge
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Cucina
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Cucina') else 'none' }}), 0.4) !important;
}
- type: custom:mushroom-template-card
primary: Salotto
secondary: ''
icon: mdi:sofa
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Salotto
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Salotto') else 'none' }}), 0.4) !important;
}
card_mod:
style: |
ha-card {
position: fixed !important;
top: auto;
bottom: 75px;
left: 15px;
right: 0;
animation: slide-up 0.5s;
z-index: 5 !important;
width: 210px;
height: 400px !important;
padding: 0px;
overflow-y: hidden;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
}
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
persist_state: false
I used to use an input_select but now I have to change everything.
5 Likes
Nice!
Do you know if itās possible to adjust the slide with intervals (0% / 20% / 40% etcā¦ ) ?
could someone help me a garage door animation, I would like it to to animate from closed state to open open state whilst the door is opening, stay open whilst the door is open, then reverse the animate when it closing.
Hey, this is the best you can do if you do it in an easy way.
it will run the animation once when the state is changed. and it will then stay open if the cover entity is opened. and stay closed if the cover entity is closed.
however, the big downside is that the animation also runs on any page refresh. not much you can do about that unfortunately. another smaller downside is that the close only starts when the door is triggered as closed. not when it first starts closing.
you could make it better if you have a garage door that tells you exact position of it rather than just open close, but that is quite rare.
type: custom:mushroom-template-card
primary: Double Garage
icon: mdi:garage-variant
entity: cover.office_blinds
icon_color: amber
card_mod:
style: |
ha-state-icon {
{% if states(config.entity) == 'open' %}
clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0);
animation: open 3s;
{% else %}
clip-path: inset(0 0 0 0);
animation: close 3s;
{% endif %}
}
@keyframes open {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
}
@keyframes close {
0% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: inset(0 0 0 0); }
}
2 Likes
You can kinda do it like this with the background. but that is about it.
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-slider {
--gradient: -webkit-linear-gradient(left, rgba(var(--rgb-green), 0.2) 20%, black 20.4%, rgba(var(--rgb-green), 0.2) 20.5%, rgba(var(--rgb-green), 0.2) 40%, black 40.4%, rgba(var(--rgb-green), 0.2) 40.5%, rgba(var(--rgb-green), 0.2) 60%, black 60.3%, rgba(var(--rgb-green), 0.2) 60.5%, rgba(var(--rgb-green), 0.2) 80%, black 80.4%, rgba(var(--rgb-green), 0.2) 80.5%, rgba(var(--rgb-green), 0.2) 100%) !important;
}
But this is just visual. no guarantee that the numbers will stick to it of course.
1 Like
hello i have a couple of questions that i hope @piitaya can respond to
- is it possible to use template in the color option of the select card? it would be usefull to glance at the selected item quickly
- in the media card i wuold love to link a script to holding the volume button so i would be able to rise the volume by step (+5 or -5 for example) is it possible?
thanks in advance for the response
I can answer for you how it currently works.
- No you cant. but if you use card_mod you could do templating like this:
type: custom:mushroom-select-card
entity: input_select.speaker_group_dropdown
icon_color: white
card_mod:
style: |
mushroom-shape-icon {
{% if states(config.entity) == 'Downstairs Speakers' %}
--icon-color: rgba(var(--rgb-red), 1) !important;
--shape-color: rgba(var(--rgb-red), 0.2) !important;
{% elif states(config.entity) == 'Upstairs Speakers' %}
--icon-color: rgba(var(--rgb-green), 1) !important;
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% elif states(config.entity) == 'Home' %}
--icon-color: rgba(var(--rgb-blue), 1) !important;
--shape-color: rgba(var(--rgb-blue), 0.2) !important;
{% endif %}
- Very confident that this is not currently possible. couldnt tell you whether this is something that might come at some point. who knows.
Hi,
I created a temperature card with a custom mushroom card. There is something going wrongā¦ The temperature of āWoonkamerā (orange) is almost equal to temperature āHalā (green), but in the graphic āWoonkamerā is almost the same as āSlaapkamerā, which is almost 4 degrees lower.
Do some of you guys know why this is happening?
Code:
type: custom:vertical-stack-in-card
cards:
- square: false
type: grid
columns: 3
cards:
- type: custom:mushroom-entity-card
entity: sensor.sensor_temperatuur_woonkamer_tuya_temperature
primary_info: name
secondary_info: state
name: Woonkamer
icon_color: orange
icon: ''
fill_container: true
icon_type: none
justify_text: center
style: |
ha-card {
--secondary-text-color: rgb(241, 157, 56);
position: relative;
left: 5%;
top: 4%;
font-size: 18px;
margin-top: 0px;
}
- type: custom:mushroom-entity-card
entity: sensor.hue_motion_sensor_1_temperature
primary_info: name
secondary_info: state
name: Slaapkamer
icon_color: blue
icon_type: none
justify_text: center
style: |
ha-card {
--secondary-text-color: rgb(73, 148, 236);
position: relative;
left: 11%;
top: 4%;
font-size: 18px;
margin-top: 0px;
- type: custom:mushroom-entity-card
entity: sensor.hal_bewegingssensor_groene_deur_temperature
primary_info: name
secondary_info: state
name: Hal
icon_color: green
icon: mdi:thermometer
icon_type: none
justify_text: center
style: |
ha-card {
--secondary-text-color: rgb(103, 173, 91);
position: relative;
left: 22%;
top: 4%;
font-size: 18px;
margin-top: 0px;
- type: custom:mini-graph-card
entities:
- entity: sensor.sensor_temperatuur_woonkamer_tuya_temperature
name: Temperatuur
color: var(--orange-color)
- entity: sensor.hue_motion_sensor_1_temperature
name: Temperatuur
color: var(--blue-color)
y_axis: secondary
- entity: sensor.hal_bewegingssensor_groene_deur_temperature
name: Temperatuur
color: var(--green-color)
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Try more points per hour on the mini-graph-card:
color: var(--green-color)
y_axis: secondary
hours_to_show: 24
points_per_hour: 30
line_width: 3
font_size: 50
1 Like
Unfortunately this will not help. Yesterday I changed the temperature Woonkamer to 60 degrees in the developer tools setting, to test the sensor. Maybe that can be the problem? It looks like after setting it to 60 for the test the line is completely flat?
Yes this is definetly the problem.
Yes that looks like a 60 degree spike that changes the scale of the probe.
Try lower_bound and upper_bound to define the scale exactly.