Thanks a lot!
Hi.
I am using “custom: layout-card”, namely -break. Here’s what happens:
How to fix it ?
HA 0.115.3
No, of course not 
When you say name template, you mean? Help me here.
I’ll try to see if I can find what I’ve changed.
Hi Mattias,
i use your wonderful design on Apple Ipad and I wanted to ask if you can help me with the ui sound.
I would like it to be like yours, so that when I turn on the light there is a click sound.
Can you help me please?
Just started out with Home Assistant and this UI would look sick on my tablet. I tried to copy all the files in the repository to my HA installation folder but nothing happens. Guessing it’s not that simple…?
I understand I have to replace the entities with my own but I just want the interface to be up and running 
I mean the key name: and js template
name: >
[[[...
Check if you can get this service call working using browser_mod (media_player)
- service: media_player.play_media
data:
entity_id: media_player.tablet
media_content_id: /local/sound/on.m4a
media_content_type: music
That’s what I’m doing with button-card
tap_action:
ui_sound: |
[[[ if (entity.state === 'off' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
else if (entity.state === 'on' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/off.m4a', media_content_type: 'music'}); } ]]]
1 Like
thank YOu mattias. It works know.
Hi Mattias,
First of all, congratulations for your work and for sharing it with the community. I love the interface and I would like to integrate it at home but I don’t know how to do it.
I copied the project to my root and I try to use my minimal configuration to make it work but it gives me failures.
In configuration.yaml I removed everything except resources and logger but when I started index.html it gave me errors.
Could you provide a guide to set a clean configuration?
I’m sorry for my clumsiness.
Thanks in advance
I’ve been asked to do a guide multiple times but I have no interest in making one since there’s simply too much to cover. The documentation is there for a reason too.
Cloning my whole configuration is just a bad idea. Copy the parts that you like, one at a time and go from there.
4 Likes
An old post, but how can we add the white border radius also added in the non-rgb buttons? Mine are slightly smaller than the rgb version currently. I am searching for the right placement of the CSS but can’t get it correct
The white border on the rgb made the button slightly larger so play around/remove the the last line --size: 4.4em !important;
1 Like
Thanks.
We can’t add the hue bulb to the custom_icons.js file I think, because of the large setup? I tried but won’t get it to work. I want to re-use it in other cards also (so not only/actualy not at all with button card)
tx!
Note: The large icons are not designed to be viewed at small sizes as explained here.
https://material.io/design/iconography/system-icons.html#design-principles
Copy icon from button-card
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]
Remove everything that’s not svg and change viewBox to 24x24
<svg viewBox="0 0 24 24">
<path
d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"
/>
<path
d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"
/>
</svg>
Pretty sure the icon needs to be only one path so follow these steps
https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162…
# custom_icons.js
'hue':
'M13.4 22.9c0 .4-.2.4-.3.4h-2.3c-.1 0-.3-.1-.3-.4s.3-.4.3-.4h2.3c0 0 .3 0 .3.4zm1.2-3.2H9.3s-.4 0-.4.4.3.4.4.4h5.4c.1 0 .4 0 .4-.4-.1-.4-.5-.4-.5-.4zm0 1.4H9.3s-.4 0-.4.4.3.4.4.4h5.4c.1 0 .4 0 .4-.4-.1-.4-.5-.4-.5-.4zm0-2.7H9.3s-.4 0-.4.4.3.4.4.4h5.4c.1 0 .4 0 .4-.4s-.5-.4-.5-.4zM18.5 3C18.4.9 14.5.6 12.8.6h-1.6C9.5.7 5.5.9 5.5 3c0 .2 0 1.2 1 3.9 0 .1.1.4.3.5v.3c.2.4 1.6 3.4 1.5 8.9v.8s0 .3.5.3H15c.5 0 .5-.2.5-.3v-.8c0-5.5 1.3-8.5 1.5-8.9v-.3c.2-.2.3-.4.4-.5 1.2-2.7 1.1-3.6 1.1-3.9z',
In configuration.yaml append random number to resources and restart HA
url: '/local/custom_icons.js?v=25052001'
1 Like
You’re amazing! thank you
And what if we need more than 1 path?
You don’t. The hue icon is technically 6 paths compounded into one.
thank youa gain.
I have another strange issue.
When I popup my light card, it won’t show the color picker (if i press the rgb icon). If i however click on the bulb, then go back to the popup… it does show:
(1: i press the rainbow, 2 i dont see the colorpicker, 3 i press on the lamp icon in the popup card, 4 i see the popup card in its original state, 5, i see the rgb picker…
Update Light Entity Card in HACS…
That’s up2date of course!