What weather map are you referring to?
I’m using the:
- Weather card (with hourly instead of day to day)
- Sun Card (HACS)
- Clock Weather Card (HACS)
1 Like
Very beautiful and practical! Can you share your code?
@rhysb card mod doesn’t seem to work on stack-in-card? How to achieve something like the following with mushroom cards then?
I want cards stacked like that, separated by a line.
Now I tried stacking 2 template cards horizontally, and then stacking those vertically, but the line border-bottom does not work.
First try
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
# left aligned title card 1
- type: custom:mushroom-template-card
# right aligned numbers card 1
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
}
.: |
ha-card {
margin-right: 8px;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px 54px;
}
- type: custom:stack-in-card
cards:
# card 2
Then I though about a rough setup like this, but the lines are not connected:
Second try
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
# left aligned title 1
card_mod:
style: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px 54px;
}
- type: custom:mushroom-template-card
# left aligned title 2
# etc
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
# right aligned numbers 1
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
}
.: |
ha-card {
margin-right: 8px;
}
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
# right aligned numbers 2
# etc
card_mod:
style: |
ha-card {
box-shadow: none;
}
My second try looks something like this. It’s just not quite neat enough yet.
Hope you can help with some CSS magic 
2 Likes
Anything in particular you’re looking for?
Almost 95% done. How does it look?
What to wear inside the house page fully combined with climate controls and automations.
As a small note. The photo of the lady in the screenshot turns pale as the house gets colder.
Hi,
Try this bit of code at the end of every single entity, works for me!
Got the code from the master himself 
card_mod:
style:
mushroom-state-info$: null
.: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
margin: 12px 0px -12px;
}
/Thekholm
I did this card if some one else wants it!
Just change the margin to fit your phone if something is off.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.tv_wave_temperature
primary: Temperature
secondary: |
{{ states('sensor.tv_wave_temperature') | round(0) }}°C
icon: mdi:thermometer
icon_color: green
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 106
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.tv_wave_temperature
name: Temperature
color: '#00bb33'
hours_to_show: 24
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
Best regards
Thekholm
25 Likes
Yess I tried that but it won’t work properly 
Try this!
card_mod:
style:
mushroom-state-info$: null
.: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-grey), 0.2);
margin: 12px 0px -12px;
}
/T
1 Like
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
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
Heads up!
3 Likes
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
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
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
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.
