Got it 
it’s working again:+1:
Hej Mathias,
Jag har tittat på din HomeAssistant-design, jag tycker att den är mycket välgjord och skulle också vilja ha den.
Tror du att du kommer att få möjlighet att hjälpa mig installera detta tema via Teamviewer, tyvärr har jag tyvärr inte mycket erfarenhet av det själv.
Hoppas så mycket att du kommer att hjälpa till!
Did you add custom_icons.js? If not, that is your problem. Make sure it is in configuration.yaml (old style) or via UI, Configuration->Lovelace control panel.
1 Like
I used this theme and this ui-lovelace config
title: Title
views:
- title: My view
icon: 'mdi:home-assistant'
popup_cards:
switch.third_floor_powerstrip_bedroom_usbleft:
title: 3F USB Left
card:
type: entities
entities:
- type: 'custom:fold-entity-row'
head: switch.third_floor_powerstrip_bedroom_usbleft
entities:
- entity: input_datetime.3f_bedroom_powerstrip_smartlife_usblefton
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnontimer
- entity: input_datetime.3f_bedroom_powerstrip_smartlife_usbleftoff
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnofftimer
- type: section
label: Schedule
- entity: group.3f_bedroom_powerstrip_smartlife_usbleft_timer
- entity: input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_monday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_tuesday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_wednesday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_thursday
- entity: input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_friday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_saturday
- entity: input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_sunday
cards:
- type: entity-button
entity: switch.third_floor_powerstrip_bedroom_usbleft
tap_action:
action: call-service
service: browser_mod.popup
service_data: null
deviceID: this
hold_action:
action: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: 3F USB Left Settings
card:
type: entities
entities:
- type: 'custom:fold-entity-row'
head: switch.third_floor_powerstrip_bedroom_usbleft
entities:
- entity: input_datetime.3f_bedroom_powerstrip_smartlife_usblefton
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnontimer
- entity: >-
input_datetime.3f_bedroom_powerstrip_smartlife_usbleftoff
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_turnofftimer
- type: section
label: Schedule
- entity: group.3f_bedroom_powerstrip_smartlife_usbleft_timer
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_monday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_tuesday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_wednesday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_thursday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_friday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_saturday
- entity: >-
input_boolean.3f_bedroom_powerstrip_smartlife_usbleft_sunday
large: true
and this card-mod config but to no avail
- title: card-mod
cards:
# Style the card, but use special styles for the header
- type: entities
title: Simple configuration
style: |
ha-card {
color: green;
}
.card-header {
color: cyan;
}
entities:
- switch.3f_br_switch_broadlink_mid
- switch.3f_br_switch_broadlink_sidelight
Am I missing something?
Hi there. I don’t know how to edit popup card in order to, for instance, having these rounded borders as @Mattias_Persson did. In general, how can I custom these cards? Where can I find this piece of code? Thanks in advance!
Hi @Frank_Hagenbuch. Could you provide us whole code to have this awesome thermostat button card? thx
1 Like
yes, i do it but it doesn’t work.
if i use custom:tv it works.
Any ideas?
thanks 
I use it a little bit modified now:
lovelace.yaml:
- type: custom:button-card
entity: climate.wohnzimmer
style:
top: 36%
left: 14%
width: 20%
template: climate
- type: 'custom:mini-graph-card'
entities:
- sensor.heizung_wohnzimmer
style:
top: 40%
left: 14%
width: 20%
line_color: blue
line_width: 8
font_size: 75
show:
name: false
icon: false
state: false
template.yaml:
climate:
aspect_ratio: 2/1
show_state: false
show_icon: false
show_name: false
show_current_temperature: true
show_control: true
custom_fields:
room_temp: >
[[[ const state = entity.attributes.current_temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >${state}°</text></svg>`; ]]]
room_temp_target: >
[[[ const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="54%" text-anchor="middle" >${state}°</text></svg>`; ]]]
room_name: >
[[[ return entity.attributes.friendly_name ]]]
mode: >
[[[ if (entity.state === 'auto') { return '<svg viewBox="0 0 799.36 795.5"><path fill="#9da0a2" d="M61.37,427.36c6...........................24.89Z"/></svg>'; } ]]]
styles:
card: *button_styles_card
custom_fields:
room_temp: [top: 30%, left: 5%, position: absolute, line-height: 3.25vw, font-size: 2.64vw, font-family: Assistant, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)']
room_name: [top: 3%, left: 26%, position: absolute, line-height: 3.25vw, font-size: 2.64vw,]
room_temp_target: [top: 8%, left: 6%, position: absolute, line-height: 1.60vw, font-size: 1.64vw, font-family: Assistant, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)']
mode: [top: 7%, right: 8%, width: 2.5vw, position: absolute, opacity: 0.8]
tap_action:
action: more-info
(can not post the complete code for the SVG here, its to long. if you need it, let me know)
3 Likes
Ahhh. the key is to create to card one above the other!! Thx!
It looks great, nice work!
And I’m looking for something like that for my climate buttons. 
Can you send me the whole SVG?
Just so you know, I have accidentally found a way around this on desktop. On iOS/Android there isn’t an issue, so the workaround is not needed there.
Has anyone experienced the issue that the background blur is not working anymore since 118?
– and found a solution by any chance?
Yes, I fixed it yesterday
.mdc-dialog is now .mdc-dialog__scrim
I moved light-popup-card style from button_card_templates.yaml to themes.yaml.
For some reason isolation: isolate; must also be added to the #popup style.
2 Likes
I can not post it here, its to long, but i have it in a Text File here:
https://1drv.ms/t/s!AioRL_oo5eZ7geEvZs0v5L8FqyyQLw?e=x83nFS
You can put it in the Template.yaml
Thank you for all the hard work.
I am getting somewhere, here’s my stuff so far.
And thanks again for the great job!
3 Likes
just getting into home assistant will this work on the rasberry pi version of hassio? sorry if someone has already asked this question.
I added the network throughput (systemmonitor) of my raspberry pi in the sidebar information. The throughputs are not in one line and at right.
I tried to modify the ha-card.information_network in the theme.yaml, but my css skills are bad. Who can help me ?
EDIT: Solved
@Mattias_Persson first of all, FANTASTIC design, congrats !
Now, I am curious about this: how did you add this padding outside the entire component? i see they are not added at the button-card level, but seems to be on the most “outer card” there is…
is it added at #root? .column? i could not figure out how this was done? looks neat!
Do you mind explaining how you did this? Thanks !
Do you know by any chance if we can use the state icon of the home alarm from home assistant (green/orange/red with the shield home icon and the state)? I searched for it but can’t get the image from that card into something like this.