Got it! Thanks again!
Hi Andrea, could you share the code for the multimedia page - it looks great!
1 Like
Thx man been looking for a answer on this for hours. Thx for sharing the info.
I must be doing something wrong but i added a few (diswasher, dryer and washingmachine) as test to my dashboard, assigned a input_boolean to it for testing purpose but none of the animations is working?
I have al lthe requirements installed so have no clue what is going wrong.
type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: blue
primary: Dishwasher
entity: input_boolean.vaatwasser
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
Hey,
could you please share this card YAML?
Thank you
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