theandouz
October 26, 2022, 2:24pm
3658
I’m sure you can apply the border to the stack in card but I’m not sure what css variable to use so I add a template card just for the border line. Not the simplest code but it works
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: AAPL
secondary: Apple
icon: mdi:apple
icon_color: disabled
- type: custom:mushroom-template-card
primary: '121.35'
secondary: +0.12%
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
}
.: |
ha-card {
margin: 3px 8px 0px 0px;
--secondary-text-color: rgb(var(--rgb-green));
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 0px 0px 66px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: GOOG
secondary: Alphabet Inc.
icon: mdi:google
icon_color: disabled
- type: custom:mushroom-template-card
primary: 2,041.04
secondary: +0.27%
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
}
.: |
ha-card {
margin: 3px 8px 0px 0px;
--secondary-text-color: rgb(var(--rgb-green))
}
3 Likes
TommyWelle
October 26, 2022, 6:05pm
3660
Awesome. Just what i was looking for. Could you please share the code?
Amazing, exactly what I was looking for! Your code is much more neat as well.
1 Like
rhysb
October 26, 2022, 8:54pm
3663
There is one breaking change for the chips. --chip-box-shadow has changed to --ha-card-box-shadow. You can do a find and replace all to fix.
7 Likes
rhysb:
–ha-card-box-shadow
In case anyone does a copy/paste from @rhysb ’s last post, the --chips-box-shadow is meant to be --chip-box-shadow. There is no ‘S’ after chip.
2 Likes
theandouz
October 26, 2022, 9:54pm
3665
I have an air purifier that has 3 preset speeds and wanted a button card to set those instead of the percentage slider of the fan card. Here’s the code incase anyone wants it
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: fan.andrews_air_purifier
icon: mdi:fan
primary: Air Purifier
secondary: |-
{% set fanspeed = state_attr(config.entity, 'percentage') %}
{% if is_state_attr(config.entity, "mode", "auto") %}
Auto
{% elif is_state_attr(config.entity, "mode", "sleep") %}
Sleep
{% elif fanspeed == 100 %}
High
{% elif fanspeed == 66 %}
Medium
{% elif fanspeed == 33 %}
Low
{% endif %}
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-icon {
box-shadow: 0px 0px;
animation: rotation linear infinite !important;
{% set fanspeed = state_attr(config.entity, 'percentage') |float %}
{% if is_state_attr(config.entity, "mode", "auto") %}
animation-duration: 2s !important;
{% elif is_state_attr(config.entity, "mode", "sleep") %}
animation-duration: 6s !important;
{% elif fanspeed == 100 %}
animation-duration: 0.5s !important;
{% elif fanspeed == 66 %}
animation-duration: 1.5s !important;
{% elif fanspeed == 33 %}
animation-duration: 3s !important;
{%- else -%}
animation-duration: ;
{%- endif %}
}
.: |
ha-card {
margin-bottom: -9px;
}
- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:mushroom-template-card
layout: vertical
primary: Low
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 33
target:
entity_id: fan.andrews_air_purifier
view_layout:
grid-area: button1
card_mod:
style: |
ha-card {
height: 44px !important;
box-shadow: none;
--card-primary-font-weight: normal;
}
- type: custom:mushroom-template-card
layout: vertical
primary: Medium
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 66
target:
entity_id: fan.andrews_air_purifier
view_layout:
grid-area: button2
card_mod:
style: |
ha-card {
height: 44px !important;
box-shadow: none;
--card-primary-font-weight: normal;
}
- type: custom:mushroom-template-card
layout: vertical
primary: High
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 100
target:
entity_id: fan.andrews_air_purifier
view_layout:
grid-area: button3
card_mod:
style: |
ha-card {
height: 44px !important;
box-shadow: none;
--card-primary-font-weight: normal;
}
- type: custom:mushroom-template-card
layout: vertical
icon: mdi:fan-auto
icon_color: white
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: auto
target:
entity_id: fan.andrews_air_purifier
double_tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: sleep
target:
entity_id: fan.andrews_air_purifier
view_layout:
grid-area: button4
card_mod:
style: |
ha-card {
height: 44px !important;
box-shadow: none;
}
mushroom-shape-icon {
--shape-color: none !important;
--icon-symbol-size: 20px;
}
layout:
grid-template-columns: 29% 29% 29% 13%
grid-template-rows: auto
grid-template-areas: |
"button1 button2 button3 button4"
card_mod:
style: |
ha-card {
{% if is_state('fan.andrews_air_purifier', 'on') %}
background: rgba(101,170,91,0.1);
{% endif %}
}
27 Likes
pedolsky
October 26, 2022, 10:13pm
3666
tempus2016:
–chip-box-shadow
Many thanks for this important note. Maybe it’s because I’m running 2022.11.0b0, but when selecting the chip card in a standard view without any theme, I get this:
Super-awkward rookie mistake: forgot to clear cache. Shouldn’t have updated at 2 AM.
1 Like
We have an iPad in the basement, primarily for guest use to control just that area. This is still a WIP, but I was able to fill my iPad screen perfectly. I used a custom grid layout card, defined below. The playlists on the right are displayed when nothing is playing, and that section is swipeable to view more. When Spotify is playing, it shows the current track and speaker volume controls.
max_cols: 6
grid-template-columns: 16% 16% 32% 36%
grid-template-rows: 16.7% 16.7% 16.7% 16.7% 16.7%
grid-template-areas: |
"info info light-1 climate"
"info info light-2 spotify"
"info info light-3 spotify"
"button-1 button-2 light-4 spotify"
"button-3 button-4 light-5 volume-1"
"button-5 button-6 master volume-2"
justify-items: stretch
height: calc(100vh - 5px);
card_margin: 0
6 Likes
Has anyone added icons or custom buttons to light cards? Several of the lights in our home have timers (automations to turn off the light after X minutes), to avoid lights being left on. I’d love an elegant way to toggle the timer automation from the light card. Maybe using the existing button style on the card for swapping between color/temp/brightness, or adding a tappable icon like the attached example. It needs to have a way to tell if the timer is on or off; in this case the icon would be a color when on, or disabled when off.
And another question: has anyone modified the secondary text style in a mushroom card? I love the style of Feltron reports (e.g. Feltron: 2011 Annual Report ), and it would be awesome to have a mushroom card with giant numbers. In the meantime, I’ve been using standard “entity” cards for larger data.
janiv
October 27, 2022, 6:27am
3670
Hi
Thanks
very nicely done may i ask how you did the part of spotify that when something is playing the card shrinks and volume controls come up ?
any chance you can animate mdi:calendar-clock?
Custom buttons on light card:
Here you go, a Mushroom Light Scene Card with four (or more) buttons:
[Mushroom Light Scene Card]
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.dining_room_light
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.scene_1
icon_color: red
icon: mdi:numeric-1-circle
content_info: none
tap_action:
acti…
Change title font size/style:
If anyone needs to modify the Mushroom Title card, it can be done with card_mod like this:
[Mushroom Title Card]
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: I'd rather be picking
subtitle: Mushrooms
1 Like
I like your code and ideas, any chance you could share your dashboard look?
1 Like
nsf
October 27, 2022, 5:21pm
3677
Sorry for the probably noob question, but how do I do a find and replace all?
pedolsky
October 27, 2022, 5:38pm
3678
mush-chip-box-shadow is back, see the newest release notes.
New variables for themes :
--mush-chip-border-color--mush-chip-border-width--mush-chip-box-shadow
2 Likes
