How did you make it display gif animation? Can different gif animations be displayed based on day and night? Please share the complete code containing the gif animation. Additionally, I found that the card layout is normal on the webpage, but the layout on the mobile device may be disordered, as shown in the picture. Please share the complete code and solve the problem of disordered layout. Thank you
Hello, could you share your hue Lily card template? If possible, I would also like you to share your hue Lily icon. I really like it. Thank you
here’s the code but it’s not animated
icon_lily_two:
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M17.21 32.15c1.08-.36 1.8-.9 1.98-1.26.36-.18.54-.54.54-1.08 0-.9-1.08-1.44-1.98-1.8-1.62-.54-2.34-.54-3.06-.36C14.33 26.57 14.33 24.77 14.33 22.61l5.76-3.42 0 0 7.74-4.5 0 0 0 0 0 0c0 0 0 0 .18 0l0 0c.18-.18.36-.36.54-.54 0-.18.18-.18.18-.36 0-.18.18-.18.18-.36 0-.18.18-.36.18-.54s0-.18 0-.36c0-.18.18-.54.18-.72l0 0 0 0c0-.36 0-.72 0-1.08 0-1.62-.72-3.6-1.8-5.4S25.13 2.09 23.69 1.19c-1.62-1.08-3.06-1.26-4.32-.54l0 0 0 0L2.45 10.73l0 0c-1.26.72-1.8 2.16-1.8 3.96 0 1.62.72 3.6 1.8 5.4s2.34 3.24 3.78 4.14c.36.18 .72.36 .9.54 .18 2.52.54 4.68 1.08 5.4.54 .72 1.8 1.44 3.24 1.98C8.57 32.33 5.33 33.23 5.33 35.03v1.26c0 2.34 5.4 3.06 8.64 3.06s8.64-.72 8.64-3.06v-1.26C22.61 33.23 19.91 32.51 17.21 32.15zM19.91 2.27 19.91 2.27c.18-.18.18-.18.36-.36l0 0C20.45 1.73 20.63 1.73 20.99 1.73c.54 0 1.08.18 1.8.72 1.26.72 2.34 1.98 3.24 3.6s1.44 3.24 1.44 4.68c0 1.08-.18 1.98-.72 2.34l0 0c0 0 0 0-.18.18 0 0 0 0-.18 0l0 0c-.54.18-1.44 0-2.34-.54-1.26-.72-2.34-1.98-3.24-3.6s-1.44-3.24-1.44-4.68C19.55 3.53 19.73 2.81 19.91 2.27zM37.91 12.89c-.72-1.26-1.62-2.16-2.52-2.88-1.08-.72-1.98-.72-2.88-.36l0 0 0 0-1.44.9 0 0c.18 2.34-.72 4.14-2.16 5.22 0 0 0 0-.18.18L28.55 16.13l0 0 0 0-8.28 4.86c.18.54 .36 1.08.72 1.8.72 1.26 1.62 2.16 2.52 2.88.18 .18.36 .18.72 .36.18 1.8.36 3.06.72 3.6s1.08.9 2.16 1.26c-1.8.18-3.6.54-3.96 1.62.9 .9 1.26 1.8 1.26 2.52 1.26.54 3.06.72 4.5.72 2.16 0 5.76-.36 5.76-1.98v-.9c0-1.08-1.8-1.62-3.6-1.98.72-.18 1.08-.54 1.26-.72s.36-.36.36-.72c0-.54-.72-.9-1.26-1.08-1.08-.36-1.62-.36-1.98-.18-.18-.9-.18-2.16-.18-3.6l9-5.4 0 0 0 0 0 0 0 0 0 0c.72-.54 1.08-1.44 1.08-2.52C38.99 15.41 38.63 14.15 37.91 12.89zM37.37 18.11c-.36.18-1.08.18-1.62-.36-.72-.54-1.62-1.44-2.16-2.34-.54-1.08-.9-2.16-1.08-3.06 0-.54 0-1.08.36-1.44l0 0C32.87 10.73 33.05 10.73 33.05 10.73l0 0c.18 0 .36-.18.36-.18.36 0 .72.18 1.26.36 .72.54 1.62 1.44 2.16 2.34.54 1.08.9 2.16 1.08 3.06C37.91 17.39 37.73 17.93 37.37 18.11z" fill="#9da0a2" />
</svg>
gif background: A different take on designing a Lovelace UI - #3277 by htpc2308
The name of these background images must be the same as the weather entity state. In the template you have to adjust the font size for the screen size, I don’t have the icon on my mobile app.
@media screen and (max-width: 800px) {
#icon {
display: none !important;
}
You can change the background using the sun entity state variables.
- background: >
[[[
let weather = states[variables.current_weather].state.toLowerCase();
return variables.is_bellow_horrizon
? `linear-gradient(to top, rgba(53,59,83,0.8) 0%, rgba(0,0,0,0.4) 100%) 100% / cover, url(/local/svg/weather/gif/${weather}.gif)`
: `linear-gradient(to top, rgba(155, 109, 129, 0.5) 0%, rgba(63,74,113,1) 100%) 100% / cover, url(/local/svg/weather/gif/${weather}.gif)`;
]]]
Don’t forget to empty the browser cache and also the mobile app.
Thank you. Can you set the font size and weather icon size for mobile devices separately?
Thank you. Can you share your card template? I want to implement the characters in the circle on your card.
Laffer has his full config available, its linked in his profile.
I helped with this, see above A different take on designing a Lovelace UI - #4343 by htpc2308
I don’t have any of the code anymore so you will need to work of the post
Extra styles part… look at the whole config template, dont just copy and paste. 
I made a solution that’s a single file and a couple of lines added to the light button yaml. It’s been working really well for me.
I am trying to change a few things on a couple of my cards and I’m not having any luck.
Regarding the grid card header:
This is what I have for grid fonts in my themes.yaml. I have changed the font- size and font-weight, reloading the themes through the dev tools and using the new quick reload without success.
grid-layout$:
hui-grid-card:
$: |
/* default */
h1 {
font-size: 7.4vw !important;
line-height: 0 !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
letter-spacing: 0.006vw !important;
}
/* portrait */
@media screen and (max-width: 1200px) {
h1 {
font-size: 7.4vw !important;
line-height: 1.1vw !important;
}
}
/* phone */
@media screen and (max-width: 800px) {
h1 {
font-size: 7.4vw !important; #5.5
font-weight: 800 !important;
line-height: 6vw !important;
margin: 2vw 0 0 0 !important;
}
}
#custom variables
ha-card-background-color: rgba(34,38,39,0.9)
ha-card-header-background-color: rgba(48,52,52,0.8)
custom-layout-card-padding: 1.0vw #distance around edge of gird card
custom-button-card-border-radius: 8% #9.5
sidebar-time-font-size: 5.2vw
sidebar-time-line-height: 4.3vw
sidebar-font-size: 1.42vw
button-card-font-size: 2.00vw #Font size 1.45
button-card-font-weight: 500
sidebar-line-height: 2vw
card-content-padding: 1.4em 2.2em 1.6em 1.5em
bar-card-color: "#303435"
I would also like to wrap the text in the “body” of the card so that its on two lines if it doesnt fit on the width of the card.
Hi, thx for awesome card. I dont have initial time on my electrolux washer but trying to figure out how i could make it. Some template like:
When sensor.remain_time goes from 0 to XXX, take a “snapshot” of that value and save in to a “input_number” sensor? Is that possible? Sorry im not so good at this but just brainstorming 
Thanks! was looking for icons.yaml file, found it within button_card_templates.yaml
my grid card heading (Office) has no indent and is thicker, but I don’t think iv done anything custom to it
As for wrapping the body text (Door) that will brake some things, however, look for - text-overflow: unset in the base .yaml template and remove that, that will let the text overflow (again I don’t recommend it)
Do you have a state like “running” on your washer? you could look at using the last_changed of the state
see this post for details
Ye, that could work. I can template “last_changed” to minutes, but when the washer is running, last_changed incrases im minutes while time_left decrases. Can figure out the math to make it in percent lol.
edit: figured out the math lol, now the hard part : code.
So i take left time + last changed time = total cycle time
(left time / total cycle time) * 100 will give me time in percent…
edit 2:
got it, in laundry.yaml
initial_time: > {{ ((as_timestamp(now()) - as_timestamp(states.sensor.electrolux_tvattis_wm1_appliancestate.last_changed)) / 60) | round(0) }}
and in ui-lovelace.yaml:
circle_input: > [[[ if (entity) { let initial_time = entity.attributes.initial_time, remain_time = entity.attributes.remain_time, total_time = remain_time + initial_time, percent = (remain_time / total_time) * 100, result = Math.round(percent); return [ 'Washing', 'Rinsing', 'Draining', 'Spinning'].includes(entity.state) ? result : 'NA'; } ]]]
Thx for help!
I dont have - text-overflow: in my base.yaml, but I can put that on the back burner for now. I am more focused on getting my font to look like yours.
While searching for the - text-overflow: I did find text-align: left !important; I wonder if I could place that somewhere to remove my indent.
This is what I have in my themes.yaml under grid card headings.
#################################################
# #
# GRID CARD HEADINGS #
# #
#################################################
grid-layout$:
hui-grid-card:
$: |
/* default */
h1 {
font-size: 7.4vw !important;
line-height: 0 !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
letter-spacing: 0.006vw !important;
}
/* portrait */
@media screen and (max-width: 1200px) {
h1 {
font-size: 7.4vw !important;
line-height: 1.1vw !important;
}
}
/* phone */
@media screen and (max-width: 800px) {
h1 {
font-size: 7.4vw !important;
font-weight: 800 !important;
line-height: 6vw !important;
margin: 2vw 0 0 0 !important;
}
}
Changing font-weight: 800 !important; does nothing.
How did you manage to implement these sensors? can you please explain
I replace what I have in my themes.yaml with what you posted, reloaded the theme and refreshed the page, the changes worked as expected, way over sized but they did take effect, I still did not have an indent.
by
are you calling the Home Assistant Frontend: Reload themes service?
that’s correct, looking at the most recent version from @Mattias_Persson there is no - text-overflow:, I might have added that myself at some point, my bad.
to have the text wrap add - white-space: unset under styles: name: in base.yaml
I was using Quick reload.
I have changed font-size: from the 7.4 I posted earlier to 2.4 and reloaded themes through dev tools and nothing is changing.
grid-layout$:
hui-grid-card:
$: |
/* default */
h1 {
font-size: 2.4vw !important;
line-height: 0 !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
letter-spacing: 0.006vw !important;