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
Is there a special theme required? If I use your code (thx for it!), I neither have the background colored nor is the chips bar slightly shaded. Also, all chips icons show up with a border line. Entities were altered, of course. What am I doing wrong?
Iām an idiot. Missed installing card-mod. 
1 Like
Thanks Rhysb.
I endend up with this for extending the slider:
style: |
mushroom-state-item {
max-width: 100px !important;
}
I used px instead of fit content as otherwise the sliders would go to the end of the names and not be aligned in the left side.
Furthermore i have change the height of the slider and control buttons to have it more compact.
style: |
ha-card {
ācontrol-height: 30px;
}
mushroom-state-item {
max-width: 100px !important;
}
2 Likes
You can make Mushroom Chips vertical like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
content: Mushroom
- type: template
icon: mdi:mushroom
icon_color: red
- type: template
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
.chip-container {
flex-flow: column !important;
}
2 Likes
Iām curious about the input datetime card as well.
The minimalist camera card can be made with a stack-in-card combining a template card (with the icon and camera name) with the usual camera card.
Yes, you can add most of the animations to Chips like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.irrigation_pump_garden
icon: mdi:sprinkler
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: sprinkle 2s linear infinite;' if is_state('switch.irrigation_pump_garden', '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); }
}
What are you wanting further info on?