Perfect! Whatās the dot syntax here ?
1 Like
Back up to root
When taking the code, changing till light entity to one that I have, the card fail to load as expectedā¦
Do I need to change something in some theming code to make it work, maybe?
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.vardagsrum_golvlampa_tv_soffa_light
layout: vertical
name: k
card_mod:
style: |
mushroom-state-info {
text-align: start;
width: fit-content;
}
ha-card {
width: 100px;
}
- type: custom:my-slider-v2
entity: light.vardagsrum_golvlampa_tv_soffa_light
vertical: true
styles:
card:
- height: 147px
- width: 42px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
margin-left: auto;
}
card_mod:
style: |
ha-card {
height: 171px;
}
Hi,
Some of the cards iāve seen here are brilliant. Iām really stuck trying to alter the icon on the mushroom climate card based on if there is a demand for heat. Iāve also tried to get this working in a template card also, but im missing something.
Facts:
The Mushroom climate card works as expected normally, with the heat and off functions working
. I also got it to flash at all times.
type: custom:mushroom-climate-card
entity: climate.trv_2
icon: mdi:radiator
layout: horizontal
hvac_modes:
- heat
- 'off'
show_temperature_control: true
collapsible_controls: true
tap_action:
action: none
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style: |
{% set state=states('climate.trv_2') %}
{% if state == 'heat' %}
mushroom-shape-icon {
animation: blink 3s ease-in infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
I have card-mod installed
I have a TRV (actually 20 in total, but focusing on one to get the code working).
The TRV entity is climate.trv_2 and also exposes a temperature sensor - sensor.trv_2_air_temperature
These are the states reported:
hvac_modes:
- 'off'
- heat
min_temp: 8
max_temp: 28
preset_modes:
- none
- Energy heat
- Full power
current_temperature: 21.9
temperature: 17.5
preset_mode: none
friendly_name: TRV 2 - Kitchen Hall
Generally in normal use the TRV will be in preset mode -none
If you press the boost button, it will be in Full Power for 15 minutes and then revert back to none (Energy Heat is like an eco mode and not important at this point)
Iāve tried all sorts and been through many posts here and tried snippets of code.
I ultimately would like the icon to change colour or flash if the ātemperatureā (setpoint) is less than ācurrent_temperatureā - so that I can see at a glance that the room is demanding heat.
I cant get the states to even reflect properly and change the icon based on if the TRV is set to heat or off.
Although I can in a template card - although the icon doesnt change colour in this example still, but the icon does change on and off
type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: TRV_2
secondary: ''
icon: |-
{% set mode = states('climate.trv_2') %}
{% if mode == 'none' %}
mdi:radiator-off
{% elif mode == 'heat' %}
mdi:radiator
{% else %}
mdi:radiator-disabled
{% endif %}
icon_color: |-
{% set status = state_attr('climate.trv2','hvac_modes') %}
{% if status == 'heat' %}
red
{% else %}
grey
{% endif %}
I really dont know why (but this is not my specialty!)
What iām trying to accomplish is the mushroom climate card working as normal,
but the icon changing from āradiator-offā to āradiatorā when the TRV is in heat mode, and
it changing colour (flashing ideally) when the ātemperatureā (setpoint) is less than 'current_temperature, to indicate the room is demanding heat
Could anyone please make my day and help me accomplish what i thought was going to be something simple? 
Thanks in advance!
Ok, so I had another theme applied, and that made the slider look funny
How do I add script ā last changed (last time the script was called) to a template card secondary information?
Thanks
Iām having the same problems you experienced but Iām on the correct theme i believe. Can you elaborate what you had to do to fix it?
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-light-card
entity: light.br_desk_lightbulb
layout: vertical
card_mod:
style: |
mushroom-state-info {
text-align: start;
width: fit-content;
}
ha-card {
width: 66px;
}
- type: custom:my-slider-v2
entity: light.br_desk_lightbulb
vertical: true
styles:
card:
- height: 147px
- width: 42px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
margin-left: auto;
}
card_mod:
style: |
ha-card {
height: 171px;
}
In this file;
I replaced everything with this;
Mushroom:
# HA variables
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-radius: 12px
# Mushroom layout
mush-spacing: 12px
# Title
mush-title-padding: 24px 12px 16px
mush-title-spacing: 12px
mush-title-font-size: 24px
mush-title-font-weight: normal
mush-title-line-height: 1.2
# Subtitle
mush-subtitle-font-size: 16px
mush-subtitle-font-weight: normal
mush-subtitle-line-height: 1.2
# Card
mush-card-primary-font-size: 14px
mush-card-secondary-font-size: 12px
mush-card-primary-font-weight: bold
mush-card-secondary-font-weight: bolder
mush-card-primary-line-height: 1.5
mush-card-secondary-line-height: 1.5
# Chip
mush-chip-spacing: 8px
mush-chip-padding: 0 0.25em
mush-chip-height: 36px
mush-chip-border-radius: 18px
mush-chip-font-size: 0.3em
mush-chip-font-weight: bold
mush-chip-icon-size: 0.5em
mush-chip-avatar-padding: 0.1em
mush-chip-avatar-border-radius: 50%
mush-chip-box-shadow: var(--ha-card-box-shadow)
mush-chip-background: var(--ha-card-background)
# Control
mush-control-border-radius: 12px
mush-control-height: 42px
mush-control-button-ratio: 1
mush-control-icon-size: 0.5em
# Slider
mush-slider-threshold: 10
# Badge
mush-badge-size: 16px
mush-badge-icon-size: 0.75em
mush-badge-border-radius: 50%
# Icon
mush-icon-border-radius: 50%
mush-icon-size: 42px
mush-icon-symbol-size: 0.5em
# Colors
mush-rgb-red: 244, 67, 54
mush-rgb-pink: 233, 30, 99
mush-rgb-purple: 156, 39, 176
mush-rgb-deep-purple: 103, 58, 183
mush-rgb-indigo: 63, 81, 181
mush-rgb-blue: 33, 150, 243
mush-rgb-light-blue: 3, 169, 244
mush-rgb-cyan: 0, 188, 212
mush-rgb-teal: 0, 150, 136
mush-rgb-green: 76, 175, 80
mush-rgb-light-green: 139, 195, 74
mush-rgb-lime: 205, 220, 57
mush-rgb-yellow: 255, 235, 59
mush-rgb-amber: 255, 193, 7
mush-rgb-orange: 255, 152, 0
mush-rgb-deep-orange: 255, 87, 34
mush-rgb-brown: 121, 85, 72
mush-rgb-grey: 158, 158, 158
mush-rgb-blue-grey: 96, 125, 139
mush-rgb-black: 0, 0, 0
mush-rgb-white: 255, 255, 255
mush-rgb-info: var(--mush-rgb-blue)
mush-rgb-success: var(--mush-rgb-green)
mush-rgb-warning: var(--mush-rgb-orange)
mush-rgb-danger: var(--mush-rgb-red)
mush-rgb-state-fan: var(--mush-rgb-green)
mush-rgb-state-light: var(--mush-rgb-orange)
mush-rgb-state-entity: var(--mush-rgb-blue)
mush-rgb-state-switch: var(--mush-rgb-blue)
mush-rgb-state-alarm-disarmed: var(--mush-rgb-info)
mush-rgb-state-alarm-armed: var(--mush-rgb-success)
mush-rgb-state-alarm-triggered: var(--mush-rgb-danger)
mush-rgb-state-person-home: var(--mush-rgb-success)
mush-rgb-state-person-not-home: var(--mush-rgb-danger)
mush-rgb-state-person-zone: var(--mush-rgb-info)
mush-rgb-state-person-unknown: var(--mush-rgb-grey)
mush-rgb-state-cover-open: var(--mush-rgb-blue)
mush-rgb-state-cover-closed: var(--mush-rgb-disabled)
mush-rgb-state-climate-auto: var(--mush-rgb-green);
mush-rgb-state-climate-cool: var(--mush-rgb-blue);
mush-rgb-state-climate-dry: var(--mush-rgb-orange);
mush-rgb-state-climate-fan-only: var(--mush-rgb-blue-grey);
mush-rgb-state-climate-heat: var(--mush-rgb-deep-orange);
mush-rgb-state-climate-heat-cool: var(--mush-rgb-green);
mush-rgb-state-climate-idle: var(--mush-rgb-grey);
mush-rgb-state-climate-off: var(--mush-rgb-disabled);
# You must keep this to support light/dark theme
modes:
light:
mush-rgb-disabled: 189, 189, 189
dark:
mush-rgb-disabled: 111, 111, 111
Then I selected the Mushrrom theme
1 Like
Follow-up Idea for this post:
@rhysb Do you think itās possibile to combine the my-slider-card-v2 + the mushroom light card and maybe the card-mod to put the slider on the right side?
Proposed design:
I did some playing around with all the my-slider-card-v2 and everytime I try it I run into the same problem that I canāt place the my-slider-card-v2 within the mushroom entity card. If i could figure that peice of the puzzle out I think it could flow easily.
Test code:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-light-card
entity: light.lr_light_group
name: All Living Room Lights
show_brightness_control: true
use_light_color: true
show_color_control: true
layout: vertical
card_mod:
style: |
mushroom-state-info {
text-align: start;
width: fit-content;
}
ha-card {
width: 66px;
}
- type: custom:my-slider-v2
entity: light.lr_light_group
vertical: true
styles:
card:
- height: 147px
- width: 42px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
margin-left: auto;
}
card_mod:
style: |
ha-card {
height: 171px;
}
Other test code:
Notes on this code:
- conditional card that shows only if the light isnāt unavailable
- within that is a grid that shows the light + switch group for group control
- within each group is the pop-up-card that shows all the individual entities for individual control
Goal in mind: On mobile, the slider is too small to dial in desired amounts and if I can move the slider like in my proposed design, hopefully Itāll display better on mobile and enable finer detailed controls while maintaining individual control as well via popup. Best of both worlds I guess.
square: false
columns: 2
type: grid
cards:
- type: conditional
conditions:
- entity: light.lr_light_group
state_not: unavailable
card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 42px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-light-card
entity: light.lr_light_group
name: 'All Living Room Lights '
show_brightness_control: true
use_light_color: true
show_color_control: true
show_color_temp_control: true
icon: mdi:sofa-outline
layout: vertical
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: All Living Room Lights
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.lr_couch_lightbulb
name: 'Couch Lightbulb '
show_brightness_control: true
use_light_color: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
icon: mdi:sofa
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding: 8px 24px !important;
}
- type: custom:mushroom-light-card
entity: light.lr_porch_lightbulb
name: Porch Lightbulb
show_brightness_control: true
use_light_color: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
icon: mdi:outdoor-lamp
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding: 8px 24px !important;
}
- type: custom:mushroom-light-card
entity: light.lr_small_couch_lightbulb
name: 'Small Couch Lightbulb '
show_brightness_control: true
use_light_color: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
icon: mdi:sofa-single-outline
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding: 8px 24px !important;
}
- type: custom:mushroom-light-card
entity: light.lr_small_porch_lightbulb
name: 'Small Porch Lightbulb '
show_brightness_control: true
use_light_color: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
icon: mdi:coach-lamp
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding: 8px 24px !important;
}
- type: custom:mushroom-light-card
entity: light.lr_tv_light_bars
name: TV Light Bars
show_brightness_control: true
use_light_color: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
icon: mdi:led-strip
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding: 8px 24px !important;
}
ha-card {
--badge-size: 0px;
}
layout: vertical
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 42px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-entity-card
entity: switch.lr_switch_group
name: 'All Living Room Switches '
show_brightness_control: true
use_light_color: true
icon_color: blue
icon: mdi:sofa-single
layout: vertical
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: All Living Room Switches
content:
type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: switch.lr_couch_light
name: Couch Light (Disabled)
icon: mdi:sofa
layout: vertical
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--badge-size: 0px;
}
- type: custom:mushroom-entity-card
entity: switch.lr_porch_light_switch
name: Porch Light (disabled)
icon: mdi:outdoor-lamp
layout: vertical
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--badge-size: 0px;
}
- type: custom:mushroom-entity-card
entity: switch.lr_tv
name: 'TV '
icon: mdi:television-box
layout: vertical
icon_type: icon
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: switch.lr_light_bars
name: Light Bars
layout: vertical
icon: mdi:led-strip
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: switch.lr_vinyl_player
name: Vinyl Player (disabled)
icon: mdi:album
layout: vertical
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--badge-size: 0px;
}
- type: custom:mushroom-entity-card
entity: switch.lr_video_games
name: V.G / Air Purifer
icon: mdi:video-input-component
layout: vertical
tap_action:
action: toggle
- type: conditional
conditions:
- entity: fan.cr_air_purifier
state_not: unavailable
card:
type: custom:mushroom-fan-card
entity: fan.cr_air_purifier
icon_animation: true
name: 'Air Purifier Fan '
icon: mdi:fan
layout: vertical
secondary_info: state
icon_type: entity-picture
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: true
tap_action:
action: toggle
hold_action:
action: more-info
I just KNOW the answer is close but I just donāt have the knowledge and experience yet on how to configure this the right way.
Could you āphotoshopā the card that you want to create? Iām doing the exact same thing here on my end. And I think Iām close to getting it the way I want it.
My suggestion is; start with one horizontal card, followed by two vertical cards.
In the first vertical card, add entities as you wish.
In the second, add the slider.
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: light.vardagsrum_golvlampa_tv_soffa_light
name: LƤslampa
secondary_info: none
fill_container: false
tap_action:
action: toggle
icon: mdi:floor-lamp
primary_info: none
- type: custom:mushroom-entity-card
entity: light.vardagsrum_golvlampa_tv_soffa_light
layout: horizontal
name: LampTitle
secondary_info: name
fill_container: false
tap_action:
action: toggle
icon: ''
icon_type: none
primary_info: state
- type: custom:my-slider-v2
entity: light.vardagsrum_golvlampa_tv_soffa_light
vertical: true
styles:
card:
- height: 140px
- width: 35px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
margin-left: auto;
}
card_mod:
style: |
ha-card {
height: 140x;
}
Then when You have it the way you want it, change the first horizontal card to a stack in card instead.
This is three cards, nested with custom stack in card in the end.
(I always do the stack-in-card at the very end, so I can see all the other cards malfunctioning up until where I get it the way I want it).
- The struggle for me right now is that; my left half of the card is two entities cards, stacked vertically. And the second (lower) entity card, I want to align to the BOTTOM of the stack-in-card.
EDIT
Or I might do this
I see what youāre saying. Hereās what Iām trying to achieve as one card:
and then ultimately end up with something like this:
But what I think what would be better and maybe more realistic is this or the same above but stacked onto each other:
What I currently have:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.lr_light_group
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
name: Living Room Lights
collapsible_controls: true
- type: custom:mushroom-entity-card
entity: light.lr_light_group
fill_container: false
tap_action:
action: toggle
icon: ''
primary_info: name
name: Living Room Switches
layout: horizontal
secondary_info: state
- type: custom:my-slider-v2
entity: light.lr_light_group
vertical: true
styles:
card:
- height: 100px
- width: 35px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
}
card_mod:
style: |
ha-card {
height: 140x;
}
Things that are left Iām still struggling with:
- Making the slider match the current color state
- ālinkingā the slider with the temp + color controls
I think problem 1 will be solved if we can solve problem 2 hopefully.
Other Notes:
3. Not a problem right now but thereās a lot of negative space on the right of the slider card based on this config, Iād like to clean that up after I get the 2 problems fixed above
4. Add in the pop-up cards for individual control like in my āside by sideā code above.
Is it possible to make this in Mushroom (taken from Minimalist). Camera feed and Input datetime.
Best Regards
Thekholm
2 Likes
The way I would go about it, is the same approach I presented in the above post; nested cards.
You can split the design into pieces first. From the top;
- Entity (Camera) with icon and primary info and secondary info
- Picture entity
- Entity (Alarm) with icon and primary and secondary info
- Entity (minus sign), entity (alarm time) and entity (plus sign).
Nowā¦
Recreate the cards as individual cards using the horizontal stack card
I.e. 4th bullet point I made, see above
4.1. Start with the Horzontal card
4.2. Add Entity, remove all but āiconā, set the desired icon
4.3. Add a new entity, remove all but the time
4.4. Finaly add entity, remove all but āiconā, set the desired icon
Do all this for all bullets points, 1-4.
Show code editor for each and every new card you created.
Copy paste all code together, in order, into a Windows\Notepad or ātext editorā. Iāll call this the Base
Create a new card, select vertical stack
Select Manual card
Paste the Base into the manual card
Now you have Base 2
Now create a custom:stack-in-card, and pase Base 2 into that card.
You will probably need to use tab or space-bar to make the syntax work, but it will work.
Where can I read more about this? for further information and learning?
and another question can we apply the animations to mushroom template chip?
type: conditional
conditions:
- entity: switch.irrigation_valves
state: 'on'
chip:
type: template
entity: switch.irrigation_pump_garden
icon: mdi:sprinkler
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: sprinkle 2s linear infinite;' if is_state(config.entity, 'on') }}
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); }
}
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
Hi,
I will try when I get some time. Great little guide you did, thanks! 
Best regards
Thekholm
You are welcome m8. Iāll try and put together a tutorial with screen captures when I have them time for it.
Peace 
has anyone build a weather dashboard/page using mushroom?
would like to get some inspiration
2 Likes
1 Like
How to add a second Badge Icon under the first one?
type: custom:mushroom-template-card
primary: TV-Rum
icon: mdi:television
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
layout: vertical
secondary: '{{ states(''sensor.tv_wave_temperature'') | round(0) }}Ā°C'
badge_icon: mdi:microsoft-xbox
badge_color: green
entity: light.tv_rum
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/tvrum-page
hold_action:
action: toggle
card_mod:
style:
.: |
mushroom-shape-icon {
display: block;
margin-left: auto;
width: 92px;
}
mushroom-state-info {
text-align: start;
}
ha-card {
width: 109px;
height: 120px;
margin: auto;
}
mushroom-state-item {
height: 92px;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
overflow: hidden;
}
Best regards
Thekholm
1 Like