Would you mind @Djal and @Peter_Westerlund to take that problem (and hopefully its solution) to a seperate thread? It would be very kind of you, thanks.
This thread has already 1220 replies and is terribly cluttered. This problem, as related to this thread it may seem, is not related. Please ask in a seperate thread or in the HACS thread for a solution. 
Thanks a lot, fingers crossed you can solve it.
Where is that? I’m new to HACS I don’t really know what that is but I just copied everything. Is HACS something that needs to be installed in a special way?
My ui-lovelace.yaml has most things commented away but it looks like this:
button_card_templates: !include button_card_templates.yaml
##########################################################################
# #
# * LOVELACE * #
# #
##########################################################################
views:
- title: Hemma
panel: true
path: default_view
cards:
- type: picture-elements
image: local/background.png
theme: tablet
elements:
#################################################
# #
# COVID-19 #
# #
#################################################
# - type: custom:hui-element
# card_type: markdown
# style:
# top: 93.65%
# left: 70.2%
# content: >
# {{ state_attr('sensor.covid_19_template', 'render') }}
# card_mod:
# class: markdown-covid19
# style:
# .: |
# ha-markdown {
# padding: 0 !important;
# }
# ha-markdown:
# $: |
# ha-markdown-element {
# opacity: 0.6;
# }
# ha-markdown-element > font > ha-icon {
# vertical-align: 3%;
# opacity: 0.4;
# }
##########################################################################
# #
# * SIDEBAR * #
# #
##########################################################################
- type: image
image: local/sidebar.png
style:
top: 49.24%
left: 10.6%
width: 21.5%
pointer-events: none
border-right: 2px solid rgba(58,69,73,0.2)
card_mod:
style:
hui-image$div: |
#brokenImage {
opacity: 0 !important;
}
#################################################
# #
# MARKDOWN #
# #
#################################################
# - type: custom:hui-element
# card_type: markdown
# style:
# top: 9%
# left: 11.1%
# card_mod:
# class: markdown-sidebar
# style:
# .: |
# ha-markdown {
# padding: 0 !important;
# }
# ha-markdown:
# $: |
# :host {
# opacity: 0.9;
# }
# ha-markdown-element > p > span {
# font-family: SF Text;
# font-size: 5vw;
# font-weight: 200;
# margin-left: -0.3vw;
# letter-spacing: -0.05vw;
# }
# ha-markdown-element > p > span > span {
# position: relative;
# top: -.09em;
# }
# content: >
# <span>{{ now().strftime('%H') }}<span>:</span>{{ now().strftime('%M') }}</span>
# <font color='#6a7377'><b>{{ states('sensor.sidebar_day') }}</b><br>
# <b>{{ states('sensor.sidebar_date') }}</b> </font><br>
# <b>{{ states('sensor.sidebar_greeting') }}</b>
# <b>{{ states('sensor.sidebar_active') }}</b>
# <font color='#6a7377'>
# <b>{{ states('sensor.sidebar_vacuum') }}</b>
# {{ states('sensor.sidebar_weather') }}
# {{ states('sensor.sidebar_skanetrafiken') }}
# {{ states('sensor.tvatta_countdown') }}
# {{ states('sensor.mathem_countdown') }}
# {% if is_state('switch.computer_imac', 'on') and
# states('sensor.imac_ip') == states('sensor.public_ip')
# or states('sensor.myip') == states('sensor.public_ip') %}
# {{'\u26A0\uFE0F'}} Kontrollera VPN-anslutning. {% endif %}
# {% if is_state('binary_sensor.plex_availability', 'off') %}
# {{'\u26A0\uFE0F'}} Plex är nere...{% endif %}
# {% if is_state('binary_sensor.nas_internet_access', 'off') %}
# {{'\u26A0\uFE0F'}} Kontrollera NAS internetåtkomst{% endif %}
# </font>
#################################################
# #
# INFO BUTTON #
# #
#################################################
- type: icon
icon: mdi:information-outline
title: null
style:
top: 87.41%
left: 10.7%
tap_action:
!include popup/sidebar_information.yaml
hold_action:
action: none
#################################################
# #
# UPDATES BUTTON #
# #
#################################################
- type: icon
icon: mdi:arrow-up-bold-circle-outline
title: null
style:
top: 87.41%
left: 16.55%
tap_action:
!include popup/sidebar_update.yaml
# hold_action:
# action: call-service
# service: homeassistant.update_entity
# service_data:
# entity_id: sensor.hacs
# card_mod:
# style: |
# :host {
# {% if is_state('binary_sensor.sidebar_update_color', 'on') %}
# color: rgb(35,78,106) !important;
# opacity: 1 !important;
# {% endif %}
# }
##########################################################################
# #
# * VARDAGSRUM * #
# #
##########################################################################
# - type: state-label
# entity: sensor.placeholder
# attribute: vardagsrum
# style:
# top: 9.15%
# left: 25.4%
#################################################
# #
# BELYSNING #
# #
#################################################
- type: custom:button-card
entity: light.belysning
style:
top: 20.35%
left: 30.31%
width: 10%
template:
- light
- icon_hue
#################################################
# #
# SKRIVBORD #
# #
#################################################
# - type: custom:button-card
# entity: light.skrivbord
# style:
# top: 20.35%
# left: 41.31%
# width: 10%
# template:
# - light
# - icon_shade
#################################################
# #
# TV #
# #
#################################################
# - type: custom:button-card
# entity: media_player.sony_bravia
# triggers_update: input_boolean.sony_bravia
# style:
# top: 37.9%
# left: 30.31%
# width: 10%
# hold_action:
# !include popup/vardagsrum_tv.yaml
# template:
# - base
# - icon_tv
# - loader
#################################################
# #
# PLAYSTATION #
# #
#################################################
# - type: custom:button-card
# entity: switch.playstation_5
# triggers_update: input_boolean.playstation_5
# hold_action:
# !include popup/vardagsrum_playstation.yaml
# style:
# top: 37.9%
# left: 41.31%
# width: 10%
# template:
# - base
# - icon_ps5
# - loader
##########################################################################
# #
# * STUDIO * #
# #
##########################################################################
# - type: state-label
# entity: sensor.placeholder
# attribute: studio
# style:
# top: 9.15%
# left: 50.2%
#################################################
# #
# DATORLAMPA #
# #
#################################################
# - type: custom:button-card
# entity: light.datorlampa
# style:
# top: 20.35%
# left: 55.18%
# width: 10%
# template:
# - light
# - icon_hue
#################################################
# #
# TAKLAMPOR #
# #
#################################################
# - type: custom:button-card
# entity: light.taklampor
# style:
# top: 20.35%
# left: 66.14%
# width: 10%
# template:
# - light
# - icon_spot
#################################################
# #
# DATOR #
# #
#################################################
# - type: custom:button-card
# entity: switch.computer_imac
# triggers_update:
# - input_boolean.computer_imac
# - input_boolean.computer_lock
# - script.home_leave
# style:
# top: 37.9%
# left: 55.18%
# width: 10%
# hold_action:
# !include popup/studio_dator.yaml
# template:
# - base
# - icon_imac
# - loader
# - computer_lock
#################################################
# #
# MONITORER #
# #
#################################################
# - type: custom:button-card
# entity: switch.wemo_monitors
# triggers_update: sensor.monitors_volume
# style:
# top: 37.9%
# left: 66.14%
# width: 10%
# hold_action:
# !include popup/studio_monitorer.yaml
# template:
# - base
# - icon_monitors
# - circle
# variables:
# circle_input: >
# [[[ return states['sensor.monitors_volume'].state; ]]]
##########################################################################
# #
# * SOVRUM * #
# #
##########################################################################
# - type: state-label
# entity: sensor.placeholder
# attribute: sovrum
# style:
# top: 9.15%
# left: 75.1%
#################################################
# #
# SÄNGLAMPOR #
# #
#################################################
# - type: custom:button-card
# entity: light.sanglampor
# style:
# top: 20.35%
# left: 80.05%
# width: 10%
# template:
# - light
# - icon_lamp
#################################################
# #
# AIR PURIFIER #
# #
#################################################
# - type: custom:button-card
# entity: fan.air_purifier
# triggers_update: input_boolean.air_purifier
# style:
# top: 20.35%
# left: 91.05%
# width: 10%
# hold_action:
# !include popup/sovrum_luftrenare.yaml
# template:
# - base
# - icon_air_purifier
# - loader
# - circle
# variables:
# circle_input: >
# [[[ return parseInt(entity.attributes.percentage_step); ]]]
#################################################
# #
# FAN #
# #
#################################################
# - type: custom:button-card
# entity: fan.sovrum_anslut
# triggers_update: input_boolean.sovrum_anslut
# style:
# top: 37.9%
# left: 80.05%
# width: 10%
# hold_action:
# !include popup/sovrum_flakt.yaml
# template:
# - base
# - icon_fan
# - loader
# - circle
# variables:
# circle_input: >
# [[[ return parseInt(entity.attributes.percentage_step); ]]]
#################################################
# #
# TV2 #
# #
#################################################
# - type: custom:button-card
# entity: media_player.samsung_tv_remote
# triggers_update: input_boolean.samsung_tv_remote
# style:
# top: 37.9%
# left: 91.05%
# width: 10%
# hold_action:
# !include popup/sovrum_tv2.yaml
# template:
# - base
# - icon_tv
# - loader
##########################################################################
# #
# * MEDIA * #
# #
##########################################################################
# - type: state-label
# entity: sensor.placeholder
# attribute: media
# style:
# top: 53.4%
# left: 25.4%
# - type: custom:swipe-card
# start_card: 1
# parameters:
# roundLengths: true
# effect: coverflow
# speed: 650
# spaceBetween: 20
# threshold: 7
# coverflowEffect:
# rotate: 80
# depth: 300
# style:
# top: 56.55%
# left: 35.8%
# width: 20.97%
# height: 1px
# cards:
# - type: picture-elements
# image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' /%3E"
# elements:
#################################################
# #
# RECENTLY DOWNLOADED #
# #
#################################################
# - type: conditional
# conditions:
# - entity: input_select.conditional_media
# state: Senast nedladdat
# elements:
# - type: custom:button-card
# entity: sensor.plex_recently_added
# tap_action:
# action: none
# style:
# top: 50%
# left: 50%
# width: 100%
# template:
# - conditional_media
# - recently_downloaded
# - icon_plex
#################################################
# #
# APPLE TV VARDAGSRUM #
# #
#################################################
# - type: conditional
# conditions:
# - entity: input_select.conditional_media
# state: Vardagsrum
# elements:
# - type: custom:button-card
# entity: media_player.vardagsrum
# style:
# top: 50%
# left: 50%
# width: 100%
# template:
# - conditional_media
# - icon_apple_tv
#################################################
# #
# APPLE TV SOVRUM #
# #
#################################################
# - type: conditional
# conditions:
# - entity: input_select.conditional_media
# state: Sovrum
# elements:
# - type: custom:button-card
# entity: media_player.sovrum
# style:
# top: 50%
# left: 50%
# width: 100%
# template:
# - conditional_media
# - icon_apple_tv
#################################################
# #
# SPOTIFY #
# #
#################################################
# - type: conditional
# conditions:
# - entity: input_select.conditional_media
# state: Spotify
# elements:
# - type: custom:button-card
# entity: media_player.spotify
# style:
# top: 50%
# left: 50%
# width: 100%
# template:
# - conditional_media
# - icon_spotify
#################################################
# #
# GOOGLE NEST MINI #
# #
#################################################
# - type: conditional
# conditions:
# - entity: input_select.conditional_media
# state: Google Nest Mini
# elements:
# - type: custom:button-card
# entity: media_player.google_nest_mini
# style:
# top: 50%
# left: 50%
# width: 100%
# template:
# - conditional_media
# - icon_nest_mini
#################################################
# #
# * SMALL MEDIA CONTROLS * #
# #
#################################################
# - type: picture-elements
# image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' /%3E"
# elements:
# - type: custom:button-card
# entity: media_player.vardagsrum
# style:
# top: 23.9%
# left: 23.8%
# width: 47.7%
# template:
# - media
# - icon_apple_tv
# - type: custom:button-card
# entity: media_player.sovrum
# style:
# top: 23.9%
# left: 76.2%
# width: 47.7%
# template:
# - media
# - icon_apple_tv
# - type: custom:button-card
# entity: media_player.spotify
# name: Spotify
# style:
# top: 76.2%
# left: 23.8%
# width: 47.7%
# template:
# - media
# - icon_spotify
# - type: custom:button-card
# entity: media_player.google_nest_mini
# name: Nest Mini
# style:
# top: 76.2%
# left: 76.2%
# width: 47.7%
# template:
# - media
# - icon_nest_mini
##########################################################################
# #
# * ÖVRIGT * #
# #
##########################################################################
# - type: state-label
# entity: sensor.placeholder
# attribute: ovrigt
# style:
# top: 53.4%
# left: 50.2%
#################################################
# #
# BADRUM #
# #
#################################################
# - type: custom:button-card
# entity: light.badrum
# style:
# top: 64.5%
# left: 55.18%
# width: 10%
# template:
# - light
# - icon_bathroom
#################################################
# #
# FLÄKT2 #
# #
#################################################
# - type: custom:button-card
# entity: fan.studio_wemo
# style:
# top: 64.5%
# left: 66.14%
# width: 10%
# hold_action:
# !include popup/studio_flakt.yaml
# template:
# - base
# - icon_fan2
#################################################
# #
# GARDEROB #
# #
#################################################
# - type: custom:button-card
# entity: light.kladkammare
# style:
# top: 82.1%
# left: 55.18%
# width: 10%
# template:
# - light
# - icon_closet
#################################################
# #
# HALL #
# #
#################################################
# - type: custom:button-card
# entity: light.hall
# style:
# top: 82.1%
# left: 66.14%
# width: 10%
# template:
# - light
# - icon_spot
##########################################################################
# #
# * HEMMA * #
# #
##########################################################################
# - type: state-label
# entity: sensor.placeholder
# attribute: hemma
# style:
# top: 53.4%
# left: 75.1%
#################################################
# #
# MATTIAS #
# #
#################################################
# - type: custom:button-card
# entity: person.mattias
# triggers_update: sensor.time
# style:
# top: 64.5%
# left: 80.05%
# width: 10%
# tap_action:
# !include popup/hemma_mattias.yaml
# hold_action:
# action: none
# template: person
#################################################
# #
# SANJA #
# #
#################################################
# - type: custom:button-card
# entity: person.sanja
# triggers_update: sensor.time
# style:
# top: 64.5%
# left: 91.05%
# width: 10%
# tap_action:
# !include popup/hemma_sanja.yaml
# hold_action:
# action: none
# template: person
#################################################
# #
# STÄNG ALLT #
# #
#################################################
# - type: custom:button-card
# entity: script.home_leave
# state_display: Auto
# style:
# top: 82.1%
# left: 80.05%
# width: 10%
# hold_action:
# action: none
# styles:
# card:
# - transition: all 0.3s ease-out
# template:
# - base
# - icon_away
#################################################
# #
# HEMMA #
# #
#################################################
# - type: custom:button-card
# entity: script.home_arrive
# state_display: Auto
# style:
# top: 82.1%
# left: 91.05%
# width: 10%
# hold_action:
# action: none
# styles:
# card:
# - transition: all 0.3s ease-out
# template:
# - base
# - icon_home
Continuing in PM
Is it possible to include the shopping integrasjon in picture elements card, or maybe have an popup to display it? Im using this fantastic UI on my touch monitor in the kitchen:)
I know its been over year, but been chipping away at copying this design. I’m attempting a simple floor plan in storage mode… I’ve added the .js for light-slider-card to my config but no matter how i try to add it, i still get the custom card does not exist error. Any idea what i could be doing wrong?
Pretty happy with my current setup, but I am looking for the next project.
Share your dashboard that’s is inspired by Mathias design.
I will start with mine.
Super-nice graphics, Chapeau!
Dude! You absoloutely right. I don’t know who tired I was when posting that. Sorry.
Have a nice sunday!
Hi all,
I can not find in the github of @Mattias_Persson the template: color_light. This would allow me to end the light popups.
Thank you
Thank you very much for the best looking UI!
I’m trying to copy most of your design and am totally new to this.
My lights are shelly devices (shelly 1 and shelly dimmer).
Hold_action doesn’t work for me.
I installed light-popup-card via HACS. I also have your ui-lovelace and button_card_templates.yaml
If I hold the card, no popup comes up. What can I do for troubleshooting?
How does the UI know, that my shelly 1 (only switch, no dimming possible) doesn’t need any hold_action? hold_action is defined under “light” in Button_card_Templates.yaml → do I need to define a new template for lights, that wont let you dim?
Thank you so much in advance!
Best regards
Have anyone experienced that the light dimmer is not working for light groups anymore. Now it just toggles on and off
Can you please share how you where able to expand the markdown card with all the contents? I am having the same issue you did .
I just wrote in another thread about that. I just used light-popup-card with a light group and i can not make it work with a slider.
I’m not sure if this is the correct way to expand the markdown card.
I retained this text (where tablet is the theme used by Matthias)
Can u give code?
Hey everybody.
I feel a little stupid for asking this, but I am new to HA / GitHub and all that… I can’t figure out how to install/activate/customize this awesome UI. I (think) I installed it via HACS, but can’t figure out the next steps. Is there some sort of walkthrough somewhere?
Thank you so much!
Hello,
I wish it was this simple. You need to install the custom components he uses, then start figuring out the code he has made and adapt it to your situation. Not to discourage you, this is a lot of work ! There are some easy videos to get you started on youtube : Beginner's Guide on the Lovelace Dashboard Editor - YouTube
Regards,
Jens
Hello all.
First of all thanks Mattias for your great work.
I have ported your implementation on my HA environment and everything is working correctly.
Now I’m trying to customize it to my needs and I have a doubt.
I can see that all items position is referenced using % related to the background card.
Is there any graphical tool to calculate these values? I would like to move things around and recalculating manually all % may be complex!
Thanks again
Dave
Hi All
I want to make device specific CSS in order to optimize my dashboard for both phone a extra large screens.
Where would you create this CSS? Can you do it in the themes.yaml file?
Thanks
