@piteriuz I think this will fix it
1 Like
Your #BASE# comment has the same indentation as your temperature template. Don’t do that 
custom_fields:
temperature: >
[[[
const temp = entity.attributes.temperature
return `${temp}°`
]]]
#BASE#
homekit_style:
aspect_ratio: 1/1
show_label: true
show_state: true
Hi
I would like to know if it’s possible to have a menu in the sidebard to show contents in a new grid instead of popup on icon click ? Do I need to configure a new lovelace panel for each item ? Or another way ? I have no idea how to develop someghing like this :
Thanks
Pretty much fixing / replacing until it works for you
I have not explored this but I have some ideas
-
as you said new lovelace panel for each item with navigation_path
-
maybe GitHub - DBuit/sidebar-card if it’s sticky
-
change the grid to sidebar and main, and within main have a conditinal card using input select and within that a subgrid with your selected content
2 Likes
I had the same problem, for which your proposed fix doesn’t seem to work
I “fixed” it by adding
- type: custom:mod-card
style:
swipe-card:
$: |
.swiper-container {
padding: 0px 0px 20px 0px !important;
}
card:
type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
But there’s probably a WAY more elegant fix for this problem
Maybe something where a custom:mod-card isn’t needed 
1 Like
Thanks for the tip !
I have some issues with Sidebar-card, I prefer to use native features of HA
@piteriuz did swipe-card height work for you?
@Giblet you don’t need mod-card if you style from themes
1 Like
Well yes, but I don;t know how to style it from themes
I have tried a lot of things, but my CSS knowledge is just not good enough
The css your proposed doesn’t seem to work for me (the swiper-container doesn’t receive the height:100%)
However I did test with the browser inspect tool and added height: 100% to the swiper-container and that did solve the issue
I just don’t know enough about css to know how to put that in themes.yaml
1 Like
Hello，can you share the code？thank you。
Is it possible to achieve the same look and feel just on the dashboard? I see " * Theme now only applies to dashboard and not other sections" in the recent changes, but the only way I get a complete theme (popup blur, background image, fonts, etc) is by selecting the “Tablet” theme in my user config.
This ends up messing up my other sections (like auto generated cards, Energy panel)) a few posts up, I had copied the one from configuration.yaml on github
HI Mattias,
do you see a chance to animated the weather icons with svg?
Previously heading size etc affected other parts like energy panel, for auto generated cards set another theme?
1 Like
Hi Mattias,
thank you. I dwonload th icons and copied in /local/wetter.
i try this
weather_button_style:
template: homekit_style
icon: >
[[[
if (entity.state === 'cloudy'){
return '/local/wetter/cloudy.svg'
}
]]]
and this:
{% if is_state("weather.home","cloudy") %} /local/wetter/cloudy.svg
but doent work.
I did it like this.
icon: |
[[[
if (states["weather.openweathermap"].state == "partlycloudy" && states["sun.sun"].state == "below_horizon") return '/local/custom_icons/weather/nt_partlycloudy.svg';
if (states["weather.openweathermap"].state == "partlycloudy" && states["sun.sun"].state == "above_horizon") return '/local/custom_icons/weather/partlycloudy.svg';
if (states["weather.openweathermap"].state == "mostlycloudy" && states["sun.sun"].state == "below_horizon") return '/local/custom_icons/weather/nt_mostlycloudy.svg';
if (states["weather.openweathermap"].state == "mostlycloudy" && states["sun.sun"].state == "above_horizon") return '/local/custom_icons/weather/mostlycloudy.svg';
if (states["weather.openweathermap"].state == "sunny") return '/local/custom_icons/weather/sunny.svg';
if (states["weather.openweathermap"].state == "cloudy") return '/local/custom_icons/weather/cloudy.svg';
if (states["weather.openweathermap"].state == "overcast") return '/local/custom_icons/weather/cloudy.svg';
if (states["weather.openweathermap"].state == "rainy") return '/local/custom_icons/weather/rain.svg';
if (states["weather.openweathermap"].state == "rain") return '/local/custom_icons/weather/rain.svg';
if (states["weather.openweathermap"].state == "possible light rain") return '/local/custom_icons/weather/chancerain.svg';
if (states["weather.openweathermap"].state == "possible drizzle") return '/local/custom_icons/weather/chancerain.svg';
if (states["weather.openweathermap"].state == "clear") return '/local/custom_icons/weather/clear.svg';
if (states["weather.openweathermap"].state == "clear-night") return '/local/custom_icons/weather/nt_clear.svg';
if (states["weather.openweathermap"].state == "windy") return '/local/custom_icons/weather/hazy.svg';
if (states["weather.openweathermap"].state == "fog") return '/local/custom_icons/weather/fog.svg';
if (states["weather.openweathermap"].state == "snowy") return '/local/custom_icons/weather/snow.svg';
if (states["weather.openweathermap"].state == "snowy-rainy") return '/local/custom_icons/weather/chanceflurries.svg';
]]] ```
2 Likes
I try to use the template sonarr_upcoming but it isn’t working.
I have this in the ui-lovelace.yaml:
- type: custom:button-card
entity: sensor.sonarr_upcoming_media
tap_action:
action: none
template:
- sonarr_upcoming
- media
- conditional_media
The sensor is working
data:
- title_default: $title
line1_default: $episode
line2_default: $release
line3_default: $rating - $runtime
line4_default: $number - $studio
icon: mdi:arrow-down-bold
- airdate: '2021-09-21T00:00:00Z'
release: $day, $time
flag: false
title: NCIS
episode: Blood in the Water
number: S19E01
runtime: 45
studio: CBS
rating: ★ 9.1
genres: Action, Adventure, Crime, Drama
poster: https://artworks.thetvdb.com/banners/posters/72108-5_t.jpg
fanart: https://artworks.thetvdb.com/banners/fanart/original/72108-4_t.jpg
- airdate: '2021-09-22T01:00:00Z'
release: $day, $time
flag: false
title: 'FBI: Most Wanted'
episode: Exposed (2)
number: S03E01
runtime: 45
studio: CBS
rating: ''
genres: Crime, Drama
poster: >-
https://artworks.thetvdb.com/banners/series/364088/posters/5ee0f6c47f23a_t.jpg
fanart: >-
https://artworks.thetvdb.com/banners/series/364088/backgrounds/62044236_t.jpg
friendly_name: Sonarr_Upcoming_Media
what am i missing
Hi ANdy,
itry this:
weather_button_style:
template: homekit_style
icon: |
[[[
if (states["weather.home"].state == "sunny") return '/local/custom_icons/wetter/sunny.svg';
if (states["weather.home"].state == "cloudy") return '/local/custom_icons/wetter/cloudy.svg';
if (states["weather.home"].state == "partlycloudy") return '/local/custom_icons/wetter/partlycloudy.svg';
]]]
styles:
card:
- background: 'linear-gradient(0deg, rgba(106,195,213,1) 0%, rgba(0,166,200,1) 100%)'
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
custom_fields:
temperature:
[top: 16.5%, right: 10%, width: 80px, height: 50px, position: absolute, letter-spacing: 0.03vw, font-size: 2.0rem]
custom_fields:
temperature: >
[[[
const temp = entity.attributes.temperature
return `${temp}°`
]]]
Whats wrong? It dosent work 
The Icon are in ```
/local/custom_icons/wetter/