Also interessted in the yaml for the weather button 
That’s determined by the state_on variable in button_card_templates/base.yaml which is set to 'on', 'home', 'cool', 'fan_only', 'playing', 'unlocked'. If you don’t want to alter the base files, you can add the states to individual buttons like this:
- type: custom:button-card
entity: alarm_control_panel.home_alarm
name: Security
tap_action: !include popup/alarm.yaml
template:
- base
- icon_home_shield
variables:
state_on: >
[[[ return ['armed_night', 'armed_away', 'armed_home'].indexOf(!entity || entity.state) !== -1; ]]]
state_off: >
[[[ return ['disarmed'].indexOf(!entity || entity.state) !== -1; ]]]
state: >
[[[ return !entity || entity.state; ]]]
...
1 Like
Hi Mattias! how can i add that little phone circle beeneth in the picture below?
Hi, i have a same template, I just add some background images according weather state and modify font size.
button template:
widget_weather:
template:
- base
variables:
temp_min: ''
temp_max: ''
humidity: ''
current_weather: ''
is_bellow_horrizon: >
[[[
if (states['sun.sun'].state == 'below_horizon') {
return true;
}
]]]
aspect_ratio: 1/1
show_icon: false
show_entity_picture: true
show_name: true
show_state: true
show_label: true
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: |
"n"
"temp"
"i"
"s"
"l"
- grid-template-columns: 1fr
- grid-template-rows: min-content repeat(2, 1fr) repeat(2, min-content)
- gap: 0%
- overflow: visible
card:
- padding: 11.5% 10.5% 10.5% 11.5%
- color: rgba(255, 255, 255, 0.6)
- 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/${weather}.png)`
: `linear-gradient(to top, rgba(155, 109, 129, 0.5) 0%, rgba(63,74,113,1) 100%) 100% / cover, url(/local/svg/weather/${weather}.png)`;
]]]
- background-size: cover
state:
- text-transform: uppercase
- margin-top: 5px
- line-height: 100%
name:
- place-self: start
- text-transform: uppercase
- font-weight: 500
- font-family: Futura
- letter-spacing: 0.1vw
- margin-top: -7%
img_cell:
- justify-content: start
- overflow: visible
icon:
- width: 35%
label:
- place-self: start
# - margin-left: -5px
- margin-top: 3%
- margin-bottom: -7%
custom_fields:
temp:
- place-self: start
# - margin-top: -5px
- font-family: Futura
- color: rgba(240, 255, 255, 0.8)
label: >
[[[
return `
<ha-icon icon="mdi:water-percent" style="width: 1em; height: 1em; margin-right: -0.3em;"></ha-icon>
<span>${states[variables.humidity].state}%</span>
<ha-icon icon="mdi:chevron-up" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon>
<span>${states[variables.temp_max].state}°</span>
<ha-icon icon="mdi:chevron-down" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon>
<span>${states[variables.temp_min].state}°</span>
`
]]]
custom_fields:
temp: >
[[[ return entity.attributes.temperature + "°"; ]]]
entity_picture: >
[[[
let weather = states[variables.current_weather].state.toLowerCase();
if ((weather == 'sunny') && (states['sun.sun'].state == 'above_horizon'))
return "/local/svg/weather/clear-day.svg";
if ((weather == 'sunny') || (weather == 'clear-night') && (states['sun.sun'].state == 'below_horizon'))
return "/local/svg/weather/clear-night.svg";
if (weather == 'fog')
return "/local/svg/weather/fog.svg";
if ((weather == 'partlycloudy') && (states['sun.sun'].state == 'above_horizon'))
return "/local/svg/weather/partly-cloudy-day.svg";
if ((weather == 'partlycloudy') && (states['sun.sun'].state == 'below_horizon'))
return "/local/svg/weather/partly-cloudy-night.svg";
if (weather == 'rainy')
return "/local/svg/weather/rain.svg";
if (weather == 'sleet')
return "/local/svg/weather/sleet.svg";
if (weather == 'snow')
return "/local/svg/weather/snow.svg";
if (weather == 'cloudy')
return "/local/svg/weather/cloudy.svg";
else (weather == 'wind')
return "/local/svg/weather/wind.svg";
]]]
extra_styles: |
[[[
return `
#name {
font-size: 0.9vw;
}
#temp {
font-size: 1.4vw;
}
#state {
font-size: 0.7vw;
}
#label {
font-size: 0.6vw;
}
@media screen and (max-width: 1500px) {
#name {
font-size: 1.3vw;
}
#temp {
font-size: 2vw;
}
#state {
font-size: 1.2vw;
}
#label {
font-size: 1.2vw;
}
@media screen and (max-width: 800px) {
#name {
font-size: 3vw;
margin-top: -5%;
}
#temp {
font-size: 6vw;
}
#state {
font-size: 2.7vw;
}
#icon {
display: none !important;
}
#label {
font-size: 1.9vw;
font-weight: 500 !important;
margin-top: 5%;
margin-bottom: 0%;
margin-left: -4%;
}
}
`
]]]
lovelace:
- type: custom:button-card
entity: weather.prague
name: Prague
variables:
temp_min: sensor.weather_min_temp
temp_max: sensor.weather_max_temp
humidity: sensor.openweathermap_humidity
current_weather: weather.prague
template:
- widget_weather
7 Likes
Thanks so much! I’m wanting to take some stuff from your sidebar so I took a dive into your config. I am trying to create the special occasions template sensor in my sensor.yaml file and it is giving me all sorts of errors. Tried pasting in the same layout you have, and this is what I’m getting. Any ideas? Thanks!
1 Like
My guess is that it’s probably in the wrong location/format.
The following is the correct structure:
template:
sensor:
- unique_id: special_occasions
name: 'Special Occasions'
state: >
There’s a difference between “template sensor” and “sensor template”.
If you’re pasting this where you’re using the legacy method, you’ll get errors.
Could this be it?
Thanks for that code. Could you also share the svg’s that you are using?
and the PNGs for the background
Thank you so much!
Davide
Just screenshot some weather background and rename it same as svg, I have just for cloudy, partly cloudy, rainy, clear-day, clear-night 
or you can use gif background… they looks realy nice.
2 Likes
Can u share your icons file, Like the icons you have used for Rooms, Camera, door etc.?
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
1 Like
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.
2 Likes
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. 