Iām trying to edit the visual appearance of the popups. They all have pretty extreme rounded corners and I want to play a little with that. However, I canāt seem to find any border-radius related css property or anything else. Where is this border-radius being set?
Hello together,
I would like to create another minimalist dashboard for my phone. Which I would like to completely redesign.
I have created a new .yaml file under āui_lovelace_minimalist\dashboardā.
But how do I include it in Homeassistant?
Same issue here.
In the empty side (the right one), if you refresh sometimes the page, you will see the error of the popup.
Currently Iām using two popups, both of them worked perfectly before the last update. Now I have those errors:
So if you want color for your generic cards again: Here you are:
Templates
custom_icon_color:
variables:
icon_color: theme
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- "icon_more_info"
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
styles:
img_cell:
- background-color: "[[[ return 'rgba(var(--color-' + variables.icon_color + '),0.05)'; ]]]"
icon:
- color: "[[[ return 'rgba(var(--color-' + variables.icon_color + '),1)'; ]]]"
custom_random_icon_color:
template: custom_icon_color
variables:
icon_color: >
[[[
let colors = ['red', 'blue', 'green', 'yellow'];
let colorCount = Math.floor(Math.random() * colors.length);
return colors[colorCount];
]]]
Usage
- type: "custom:button-card"
name: Download
icon: mdi:download
variables:
icon_color: green
template:
- card_generic
- custom_icon_color
entity: your.entity
# Random Colors
- type: "custom:button-card"
name: Download
icon: mdi:download
template:
- card_generic
- custom_random_icon_color
entity: your.entity
Same issueā¦ hope there is a fix soon
Mind sharing your theme adjustment to get that nice font?
Yes, here you are:
- create config/www/style.css and put this into:
@import url('https://fonts.googleapis.com/css?family=Quicksand');
body {
font-family: "Quicksand", sans-serif;
}
html {
font-family: "Quicksand", sans-serif;
--paper-font-common-base_-_font-family: 'Quicksand', sans-serif;
}
- add this to your resources:
- url: https://fonts.googleapis.com/css?family=Quicksand
type: css
- url: /local/styles.css?v=0.05
type: css
- refresh your frontend and cache. Maybe you have to delete it manually. Thats it.
Ok I have restarted the whole installation and cleared the cache so the default installation (with āinclude custom cardsā enabled as part of the installation).
The default dashboard does now come up - I noticed two entries; one being ui-lovelace.yaml
in the dashboard
folder and the other being adaptive-dash/adaptive-ui.yaml
.
I want to separate the various rooms into different files and have done the following:
- Edited
ui-lovelance.yaml
as follows
---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
title: "Minimalist"
background: "var(--background-image)"
views:
!include views/home.yaml
- Created
views/home.yaml
in thedashboard
folder with the following content (understand I need to customise the entities etc. but wanted to get the card up first to confirm the overall folder structure)
title: "Home"
path: "home"
cards:
- type: "custom:button-card"
template: "card_welcome_scenes"
#triggers_update: input_boolean.<Your_boolean>
#entity: input_boolean.<Your_boolean>
variables:
ulm_card_welcome_scenes_collapse: input_boolean.<Your_boolean> #OPTIONAl --> uncomment also entity or triggers_update
ulm_weather: "weather.YOUR_WEATHERPROVIDER"
entity_1:
entity_id: "<YOUR_ENTITY>"
icon: "mdi:home" #OPTIONAL
name: "YOUR_NAME" #OPTIONAL
color: "blue"
entity_2:
entity_id: "<YOUR_ENTITY>"
icon: "mdi:home" #OPTIONAL
name: "YOUR_NAME" #OPTIONAL
color: "red"
entity_3:
entity_id: "<YOUR_ENTITY>"
icon: "mdi:home" #OPTIONAL
name: "YOUR_NAME" #OPTIONAL
color: "green"
entity_4:
entity_id: "<YOUR_ENTITY>"
icon: "mdi:home" #OPTIONAL
name: "YOUR_NAME" #OPTIONAL
color: "purple"
entity_5:
entity_id: "<YOUR_ENTITY>"
icon: "mdi:home" #OPTIONAL
name: "YOUR_NAME" #OPTIONAL
color: "yellow"
entity_6:
entity_id: "<YOUR_ENTITY>"
icon: "mdi:home" #OPTIONAL
name: "YOUR_NAME" #OPTIONAL
color: "pink"
entity_7:
entity_id: "<YOUR_ENTITY>"
icon: "mdi:home" #OPTIONAL
name: "YOUR_NAME" #OPTIONAL
color: "yellow"
But when I navigate to http://192.168.2.142:8123/ui-lovelace-minimalist
the dashboard is empty
Any idea where I go wrong here?
@tfmeier : before trying custom cart, try something easier (maybe because of the entities you have some issues and itās not appearing).
e.g.:
title: "home"
path: "home"
#theme: "minimalist-desktop"
cards:
- type: vertical-stack
cards:
- type: "custom:button-card"
template: card_title
name: bla bla bla
label: "bing bang bong"
Thanks @adynis.
I have created a standard weather card with the correct entity and the dashboard still stays blank. Iām accessing the dashboard at http://192.168.2.142:8123/ui-lovelace-minimalist
title: "home"
path: "home"
theme: "minimalist-desktop"
cards:
- type: "custom:button-card"
template: card_weather
entity: weather.forecast_homeassistant
variables:
ulm_card_weather_name: " "
ulm_card_weather_primary_info:
- wind_speed
- precipitation_probability
ulm_card_weather_backdrop:
fade: true
What Iām not entirely sure about is the usage of the path
variable. Couldnāt really find anything on path
.
What exactly do we specify here and is there a need to configure anything in Home Assistant at all to match this?
According to the docs you need to provide list items underneath views:
So try changing this:
to:
---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
title: "Minimalist"
background: "var(--background-image)"
views:
- !include views/home.yaml
The path is an extension to the URL of your dashboard view. The format is internal_ip:port/dashboard_name/path
or in your case http://192.168.2.142:8123/ui-lovelace-minimalist/home
.
Great. Making some progress. Thanks. I had taken this code from somewhere else.
See the updated URL using the /home/
suffix so thatās clear as well now.
The only thing still going wrong is the button-card doesnāt load
the ui_lovelave_minimalist/custom_components/custom_cards/button-card
folder is there and the button-card.js
file is present as well.
Looking at the page source in the browser the button-card is loaded. Cleared the cache and used a few different browsers.
<!DOCTYPE html><html><head><link rel="modulepreload" href="/frontend_latest/core.f2e094cd.js" crossorigin="use-credentials"><link rel="modulepreload" href="/frontend_latest/app.933bd729.js" crossorigin="use-credentials"><meta charset="utf-8"><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"><link rel="icon" href="/static/icons/favicon.ico"><meta name="viewport" content="width=device-width,user-scalable=no,viewport-fit=cover,initial-scale=1"><style>body{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;margin:0;padding:0;height:100%}</style><title>Home Assistant</title><link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4"><link rel="apple-touch-icon" sizes="180x180" href="/static/icons/favicon-apple-180x180.png"><meta name="apple-itunes-app" content="app-id=1099568401"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="Home Assistant"><meta name="msapplication-square70x70logo" content="/static/icons/tile-win-70x70.png"><meta name="msapplication-square150x150logo" content="/static/icons/tile-win-150x150.png"><meta name="msapplication-wide310x150logo" content="/static/icons/tile-win-310x150.png"><meta name="msapplication-square310x310logo" content="/static/icons/tile-win-310x310.png"><meta name="msapplication-TileColor" content="#03a9f4ff"><meta name="mobile-web-app-capable" content="yes"><meta name="referrer" content="same-origin"><meta name="theme-color" content="#03A9F4"><meta name="color-scheme" content="dark light"><style>html{background-color:var(--primary-background-color,#fafafa);color:var(--primary-text-color,#212121)}@media (prefers-color-scheme:dark){html{background-color:var(--primary-background-color,#111);color:var(--primary-text-color,#e1e1e1)}}body{font-family:Roboto,Noto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;height:100vh;margin:0;padding:0}#ha-launch-screen{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}#ha-launch-screen svg{width:170px;flex-shrink:0}#ha-launch-screen .ha-launch-screen-spacer{flex:1}</style></head><body><div id="ha-launch-screen"><div class="ha-launch-screen-spacer"></div><svg version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><rect fill="#41bdf5" width="200" height="200" ry="16.4"/><path fill="#fff" d="m38.416 165.29v-53.456h-13.901a3.7332 3.7332 0 0 1-2.662-6.3504l74.804-76.084c1.8068-1.8376 4.7612-1.8628 6.5992-0.056l0.048 0.048 39.04 39.518v-7.3188a3.1112 3.1112 0 0 1 3.1112-3.1112h12.964a3.1112 3.1112 0 0 1 3.1116 3.1112v26.855l16.627 17.047a3.7332 3.7332 0 0 1-2.6728 6.34h-13.954v53.456a3.1112 3.1112 0 0 1-3.1112 3.1112h-116.89a3.1112 3.1112 0 0 1-3.1112-3.1112zm82.556-65.304a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0176 5.996 6.0176c0.9256 0 1.802-0.2108 2.5848-0.5868l8.6072 8.6384v8.3672l-10.792 10.831v-7.936a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v11.947l-9.9932 10.029v-58.912l8.2076-8.2368a5.9544 5.9544 0 0 0 2.5848 0.5864c3.3116 0 5.996-2.694 5.996-6.0176 0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 0.9292 0.2096 1.8088 0.584 2.5944l-7.3792 7.406-7.3796-7.406a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 3.3236 2.6844 6.0176 5.996 6.0176 0.9256 0 1.802-0.2108 2.5848-0.5864l8.2072 8.2368v42.064l-14.39-14.442v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-11.192-11.232v-11.145a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v12.807l12.363 12.407h-7.108c-0.8232-2.3372-3.044-4.0116-5.6548-4.0116-3.3112 0-5.996 2.694-5.996 6.0172 0 3.3236 2.6848 6.0176 5.996 6.0176 2.6108 0 4.832-1.6744 5.6548-4.012h11.105l17.216 17.278v30.03l-9.1932-9.2264v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.996 2.694-5.996 6.0172 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-13.376-13.423a6.0116 6.0116 0 0 0 0.5844-2.5944c0-3.3232-2.684-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0172 5.996 6.0172c0.9256 0 1.8024-0.2104 2.5848-0.5864l13.376 13.424h-7.108c-0.8232-2.3372-3.044-4.012-5.6548-4.012-3.3112 0-5.996 2.6944-5.996 6.0176s2.6848 6.0172 5.996 6.0172c2.6108 0 4.8316-1.6744 5.6548-4.0116h11.105l11.192 11.232h5.6528l11.592-11.633h10.705c0.8232 2.3368 3.044 4.0112 5.6548 4.0112 3.3112 0 5.996-2.694 5.996-6.0172s-2.6848-6.0172-5.996-6.0172c-2.6108 0-4.8316 1.6744-5.6548 4.0116h-12.361l-10.764 10.802v-13.18l12.82-12.866h20.698c0.8232 2.3372 3.044 4.0116 5.6544 4.0116 3.3116 0 5.996-2.694 5.996-6.0172 0-3.3236-2.6844-6.0176-5.996-6.0176-2.6104 0-4.8312 1.6744-5.6544 4.012h-16.702l11.963-12.006v-10.029l8.6068-8.6384a5.9544 5.9544 0 0 0 2.5852 0.5868c3.3112 0 5.996-2.6944 5.996-6.0176s-2.6848-6.0172-5.996-6.0172-5.996 2.694-5.996 6.0172c0 0.9292 0.21 1.8088 0.5844 2.5944l-5.7804 5.8016v-18.367a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v18.366l-5.7808-5.8016zm-51.78 57.58c-1.3244 0-2.3984-1.0776-2.3984-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm17.588-18.052c-1.3248 0-2.3988-1.0776-2.3988-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm-20.786-2.808c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm-1.9988-20.058c-1.3244 0-2.398-1.0776-2.398-2.4072 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm49.964 2.808c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm27.181 18.453c-1.324 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-10.392 19.255c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm11.192-57.364c-1.3244 0-2.3984-1.078-2.3984-2.4072s1.074-2.4068 2.3984-2.4068 2.3984 1.0776 2.3984 2.4068-1.074 2.4072-2.3984 2.4072zm-13.191-15.645c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-15.989-9.628c-1.3244 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-25.582 0c-1.324 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-20.785 9.2268c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072s2.3984 1.0776 2.3984 2.4072c0 1.3292-1.074 2.4068-2.3984 2.4068zm15.189 14.843c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm33.976 1.2036c-1.324 0-2.398-1.078-2.398-2.4072s1.0736-2.4068 2.398-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4072-2.3984 2.4072z"/></svg><div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div></div><home-assistant></home-assistant><script>function _ls(e){var t=document.documentElement,i=t.insertBefore(document.createElement("script"),t.lastChild);return i.defer=!0,i.src=e,i}window.Polymer={lazyRegister:!0,useNativeCSSProperties:!0,dom:"shadow",suppressTemplateNotifications:!0,suppressBindingNotifications:!0},window.polymerSkipLoadingFontRoboto=!0,"customElements"in window&&"content"in document.createElement("template")||document.write("<script src='/static/polyfills/webcomponents-bundle.js'><\/script>");var isS11_12=/(?:.*(?:iPhone|iPad).*OS (?:11|12)_\d)|(?:.*Version\/(?:11|12)(?:\.\d+)*.*Safari\/)/.test(navigator.userAgent)</script><script>function _pf(o,t){var n=document.createElement("link");n.rel="preload",n.as="font",n.type="font/woff2",n.href=o,n.crossOrigin="anonymous",document.head.appendChild(n)}-1===navigator.userAgent.indexOf("Android")&&-1===navigator.userAgent.indexOf("CrOS")&&(_pf("/static/fonts/roboto/Roboto-Regular.woff2"),_pf("/static/fonts/roboto/Roboto-Medium.woff2"))</script><script crossorigin="use-credentials">isS11_12||(import("/frontend_latest/core.f2e094cd.js"),import("/frontend_latest/app.933bd729.js"),window.customPanelJS="/frontend_latest/custom-panel.228367ca.js",window.latestJS=!0,window.globalThis||(window.globalThis=window))</script><script>import("/ui_lovelace_minimalist/cards/simple-weather-card/simple-weather-card.js");
import("/ui_lovelace_minimalist/cards/my-cards/my-cards.js");
import("/ui_lovelace_minimalist/cards/button-card/button-card.js");
import("/ui_lovelace_minimalist/cards/lovelace-layout-card/lovelace-layout-card.js");
import("/ui_lovelace_minimalist/cards/lovelace-auto-entities/lovelace-auto-entities.js");
import("/ui_lovelace_minimalist/cards/mini-media-player/mini-media-player.js");
import("/ui_lovelace_minimalist/cards/mini-graph-card/mini-graph-card.js");
import("/ui_lovelace_minimalist/cards/weather-radar-card/weather-radar-card.js");
import("/ui_lovelace_minimalist/cards/lovelace-card-mod/lovelace-card-mod.js");
import("/ui_lovelace_minimalist/cards/lovelace-state-switch/lovelace-state-switch.js");
import("/hacsfiles/iconset.js");
import("/ui_lovelace_minimalist/cards/light-entity-card/light-entity-card.js");
</script><script>window.latestJS||(window.customPanelJS="/frontend_es5/custom-panel.9875c7eb.js",_ls("/frontend_es5/core.5407379b.js"),_ls("/frontend_es5/app.267f38e0.js"))</script><script>if (!window.latestJS) {
}</script></body></html>
This really should display, right?
I havenĀ“t been able to take a look at this yet, but there is an issue regarding this
How i can force an aspect ratio on the custom camera card?
Since the doorbell is another aspect ratio, it looks weird.
I tried fixing it myself in the css file, but didnt work
Managed to fix the issue I reported 4 days ago. The issue was invalid entities coupled with caching. Definetly been a learning curve but I was expecting this not to be a smooth ride (which is why I went this route as opposed to the mushroom route)ā¦
I have a Denon AVR in my house I would like to integrate into my minimalist dashboard. Looking at the available cards I can see the media_player
card but supplying the one entity I have of the Denon I only get volume control and start/stop/previous/next. Enabling the popup (ulm_card_media_player_enable_popup = true
) doesnāt do anything
but no ability to control the rest of the AVR like in the following picture.
How can I implement this in minimalist?
Just checking in if anyone has had success with input_datetime
entities. Trying to use the card_input_datetime
and still having issues. Hoping some one else is using it?
Hello! I have been really enjoying this UI! I do have one question for anyone who can help. Is there a way to do a tap_action: call-service anywhere on a light card? When I add it, the only place I can tap to get it to work is on the card itself. If I tap the icon or name nothing happens. It doesnāt seem like I can call a service from a custom tap action in the variables either. I have tried several ways but certainly could be missing something. Thanks for any advice you can provide!