It was that. Thank you. I still need to learn a lot.
I will take a stab at this question. Hopefully, this helps. I can’t say that I completely understand the context of your question though.
The bottom buttons CSS styling is located in themes.yaml section header is SIDEBAR BOTTOM ICONS. The individual button styles hui button card is located in themes.yaml header section BUTTON CARD.
Thank you very much for designing such a good-looking lovelace UI, I would like to ask how to modify the title of the leave blank, this will be more suitable for my tablet‘s display, look forward to your reply。
非常感谢设计了这么好看的love la ce界面，我想请教一下，怎么修改标题的留空，这样会更适合我的平板分辨率显示，期待您的答复。
1 Like
in themes.yaml around line 41 you will find: custom-layout-card-padding: 3.3vw
Change the value to anything smaller (like 2vw or even 1vw) to limit the cap between cards
Also: for the second row sixsth card (the spot light with the NaN% cicrle) you can use - base as the template in ui-lovelace.yaml instead of - light this get’s rid of the NaN% cicrle whilst you still can use the light as intended
1 Like
hi, yes i check the code and markdown sidebar there’s no more but i can’t fix.
Sorry, I’m not sure how to interpret your comment.
Are you using the new button_card sidebar, or are you using the old markdown sidebar?
sorry for my english, i use button_card sidebar
Is it possible to use the animated icons without ui-Lovelace.yaml? I’m using the UI-editor but will like to use the icons for my custom:button-cards.
I’m planning on building a smart home from the ground up and I thought I’d try and imagine a dashboard in advance, which led me to this topic.
I’ve read all of the ~1600 posts in this thread (since I was late for the party, the first few hundreds made quite little sense - e.g. picture entity cards, which are no longer in the repo).
I’ve dug down in all of the relevant parts of the architecture. Without copying and pasting the entire repo, it took me the best part of 2 days to adapt/build my first similar (working!!!) dashboard. I haven’t got much to show for it, as I am only using proof-of-concept cards, since I don’t have all the hardware available.
I’d like to thank Mattias for the amazing work he’s put into this. I’d like to thank all of you other guys who “got it” at some point and started helping others.
But most of all, I’d like to convey the joy of learning so much about SVGs as custom icons, browser_mod, card-mod, button-card and all such things which make HA what I always expected it to be and never thought it can be (until now).
Also, I’d like to thank you all for the wonderful ideas that you shared. Nobody’s asking me to, but if I had to hand out a “best use of HA” award, it’d have to be for this:
You’re a wonderful, wonderful community!
2 Likes
No problem at all, we are all trying 
I am not sure why your dashboard looks like that, nothing I can think of that would cause this
Yes you can! but it will require some trying/testing
Below you’lle find a proof of concept for a light, this should work
So how did I get to the code below?
Trial and error 
No but seriously, it’s code taken from:
ui-lovelace.yaml → simple type and entity format
type: custom:button-card
entity: light.bathroom
button_card_templates.yaml → base
I took the below part so we can change the color and state of the lamp (it makes the icons animated)
variables:
state: >
[[[ return entity === undefined || entity.state; ]]]
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
light_color: >
[[[ return entity === undefined || entity.state === 'unavailable' ? '#9da0a2' : 'var(--button-card-light-color-no-temperature)'; ]]]
button_card_templates.yaml → icon_hue
here I took the icon itself (basically everything under custom_fields, the second custom fields since the first one is styling)
custom_fields:
icon: >
[[[
const state = (variables.state === 'on' && variables.timeout < 2000) ? 'on' : null;
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes on {
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);
}
}
.on {
animation: on 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="${variables.light_color}" 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>
`;
]]]
So here you go, the complete card you can copy/paste into the UI editor to get an animated icon
It will require some further tweaking, for instance by adding the “styles” part from the icon yaml code so you can make it smaller, larger and give it some margins within you button-card
But for the icon proof of concept, this should work, and should give you a starting point to make you own
type: custom:button-card
entity: light.bathroom
variables:
state: >
[[[ return entity === undefined || entity.state; ]]]
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
light_color: >
[[[ return entity === undefined || entity.state === 'unavailable' ? '#9da0a2' : 'var(--button-card-light-color-no-temperature)'; ]]]
custom_fields:
icon: >
[[[
const state = (variables.state === 'on' && variables.timeout < 2000) ? 'on' : null;
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes on {
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);
}
}
.on {
animation: on 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="${variables.light_color}" 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>
`;
]]]
In button_cards_templates.yaml under Base I find the following variable:
light_color: >
[[[ return entity === undefined || entity.state === 'unavailable' ? 'var(--state-icon-color)' : 'var(--button-card-light-color-no-temperature)'; ]]]
I cannot seem to find where it’s pulling var(--button-card-light-color-no-temperature) from.
I can’t find it in mine, or your themes.yaml, and I’m not sure where else I would have to look
Is this a remnant of an old variable, did I forget to define something, or has this been removed in an update?
EDIT: Was answered already, it’s part of the custom:button-card spec
thank you so much ,I got it.
Thanks allot for the great and detailed explanation, you’re a great guy! Just tested with the example card, changed the entity but I just get a regular mdi icon instead of the animated icon. Do I need to copy any files to get this working? Thx 
Edit: after tweaking the viewbox I now see the icon! Now the part of the bulb is just white instead of the light color and switched the light on shows a weird animation that the above part of the bulb is wiggling. 
The wiggle is part of the animation you can see it in this GIF as well:
As the name sugeests, the color is for a (Phillips) Hue lamp, which is a colored lamp
It uses fill="${variables.light_color}" to set the color for the light to the same color the light is displaying
the line that controls the default colors is:
light_color: >
[[[ return entity === undefined || entity.state === 'unavailable' ? '#9da0a2' : 'var(--button-card-light-color-no-temperature)'; ]]]
The first color value (#9da0a2) is the color a lamp gets when it’s unavailable, when the lamp IS available it gets the second value var(--button-card-light-color-no-temperature)
This actually looks at the light brightness and sets the color of the icon accordingly
And for the icon to properly show, or to change how large or small it is, how much padding etcetera, please take a look at the “styles” part from the icon yaml code, this will give you some control:
styles:
custom_fields:
icon:
- width: 77%
- margin-left: -14%
- margin-top: 1%
1 Like
Thanks Mattias,
That worked for me!
Ahhhh! yes! that’s where it comes from, thanks!
@anon36468094 I have editted my answers with a variable I didn’t know about which changes the light color based on the brightness, might want to try with my new example to see if the color of the icons now works for you
1 Like
Anyone know if it’s possible to make the grid section titles ‘clickable’ ? - I mean like ‘Studio’, ‘Hemma’ etc… in the original post screenshot.
I was thinking it would be nice to have a click/tap action if the room name was clicked to turn everything off inside that room, instead of having to turn each device off individually…