A different take on designing a Lovelace UI

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 :



Pretty much fixing / replacing until it works for you


I have not explored this but I have some ideas


I had the same problem, for which your proposed fix doesn’t seem to work
I “fixed” it by adding

              - type: custom:mod-card
                    $: |
                      .swiper-container {            
                        padding: 0px 0px 20px 0px !important;        
                  type: custom:swipe-card
                  start_card: 1
                    roundLengths: true
                    effect: coverflow
                    speed: 650
                    spaceBetween: 20
                    threshold: 7
                      rotate: 80
                      depth: 300

But there’s probably a WAY more elegant fix for this problem
Maybe something where a custom:mod-card isn’t needed :stuck_out_tongue:

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

Do you mean if it’s possible? Then yes

Hi Mattias,

thank you. I dwonload th icons and copied in /local/wetter.

i try this

    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';
              ]]] ```

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
                      action: none
                      - sonarr_upcoming
                      - media
                      - conditional_media

The sensor is working

  - 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: >-
    fanart: >-
friendly_name: Sonarr_Upcoming_Media

what am i missing

Hi ANdy,

itry this:

    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';
        - 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)']   
          [top: 16.5%, right: 10%, width: 80px, height: 50px, position: absolute, letter-spacing: 0.03vw, font-size: 2.0rem]
      temperature: >
          const temp = entity.attributes.temperature 
          return `${temp}°`

Whats wrong? It dosent work :frowning: The Icon are in ```

Icons need to be in the www folder. :slight_smile:

If you don’t have it make one inside the config folder.

I have this folder: