Can somebody tell me how on earth I get the font to work? I’ve created a font folder in config and have the font.css as a resource in my configuration.yaml. I’ve also downloaded the SF font .otf files and have put them in the font folder. What am I missing?
The first error is the “loader” template, you just need to create an input_boolean with the same name as your entity. e.g. if you use loader on ‘media_player.tv’ you need to create ‘input_boolean.tv’ etc.
if (states[entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')].state === 'on')
Did you place the fonts in www/font? Did you look in font.css to see if you’ve downloaded all listed. Did you clear cache? Did you define font-family in your style? Does your instance run in a modern browser …
Thank you so much! It was as simple as I didn’t have the font folder in the www…
I have one more question. Or actually two. Feel sorry for you with all these questions all the time… My pop up card for my hue lights look stunning, although I miss that the “dimmer” is in another color. Right now it’s all the same no matter what % I have the lights on. I’ve tried to change in the pop up card but I don’t get any different color?
And, I don’t have the colorful Philips bulb so I want to get rid of the circle with the color in it. How do I manage that? I’ve tried to delete some from the card itself in the code but then the color circle stays and ‘the most orange’ circle disappears.
Merry Christmas! I hope we get some snow in Skåne!
HI,
I guess I was thinking too complicated. If it helps jamming. I simply built a switch for each activity and then swapped it with the entitie in lovelace.yaml:
switch.yaml
- platform: template
switches:
panasonic:
value_template: "{{ is_state_attr('remote.harmonyhub', 'current_activity', 'Fernsehen') }}"
turn_on:
service: remote.turn_on
data:
entity_id: remote.harmonyhub
activity: 'Fernsehen'
turn_off:
service: remote.turn_on
data:
entity_id: remote.harmonyhub
activity: 'PowerOff'
lovelace.yaml:
- type: custom:button-card
entity: switch.panasonic
name: Panasonic TV
style:
top: 35%
left: 52.5%
width: 10%
custom_fields:
icon_tv: &icon_tv >
[[[ const state = entity.state === 'on' ? 'animate' : null;
const style = '<style>@keyframes animate_on{from{transform: scaleY(0);}to{transform: scaleY(1);}}.animate_on{animation: animate_on 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}@keyframes animate_off{from{transform: scaleY(1);}to{transform: scaleY(0);}}.animate_off{animation: animate_off 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}</style>';
const path = '<path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>';
const gradient = '<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74"><stop offset="0" stop-color="#64acb7"/><stop offset="1" stop-color="#7fdbe9"/></linearGradient>';
if (entity.state === 'off'){ return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path class="animate_off" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on'){ return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="#20262890"/><path class="animate_on" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on'){ return `<svg viewBox="0 0 50 50"> ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
else if (entity.state==='off') { return `<svg viewBox="0 0 50 50"> ${path} </svg>`; } ]]]
styles: &icon_tv_styles
custom_fields:
icon_tv:
[fill: "[[[ return entity.state === 'on' ? '#616161' : '#9da0a2'; ]]]",
top: 11%, left: 4.5%, width: 3.05vw, position: absolute]
template: base
Is this what you mean?
In button_card_templates.yaml replace sliderColor: '#c7c7c7' with sliderColoredByLight: true
Remove this whole block from themes.yaml
#popup>div.action-holder>div:last-child>div:last-child>.color {
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%),
conic-gradient(rgb(120, 39, 230), rgb(230, 34, 231), rgb(228, 5, 136), rgb(228, 25, 25),
rgb(229, 105, 30), rgb(232, 226, 46), rgb(125, 230, 41), rgb(52, 232, 40), rgb(51, 231, 92),
rgb(52, 232, 224), rgb(32, 125, 229), rgb(18, 39, 229), rgb(120, 39, 230));
border-width: 2px;
border-color: #e6e6e6;
--size: 4.4em !important;
}
and also add/remove actions: in button_card_templates.yaml -> light-popup-card
God jul!
I tried that and that gave me the result that i can click on the dimmer and the percent of the light switches. I mean that I want the dimmer slider colored. Example: 0% the dimmer is no color, 50% half the dimmer is white ish and 100% the whole dimmer slider is white ish… Hard to explain.
Ah! I will look in to this and look in to your button card template to se. Thank you!
Thank you! It worked. For reference and to understand the feature further, may I know why I need to put input boolean in this? If I recall it correctly, I am copying your old file before and this is not present. Thanks again in advance!
It’s tied to an automation. You’ll only want the loader template (button card) on a slow responding device. You turn on an entity, and for simplicity, an input boolean with the same name.
Now the automation is really simple. If one of these entities change state, like from off to on, it turns off the loader (spinning circle).
So basically the input boolean is just a switch for the visibility of the loading animation.
- alias: turn_off_loading_wheel
initial_state: true
trigger:
- platform: state
entity_id:
['media_player.sony_bravia', 'media_player.samsung_tv_remote', 'switch.computer_imac',
'switch.playstation_5', 'fan.sovrum_anslut', 'switch.air_purifier']
action:
- service: input_boolean.turn_off
data:
entity_id: >
{{ trigger.entity_id | replace(trigger.entity_id.split('.')[0], 'input_boolean') }}
Tried a lot but no success. In your setup the dimmer goes up and down in a white ash color when you slide the dimmer up and down. Mine is all black. Tried to change a lot of color in the button_template_card but no success. Any ideas?
It’s sliderColor in button_card_templates.yaml. Did you edit ui-lovelace.yaml too? Because you need to edit that after you make changes to includes.
sliderColor: 'red'
If you can’t get it to work you can force it with card-mod in themes.yaml. Don’t forget to call service frontend.reload_themes
#popup>div.range-holder>input[type=range] {
cursor: grab;
--slider-color: blue !important;
}
I thought that it was sliderColor… But nothing happens when I change the sliderColor… No matter what. Although I haven’t changed anything in the ui-lovelace.yaml, what should I edit? If I change the sliderTrackColor the changes apply after I restart HA. 
Sorry for me being such a newbie…
Yeah, just change anything. If you change anything in included files, add a space at the end of ui-lovelace and save.
Really strange thing happened. I made the changes and I had to force it in themes.yaml, called the service and the slider showed up and was red. Then I just tried to change the color and it went back as it was before. Maybe I need to take a break… 
Thank you for patience!
1 Like
It showed up once I white now, then it disappeared and back as it was before. I’ll take a break and give it another try some other day…
Thank you for a very clear explanation! I’m glad I was able to visit this page as I learn more with Lovelace UI design. I’m still learning how to design my UI based on your syntaxes. 
Hi, great job !
i copied all your github repo for this beatiful lovelace ui and configure step by step the ui lovelace to adapt to my need however i met some problem about the mod_card popup card for example when i click on the card for my light it’s not returning and no pop up appears and i have not the sensor to up and down or slide my purcent of the light, the only thing is working is to turn on or turn off, any idea what i’m missing ?
Thanks for your help
Hi Matt
Merry Christmas
I’ve been spending some time update my old setup to your new way of handling it.
One thing i don’t understand is: You have removed some of your style config from you ui-lovelace.yaml, but still manage to make it look right. When I remove the same lines I get into trouble. Are you handling this styling somewhere I can’t find it?
Example from Sidebar. Ref. lines 72 to 84 in your ui-lovelace.yaml
Old way
- type: custom:hui-element
card_type: markdown
style:
{top: 5%, left: 9.1%, width: 15.5vw, height: 1px, --ha-card-background: none, --ha-card-box-shadow: none,
--primary-text-color: 'rgba(255, 255, 255, 0.9)', font-family: SF Display, font-size: 1.4vw, font-weight: 300,
letter-spacing: 0.06vw, line-height: 2.05vw, opacity: 0.75, pointer-events: none}
New way, as you new setup
- type: custom:hui-element
card_type: markdown
style:
{top: 10%, left: 9.1%}
PS. My clock will sometime not be the size I have configured it to. Do you have the same issue?
Any idea?
I works for me with the old setup, but it bugs me don’t get it