A different take on designing a Lovelace UI

Excelente. In my case the background is transparent. I copied a template of yours to later modify it but it looks like this. Is it something from the theme.yaml?

2 Likes

try animation-direction: reverse; here

Morning,

why is my font color in popups grey and not visible ?

I am searching for what i did wrong but didn’t get it.

Set Theme to dark.

1 Like

Thanks a lot :+1:

Hey all
I am trying to integrate the spotify card (Spotify Lovelace Card) in to the media card instead of the PLEX one. I am hoping for some assistance on getting the styling equal to what the rest is like, I tried to modify the direction @Mattias_Persson gave for @chezpaul2 on his picture gallery (A different take on designing a Lovelace UI - #2203 by Mattias_Persson)( but it’s not where i want it to be yet. Anyone able to help? I am missing the round corners, the right amount of spacing inbetween the 4 playlists and the size of the tiles must be a bit larger

- type: conditional
  conditions:
    - entity: select.conditional_media
      state_not: Kantoor

    - entity: select.conditional_media
      state_not: Keuken
  card:
    type: custom:spotify-card
    account: default
    spotify_entity: media_player.spotify_mart
    playlist_type: discover-weekly
    grid_covers_per_row: '2'
    limit: 4
    country_code: NL
    display_style: grid
    card_mod:
      style: |
        ha-card {
          border-radius: calc(var(--custom-button-card-border-radius) / 2) !important;  /* card - rounded corners */
          aspect-ratio: 2/2 !important;  /* card - square */
          margin: 0px !important;  /* remove card margins to line up with rest of dashboard */
        }
        .grid{
          object-fit: cover !important;  /* fill the whole card */
          aspect-ratio: 1/1;  /* needed for object-fit */
          border-radius: calc(var(--custom-button-card-border-radius) / 2) !important;  /* card - rounded corners */
          margin: 0px !important;  /* remove card margins to line up with rest of dashboard */
        }
        .btn {
          top: 50% !important;  /* center buttons */
        }
        .grid-item{
          border-radius: var(--button-card-border-radius) !important;
          object-fit: cover !important;  /* fill the whole card */
          aspect-ratio: unset;  /* undo image aspect-ratio when clicked */
        }
        .grid-item-album-image{
          border-radius: var(--button-card-border-radius) !important;
          object-fit: cover !important;  /* fill the whole card */
          aspect-ratio: unset;  /* undo image aspect-ratio when clicked */
          margin: 0px !important;  /* remove card margins to line up with rest of dashboard */
        }
        .grid-item:hover{
          box-shadow:none !important;
        }
        #header{
          display:none !important;
        }
        #footer{
          display:none !important;
        }
        .playback-controls{
          display:none !important;
        }
        #header-track{
          display:none;
        }
        #content{
          border: 0px !important; 
        }
2 Likes

Hi Guys,

The upper row is no longer legible or too high.
Does anyone know how to change the height?

Hey all, lovely work. I made some changes to the dashboard, and use some non button cards now. How can I enable tilt on cards without placing them in a button card?

I think we need to change the light.yaml in button_card_templates that the light popups work:

light:
  template:
    - base
    - circle
    - loader
  double_tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      data:
        title: >
          [[[
            return !entity || entity.attributes.friendly_name;
          ]]]        
        content:
          type: custom:mod-card
          card_mod:
            style:
              hui-entities-card:
                $: |
                  #states {
                    padding-top: 0.8em;
                  }
          card:
            type: entities
            entities: >
              [[[
                if (entity) {
                    let lights = [],
                        id = Boolean(entity.attributes.entity_id)
                            ? [entity.entity_id].concat(entity.attributes.entity_id)
                            : [entity.entity_id];

                    for (let i = 0; i < id.length; i++) {
                        lights.push({
                            "type": "custom:mushroom-light-card",
                            "entity": id[i],
                            "fill_container": false,
                            "primary_info": "name",
                            "secondary_info": "state",
                            "icon_type": "icon",
                            "show_brightness_control": true,
                            "use_light_color": true,
                            "show_color_temp_control": true,
                            "show_color_control": true,
                            "collapsible_controls": true
                        });
                    }
                    return lights;
                }
              ]]]
  variables:
    circle_input: >
      [[[
        if (entity) {
            // if light group get brightness from child to remove bounce
            let child = entity.attributes.entity_id,
                brightness = child && states[child[0]].attributes.brightness
                    ? Math.round(states[child[0]].attributes.brightness / 2.54)
                    : Math.round(entity.attributes.brightness / 2.54);
            return brightness === 0 && entity.state !== 'off'
                ? 1
                : brightness
        }
      ]]]
    circle_input_unit: '%'

Im not sure, if everything is correct. ^^"

For those that are interested, I managed to get it working except for the TILT part. Please let me know if you want to use it also, I can share my code. Hoping someone is able to help me getting the TILT work on this card also… :smiley:
ezgif.com-gif-maker(1)

9 Likes

I’m interested in !!

Yes please! :smiley:

here is the relevant part. Please note that I changes the input select part so the conditions are wrong, but the styling should work.

@klidberg @Tarlak

          - type: custom:swipe-card
            parameters:
              speed: 550
              spaceBetween: 40
              threshold: 5
            cards:
              - type: horizontal-stack
                  #####################################
                  #          MEDIA VAN MART           #
                  #####################################
                cards:

                  - type: conditional
                    conditions:
                      - entity: select.conditional_media_mart
                        state_not: Spotify Mart
                    card:
                      type: custom:spotify-card
                      account: mart
                      spotify_entity: media_player.spotify_mart
                      playlist_type: discover-weekly
                      grid_covers_per_row: '2'
                      limit: 4
                      country_code: NL
                      display_style: grid
                      default_device: Living room and Kitchen

                      card_mod:
                        style: |
                          ha-card {
                            border-radius: calc(var(--custom-button-card-border-radius) / 2) !important;  /* card - rounded corners */
                            aspect-ratio: 2/2 !important;  /* card - square */
                            margin: 0px !important;  /* remove card margins to line up with rest of dashboard */
                            padding: 0% !important;
                          }
                          .grid{
                            object-fit: cover !important;  /* fill the whole card */
                            aspect-ratio: 1/1;  /* needed for object-fit */
                            border-radius: calc(var(--custom-button-card-border-radius) / 2) !important;  /* card - rounded corners */
                            margin: 0px !important;  /* remove card margins to line up with rest of dashboard */
                            gap: 5% !important;
                          }
                          .btn {
                            top: 50% !important;  /* center buttons */
                          }
                          .grid-item{
                            border-radius: var(--button-card-border-radius) !important;
                            object-fit: cover !important;  /* fill the whole card */
                            aspect-ratio: unset;  /* undo image aspect-ratio when clicked */
                            box-shadow:none !important;
                            color: transparent !important;
                          }
                          .grid-item-album-image img{
                            border-radius: var(--button-card-border-radius) !important;
                            object-fit: cover !important;  /* fill the whole card */
                            aspect-ratio: unset;  /* undo image aspect-ratio when clicked */
                            margin: 0px !important;  /* remove card margins to line up with rest of dashboard */
                          }
                          .grid-item:hover{
                            box-shadow:none !important;
                            color: transparent !important;
                          }
                          .grid-item-album-image.playing{
                            border-radius: var(--button-card-border-radius) !important;
                          }
                          #header{
                            display:none !important;
                          }
                          #footer{
                            display:none !important;
                          }
                          .playback-controls{
                            display:none !important;
                          }
                          #header-track{
                            display:none;
                          }
                          #content{
                            border: 0px !important;
                            background-color: transparent !important;
                          }

                  - type: conditional
                    conditions:
                      - entity: media_player.spotify_mart
                        state_not: idle
                      - entity: media_player.spotify_mart
                        state_not: 'off'
                      - entity: media_player.spotify_mart
                        state_not: unknown
                      - entity: media_player.spotify_mart
                        state_not: unavailable
                    card:
                      type: custom:button-card
                      entity: media_player.spotify_mart
                      template:
                        - conditional_media
                        - icon_spotify
8 Likes

Thanks !! :star_struck:

Hello all,
I’m trying to modify the update button logic from watchtower to home assistant update service.

I created a test button in a temporary dashboard and it works, here’s the code:

type: custom:button-card
entity: sensor.current_version
name: Aggiorna Home Assistant
variables:
  latest: sensor.home_assistant_versions
  latest_beta: sensor.home_assistant_versions_beta
tap_action:
  action: call-service
  service: update.install
  service_data:
    entity_id: update.home_assistant_core_update

i then tried to port this code inside the update yaml but it loks like it is not working:

          - type: custom:button-card
            entity: sensor.current_version
            name: Aggiorna Home Assistant
            variables:
              latest: sensor.home_assistant_versions
              latest_beta: sensor.home_assistant_versions_beta
            tap_action:
              action: call-service
              service: update.install
              service_data:
                entity_id: update.home_assistant_core_update
            template: updates_hass_icon_name

Does anyone has an idea why it is not working?

Thanks for your help!
Davide

I did some digging and thought I’d give an update.

I’m not clever enough to find and solve the actual issue. But disabling tilt from all devices solved my issues.

Not a big loss for me, as I wasn’t getting the the floating card element that I’ve seen in animated examples here, so it felt rather flat still.

Hello everyone,

I need some help if anyone is so kind. I’m trying to make menu title dynamic as shown in this video. Any ideas how to do it?

Video

Hi
Does anyone know how to delete the scroll bars ?
Thanks

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: NAS
    style: >
      --popup-max-width: calc(385px + 385px);
      --ha-card-border-radius: 0;
    card_mod:
      style:
        layout-card:
          $grid-layout$:
            # card divider border
            .: |
              #root {
                  margin: -24px 0 !important;
              }
            hui-entities-card:
              $: |
                .card-content {
                  padding: var(--tablet-popup-content-padding);
                  padding-bottom: 0.8em;
                }
                ha-card {
                  border-right: 1.5px solid rgba(0, 0, 0, 0.2);
                  border-radius: 0;
                  transition: none;
                }
                /* portrait */
                @media screen and (max-width: 1200px) {
                  ha-card {
                    border-right: none;
                    border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
                  }
                }
              $hui-horizontal-stack-card:
                # horizontal bottom buttons
                $: |
                  #root {
                    justify-content: space-evenly;
                    margin-top: 1.7em;
                    max-width: 82vw; /* iphonex */
                  }
    content:
      type: custom:layout-card
      layout_type: custom:grid-layout
      layout:
        margin: 0
        grid-template-columns: 385px 385px
        grid-template-rows: 1fr
        grid-template-areas: |
          "hass nas"
        mediaquery:
          #portrait
          "(max-width: 1200px)":
            grid-template-columns: 1fr
            grid-template-rows: repeat(2, 1fr)
            grid-template-areas: |
              "hass"
              "nas"
      cards:

        ### HOME ASSISTANT

        - type: entities
          view_layout:
            grid-area: hass
          title: Home Assistant
          show_header_toggle: false
          card_mod:
            class: header
          entities:
            - entity: sensor.current_version
              name: Version actuelle
              icon: mdi:home-assistant

            - entity: sensor.template_hass_next_release

            - entity: sensor.db_size
              icon: mdi:database

            - entity: sensor.home_assistant_log_size
              name: Log
              icon: mdi:file-document

            - entity: sensor.uptime
              name: Dernier redémarrage
              icon: mdi:update

        ### Unraid

        - type: entities
          view_layout:
            grid-area: nas
          title: Unraid
          show_header_toggle: false
          card_mod:
            class: header
            # no border on last card
            style: |
              ha-card {
                border: none !important;
              }
          entities:
            - type: custom:bar-card
              width: 55%
              height: 2em
              decimal: 0
              unit_of_measurement: '%'
              positions: &bar_card_positions
                icon: outside
                indicator: 'off'
                name: outside
              severity: &bar_card_severity
                - color: '#6d2525'
                  from: 85
                  to: 999
              entity_row: true
              entities:

                - entity: sensor.glances_cpu_used
                  name: Processor
                  tap_action:
                    action: call-service
                    service: homeassistant.update_entity
                    service_data:
                      entity_id: sensor.glances_cpu_used

                - entity: sensor.glances_ram_used_percent
                  name: RAM - 16GB
                  tap_action:
                    action: call-service
                    service: homeassistant.update_entity
                    service_data:
                      entity_id: sensor.glances_ram_used_percent

                - entity: sensor.glances_mnt_disk1_used_percent
                  name: Stockage 4TB
                  tap_action:
                    action: call-service
                    service: homeassistant.update_entity
                    service_data:
                      entity_id: sensor.glances_mnt_disk1_used_percent

                - entity: sensor.glances_mnt_cache_used_percent
                  name: Cache 1TB
                  tap_action:
                    action: call-service
                    service: homeassistant.update_entity
                    service_data:
                      entity_id: sensor.glances_mnt_cache_used_percent

            - type: custom:hui-horizontal-stack-card
              cards:
                - type: custom:button-card
                  name: Adguard
                  icon: mdi:shield
                  entity: switch.adguard_protection
                  template:
                    - icon_name
                    - icon_adguard
          
          footer:
            type: custom:mini-graph-card
            show:
              name: false
              icon: false
              state: false
              legend: true
            entities:
              - entity: sensor.deluge_down_speed
                name: Download
              - entity: sensor.deluge_up_speed       
                name: Upload
2 Likes

Thank you!