Hey,
what cards for Progress and Graph do you use?
Could you please share YAML?
Thanks
Hey all, for some reason i cant figure out (NFI really) why when I put my cards in horizontal stack, the chips at the bottom are not displayed when I exit the GUI
Code for anyone interested - https://pastecode.io/s/dwai9o2z
This has been posted many times recently, but how animations are applied changed a few months back.
see the updated animations below:
post your yaml in the message itself.
people are not going to click a link no matter how trustworthy you may seem 
I did do a search from bottom to top on terms like wobble, blink etc, tried several examples with chips and not but none of them worked. I did see your post but i thought it was a copy of rhysb’s post so skipped it.
Your updated versions work, thanks 
1 Like
Hi All,
I dont condone cross-posting, but i hope it will be a allowed in this instance as i just wanted a wider group to know about the alternative to the light card horizontal layout i created.
i didnt like the fact that a bunch of space is being wasted, and that you have very limited room for the slider. so i built this:
and its alternative that keeps the text in 2 rows:
check out the post with all of the details here:
8 Likes
Amazing cards… Did anyone create a great looking card for vacuum?
The whole yaml is more than the supported character number lol
Hi @Mosher
Progress is bar-card and graph is apexcharts-card.
Here is the YAML, let me know if you have any questions:
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: 3D Printer
alignment: center
title_tap_action:
action: url
url_path: http://192.168.3.11:4408
subtitle: |
{{ states('sensor.creality_current_print_state') | title }}
- type: custom:button-card
entity: switch.creality_k1
size: 10%
color: purple
name: K1 Power Switch
show_state: true
confirmation: true
styles:
card:
- font-size: 14px
- font-weight: bold
- padding: 10px
icon:
- margin-bottom: 10px
- type: conditional
conditions:
- entity: sensor.creality_current_print_state
state: printing
card:
type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-entity-card
entity: sensor.creality_print_duration
name: Active
primary_info: state
secondary_info: name
fill_container: false
icon_color: blue
- type: custom:mushroom-entity-card
entity: sensor.creality_slicer_print_duration_estimate
name: Projected
primary_info: state
secondary_info: name
fill_container: false
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.creality_slicer_print_time_left_estimate
name: Remaining
primary_info: state
secondary_info: name
fill_container: false
icon_color: orange
- type: custom:bar-card
name: Print Progress...
icon: mdi:clock-end
color: purple
animation:
state: 'on'
speed: 5
positions:
indicator: inside
name: inside
entities:
- entity: sensor.creality_progress
style: |-
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 10px;
}
ha-icon {
color: white;
}
- type: custom:webrtc-camera
url: rtsp://graincam:[email protected]/live
- type: custom:apexcharts-card
graph_span: 1h
header:
show: true
title: Temp
show_states: true
colorize_states: true
apex_config:
chart:
height: 150px
legend:
show: false
grid:
xaxis:
lines:
show: true
borderColor: '#555'
yaxis:
- opposite: true
decimals: 0
apex_config:
tickAmount: 2
all_series_config:
stroke_width: 2
float_precision: 0
series:
- entity: sensor.creality_extruder_temperature
name: Hotend
- entity: sensor.creality_extruder_target
name: Hotend Target
show:
in_chart: false
- entity: sensor.creality_bed_temperature
name: Bed
- entity: sensor.creality_bed_target
name: Bed Target
show:
in_chart: false
- entity: sensor.creality_chamber_temp
name: Chamber
color: green
style: |
ha-card {
color:white;
background-color: black;
}
.state {
display: block !important;
}
2 Likes
they display just fine on all devices for me:
even checked in a grid since that is what it looks like you have and it still works fine:
i would assume that you are accidentally forcing some height restriction on your vertical stack card somewhere as i note that you havent posted the full card for your entire stack.
Just click the link lol its not a scam mate
here is the card_mod part at the bottom of each card
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -0.0em;
--chip-icon-size: 0.5em
}
card_mod:
style: |
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
I checked, I cant find any card height restrictions
I did, and that is what i used to check. But what you posted is only the 1 card that i took a screenshot of. Not everything in your massive vertical stack card.
Still works just fine. but again. not your full card.
this is the full card you posted that you have issues with.
i understand trying to drill down to what you think is causing the issue, but clearly the individual parts seem to be working. just not put together
so post me the full card and we can try and work on it
this is the code for the 2 rooms in a horizontal stack,
https://pastecode.io/s/z1ri0w5a
if I do a f5 cache refresh it temporarily fixes the problem until I go into edit mode
Look i dont know what you want me to do if you refuse to post the entire card.
i can see from the screenshot you sent that you have multiple things stacked on top of eachother.
a horizontal stack with 2 cards at the bottom. a card on top, another card on top of that, and some sort of title card on top of that. all in a stack of some kind (probably a vertical stack) if you dont post the full vertical stack i cant help you.
but honestly what is likely causing the issue is that you have all of these stacks in stacks in stacks.
i would take each of these cards out and place them seperately in your dashboard.
so the horizontal stack with 2 cards seperately. and the other cards on top of that seperately in your dashboard. not all in a vertical stack card like you have right now. your device might just not be able to load it in time.
- type: custom:mushroom-media-player-card
entity: media_player.music
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
- shuffle
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if is_state(config.entity, 'playing') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.music
state: playing
card:
entity: media_player.music
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if is_state('media_player.music', 'playing') %}
background: url( '{{ state_attr('media_player.music', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
hallo @dimitri.landerloos
I have a question; maybe you can help me with this. I would like the badge color to be the same as the card, so red for 0, orange for 1, and yellow for 2, just like the icon itself. Thanks in advance!
type: custom:stack-in-card
mode: vertical
keep:
background: false
box_shadow: false
margin: false
outer_padding: true
border_radius: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: >-
Volgende: {{ state_attr
('sensor.limburg_net_eerst_volgende','Upcoming_day') }}
secondary: >-
{{ state_attr
('sensor.limburg_net_eerst_volgende','Upcoming_waste_types') }}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
--card-primary-font-weight: 400;
--card-secondary-font-weight: 400;!important;
#margin-top: -5px;
#margin-bottom: -5px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:garbage-plastic
badge_icon: |
{% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
badge_color: orange
icon_color: |-
{% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
yellow
{% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
orange
{% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_pmd', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:garbage-residual
icon_color: >-
{% if state_attr('sensor.limburg_net_restafval', 'Days_until') ==
2 %}
yellow
{% elif state_attr('sensor.limburg_net_restafval', 'Days_until')
== 1 %}
orange
{% elif state_attr('sensor.limburg_net_restafval', 'Days_until')
== 0 %}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_restafval', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:garbage-organic
icon_color: |-
{% if state_attr('sensor.limburg_net_gft', 'Days_until') == 2 %}
yellow
{% elif state_attr('sensor.limburg_net_gft', 'Days_until') == 1 %}
orange
{% elif state_attr('sensor.limburg_net_gft', 'Days_until') == 0 %}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_gft', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:garbage-cardboard
icon_color: >-
{% if state_attr('sensor.limburg_net_papier', 'Days_until') == 2
%}
yellow
{% elif state_attr('sensor.limburg_net_papier', 'Days_until') == 1
%}
orange
{% elif state_attr('sensor.limburg_net_papier', 'Days_until') == 0
%}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_papier', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
picture: local/afvalbeheer/textiel-afval.png
icon_color: >-
{% if state_attr('sensor.limburg_net_textiel', 'Days_until') == 2
%}
yellow
{% elif state_attr('sensor.limburg_net_textiel', 'Days_until') ==
1 %}
orange
{% elif state_attr('sensor.limburg_net_textiel', 'Days_until') ==
0 %}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_textiel', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
top: 10px;
right: 60px;
}
Hi, is there a way to make the buttons (100, 70, 30) change color or flash for a few seconds to indicate that that scenario has been activated?
type: custom:stack-in-card
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-cover-card
entity: cover.aqara_estore_grande_entrada
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
icon: mdi:blinds
name: Estore Grande Entrada
card_mod:
style: |
:host {
grid-column: 1 / span 2;
}
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-template-card
primary: 100%
secondary: ''
layout: vertical
entity: scene.estore_100
icon: mdi:blinds-open
- type: custom:mushroom-template-card
primary: 70%
secondary: ''
layout: vertical
entity: scene.estore_70
icon: mdi:roller-shade
- type: custom:mushroom-template-card
primary: 30%
secondary: ''
layout: vertical
entity: scene.estore_30
icon: mdi:roller-shade-closed
This should work:
- type: template
content: null
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:garbage-plastic
badge_icon: |
{% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
icon_color: |-
{% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
yellow
{% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
orange
{% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
red
{% endif %}
card_mod: null
style: |
ha-card:after {
content: "{{ state_attr('sensor.limburg_net_pmd', 'Days_until') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
{% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
background: rgb(var(--rgb-yellow));
{% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
background: rgb(var(--rgb-orange));
{% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
background: rgb(var(--rgb-red));
{% endif %}
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
1 Like