Sure, use stack-in-card.
I tried but the result is not as I would like, I would like all the information to be shown on a single chip card
Can you share your code ?
Hi all,
Hoping someone can help me clean this one up, so I donāt have a large gap on the second column. Wanting to make the light go essentially 90% of the way, and then the icons make up the last part so they site on the side when they should be displayed.
Then hoping I can do two of these cards together in a horizontal stack to have them 2x2 down the page.
Just struggling with the spacing, canāt get it quite how it needs to be.
This is it at the moment:
You can see for some reason it is pulled to the left and off-screen. Can someone help in pulling it back so it is not cut-off?!
Additional expand the box with āPlay Roā¦ā so it takes up the width across to the vertical icons.
type: horizontal-stack
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: grid
square: false
columns: 2
style: ''
cards:
- type: custom:mushroom-template-card
primary: Play Room
secondary: 'TV: {{ states(''media_player.google_tv'')| string | upper }}'
icon: mdi:lightbulb-group
entity: light.playroom_lights
icon_color: |-
{% if is_state('light.playroom_lights', 'on') %}
orange
{% endif %}
fill_container: false
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /home
hold_action:
action: toggle
double_tap_action:
action: none
- type: custom:layout-card
layout_type: custom:vertical-layout
layout:
width: 20
max_width: 20
max_cols: 1
height: 30
cards:
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
}
chips:
- type: template
icon_color: light-blue
icon: mdi:door-open
tap_action: none
entity: binary_sensor.ranch_slider_sensor_contact
style: |
ha-card {
animation: blink 2s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: light.playroom_lights
state: 'on'
chip:
type: template
icon_color: orange
icon: mdi:lightbulb-group
tap_action: none
entity: light.playroom_lights
- type: custom:mushroom-chips-card
alignment: left
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.15em
}
chips:
- type: template
content: '{{states(entity)}} Ā°C'
entity: sensor.play_room_sensor_temperature
icon: mdi:thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state >= '19' %}
red
{% elif state < '19'%}
blue
{% else %}
grey
{% endif %}
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }}{{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.average_indoor_pressure_downstairs
icon: mdi:gauge
icon_color: grey
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(200,200,200,0.02);
}
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Play Room
secondary: 'TV: {{ states(''media_player.google_tv'')| string | upper }}'
icon: mdi:lightbulb-group
entity: light.playroom_lights
icon_color: |-
{% if is_state('light.playroom_lights', 'on') %}
orange
{% endif %}
fill_container: false
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /home
hold_action:
action: toggle
double_tap_action:
action: none
- type: custom:layout-card
layout_type: custom:vertical-layout
layout:
width: 20
max_width: 20
max_cols: 1
height: 30
cards:
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em;
--chip-width: 100%;
}
chips:
- type: template
icon_color: light-blue
icon: mdi:door-open
tap_action: none
entity: binary_sensor.ranch_slider_sensor_contact
style: |
ha-card {
animation: blink 2s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: light.playroom_lights
state: 'on'
chip:
type: template
icon_color: orange
icon: mdi:lightbulb-group
tap_action: none
entity: light.playroom_lights
- type: custom:mushroom-chips-card
alignment: left
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.15em
}
chips:
- type: template
content: '{{states(entity)}} Ā°C'
entity: sensor.play_room_sensor_temperature
icon: mdi:thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state >= '19' %}
red
{% elif state < '19'%}
blue
{% else %}
grey
{% endif %}
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }}{{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
entity: sensor.average_indoor_pressure_downstairs
icon: mdi:gauge
icon_color: grey
tap_action:
action: none
hold_action:
action: none
Really appreciate the help 
How do you fix it when you go back to color_temp color? The background stay at the RGB color, because the RGB is not changing when you change kelvin (color_temp)
The code is (for example):
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.forecast_meteonetwork
show_conditions: true
show_temperature: true
- type: weather
entity: weather.forecast_meteonetwork
show_conditions: true
show_temperature: true
The result obtained is the following (I have an active custom theme):
Both TV On and Off scripts work if I run them seperatly so I know those are workingā¦
Itās the switch after testing thatās not working 
Trying to figure out whyā¦ I was trying to create a button that works for both off and onā¦
The switch is reporting āonā and itās not ā¦ so making them into a switch is probably not the way to goā¦
Thank you!
For example
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
chips:
- type: conditional
conditions:
- entity: light.indoor_lights
state: 'on'
chip:
type: entity
entity: light.indoor_lights
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.indoor_lights
content_info: none
icon: mdi:lamps
- type: conditional
conditions:
- entity: light.outdoor_lights
state: 'on'
chip:
type: entity
entity: light.outdoor_lights
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.outdoor_lights
content_info: none
icon: mdi:outdoor-lamp
- type: conditional
conditions:
- entity: light.all_lights
state: 'on'
chip:
type: entity
entity: sensor.count_lights_on
icon_color: amber
icon: mdi:lightbulb-group
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.all_lights
alignment: center
2 Likes
Hi all,
Ive currently got a dashboard using the stack in card and mushroom cards and I have created a room card with multiple sensors stacked into it and one being a motion sensor. My question is : How can I make the icon flash when motion is detected. Ive managed to make it change icon and colour when motion is detected but I havenāt managed to get it to flash or blink.
My code is here : Blinking Icons - Pastebin.com
in my code some things are blank such as binary sensors not being there and this is just due to me not putting them in
Rhys did a decent job with a blinking alarm here. Maybe you can adapt that.
so Iāve tried to incorporate this into my code and I donāt seem to be getting anything to happen.
Although a template switch is probably a good idea but it helps nothing if aināt workingā¦
Just an idea as Iāve done that successfully:
Keep those two scripts and build a third one with a template that chooses on of the first two script as a service depending on the state of an entity that is part of the on-script.
Template:
If TV is already on
Call service script_off
Else
Call service script_on
Than you can call that script via chip, button or whatever.
Hereās my third script to give you an idea:
alias: 'Arbeitszimmer --> Bad: join/unjoin'
sequence:
- service: |-
{% if is_state_attr('media_player.arbeitszimmer', 'group_members',
[
"media_player.arbeitszimmer",
]) %}
script.bad_join
{% elif is_state_attr('media_player.arbeitszimmer',
'group_members', [
"media_player.arbeitszimmer",
"media_player.bad"
]) %}
script.bad_unjoin_group
{% endif %}
mode: single
icon: mdi:sync
I call that service on a chip to join/unjoin some sonos players with a player in my office.
1 Like
Please paste your code here as pastebin messes up the indentation.
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: switch.radiator_light_strip
layout: vertical
icon: |-
{% if is_state('switch.radiator_light_strip', 'on') %}
mdi:lightbulb-group
{% else %}
mdi:lightbulb-group-off
{% endif %}
icon_color: |-
{% if is_state('switch.radiator_light_strip', 'on') %}
yellow
{%else%}
transparent
{% endif %}
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-template-card
entity: null
layout: vertical
icon: |-
{% if is_state('binary_sensor.', 'on')%}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.','on')%}
red
{%else%}
transparent
{% endif %}
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
Just copied your code and it is blinking as expected. But of course you now have to add a template for the state of the sensor into that card-mod part as it should only blink if motion is detected.
Iām on my mobile right now itās kinda hard to tinker with code. Have a look above at my code for the wobbling washing machine to get an idea.
2 Likes
Thank you! Iāll play with that tonight!!! Something so simpleā¦isnāt going quite so simple LOL
It must depend on the integration because it is working OK for me with both Yeelight and Zigbee RGBW lights. What issue are you seeing?
Just a note on the correct use of card_mod. Iāve updated all my examples to use card_mod correctly. Doing this allows you to continue using the GUI to edit your Mushrooms. It also provides better performance.
The correct syntax is:
card_mod:
style: |
ha-card {
}
Not:
card_mod: null
style: |
ha-card {
}
Or:
style: |
ha-card {
}
10 Likes
A funny thing happened on the way to writing a script LOL
I put both the on and off in the same script and itās working with one buttonā¦ 
1 Like
Thanks! I hadnāt really gone back to that since it doesnāt display on my mobile, which is where I do everything but edit, but it was definitely bothering me lol. Iām terrible with Card Mod