Same problem here with the last two, did you figured it out yet?
Not yet unfortunately, hope someone can shed some light on this!
This looks awesome, especially with the multi page and looks like inspired by Mattias’ . Do you mind to share your variant? I am still considering my options on what is a good dashboard, but I think with the sidebar and multiple options I can more easily convince the people in the house to have something like that as well.
How does your ‘power/energy’ page look like?
Thank you very much all, the respondes and examples and Mattias’ dashboard is a real addition to HASS from what I am concerned 
I think you need to remove the border with card-mod. Mind sharing the code for your card?
card_mod:
style: >
:host {
--ha-card-border-width: 0;
}
Correct, adding card_mod is normal, thank you for your help
Correct, adding “card_mod” is normal, thank you for your help
For the 3rd issue with edges
Did you modify something in themes or are you sure that the theme is fully functioning?
In themes the line responsible for the rounding is button-card-border-radius
Try checking that line out in case you modified something (I have mine set at 8% initially was 10%)
One approach would be to modify it to something obnoxious such as 50% and reloading themes and see if it even works.
Although this might not be the best approach but at least it can give you an idea if the themes are working and can narrow down the problem.
I finally finished updating to the 2023.1 version of this wonderful design. For some reason, I took out Kiosk - Mode because Matias said so but how do I actually go into kiosk mode now? No sidebar and header.
I can’t seem to figure it out. I must have missed something.
Anyone would know?
Thanks
“Kiosk Mode” works now with Browser Mod 2.
1 Like
Thanks man. that did the trick.
I got two more questions:
-
I can’t figure out why all my button cards (since these last three Matias updates) are now squares but for the Media one and the footer one’s.
-
My conditional media is working fine when I play different media players. But when I’m on recently added from plex, I often get a blank button (not always). Do I need to implement the backup offline thing I’ve been seeing in this thread?
On another note. I don’t know if you guys have been playing with ChatGPT but it’s been doing wonders in greatly expending my yaml coding. I just ask it to code something in plain english and it does it.
Once again, thanks Mattias and all the big helpers here on this thread. You guys are all great help in making my little HA such a cool toy.
Thanks for your reply! I haven’t modified the theme yaml file honestly, it’s just the default from GitHub. I changed the percentage of the border radius, but nothing happened and/or changed, so I guess something’s missing?? No clue what I’m missing though?
Hi, would you be able to share the card template you made?
I got 1 question and 1 future request/nudge maybe for Laffer 
-
Is it possible to select or deselect the conditional media background based on the source attribute? I’m using a Node2i for both music streaming and output from my TV. I would like to have the media background for music, but not when the Node2i is using the TV-HDMI source or the Analog Input (record player). Currently, the conditional seems to choose my Node2i instead of my TV(as both are “playing”) , resulting in a card that looks like this:
-
I appreciate the transparency/blur and colour scheme of my own popup cards more than the new UI. However, I find the features of the new UI appealing. So, if anyone plans to create popup cards inspired by the new UI, PLEASE share the code :). // Or if there’s a way to adapt the looks of the default UI I’m all ears
Until then I shall comment out my lights popup 
4 Likes
Hi! It’s amazing reading all your work inspired by Mattias (huge thanks to @Mattias & to all who post their code to understand a bit more of the code).
I´m a newbie with the homeassistant frontend and reading every evenig parts of this topic to understand more and more…
Currently I setet up a dashboard and implement temperature and humidity to a seperated cards. Now I want to combine these cards to a single card but wihtout success. Could somebody help me to modify the code? Thanks
ui-lovelace.yaml
- type: custom:button-card
entity: sensor.ble_temperature_mi_thermometer_sz
name: Temp
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- entity: sensor.ble_temperature_mi_thermometer_sz
- entity: sensor.nightstate
color: gray
y_axis: secondary
show_line: false
show_points: false
show_legend: false
show_labels: false
template:
- temperature
- icon_temp
- type: custom:button-card
entity: sensor.ble_humidity_mi_thermometer_sz
name: Humidity
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- entity: sensor.ble_humidity_mi_thermometer_sz
- entity: sensor.nightstate
color: gray
y_axis: secondary
show_line: false
show_points: false
show_legend: false
show_labels: false
template:
- humidity
- icon_humidity
humidity.yaml
humidity:
template:
- base_t #like base but with transparent background
show_name: false # Hides Card Name
show_state: true # Hides Card state
state_display: >
[[[ return ' '; ]]]
custom_fields:
circle: >
[[[ {
const humidity = Math.round(entity.state);
const input = `<tspan font-size="20">%</tspan>`;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" fill="none" style="
transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="#8d8e90" font-size="28" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle" dominant-baseline="middle">${humidity}${input}</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
height: 140
hours_to_show: 24
points_per_hour: 2
#line_width: 8
font_size: 75
decimals: 0
refresh_interval: 120
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
points: false
fill: fade
color_thresholds:
- value: 0
color: "#c0392b"
- value: 46
color: "#d35400"
- value: 55
color: "#228C22"
- value: 65
color: "#276696"
card_mod:
style: |
:host{
--ha-card-border-width: 0px;
}
styles:
custom_fields:
graph: [bottom: 0%, left: 0%, width: 130%, position: absolute, margin: 0% 0% -13% -15.2%]
icon:
- width: 67%
- fill: "#9da0a2"
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1
style: |
ha-card {
box-shadow: none;
}
icon_humidity:
styles:
custom_fields:
icon:
- width: 90%
- margin-left: -20%
- margin-top: -11%
custom_fields:
icon: >
<ha-icon icon="mdi:water-opacity"></ha-icon>
temperature.yaml
temperature:
template:
- base_t #like base but with transparent background
show_name: false # Hides Card Name
show_state: true # Hides Card state
state_display: >
[[[ return ' '; ]]]
custom_fields:
circle: >
[[[ {
const temperature = Math.round(entity.state);
const input = `<tspan font-size="20">°C</tspan>`;
return `<svg viewBox="0 0 50 50"><circle cx="50" cy="50" r="20.5" fill="none" style="
transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="#8d8e90" font-size="28" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle" dominant-baseline="middle">${temperature}${input}</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
height: 140
hours_to_show: 24
points_per_hour: 2
#line_width: 8
font_size: 75
decimals: 0
refresh_interval: 120
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
points: false
fill: fade
color_thresholds:
- color: '#039BE5'
value: 10
- color: '#0da035'
value: 25
- color: '#e45e65'
value: 30
card_mod:
style: |
:host{
--ha-card-border-width: 0px;
}
styles:
custom_fields:
graph: [bottom: 0%, left: 0%, width: 130%, position: absolute, margin: 0% 0% -13% -15.2%]
icon:
- width: 60%
- fill: "#9da0a2"
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1
style: |
ha-card {
box-shadow: none;
}
1 Like
Hi @remkolodder, here you go
I’ve included some screenshots and added some notes how to get this thing up and running. The sidebar can be easily created with the sidebar modification, and the rounded buttons with the custom button card. Hope it helps!
My light cards are squared, but I would want to change them to round edges. Where can I do so?"
I would change this line
to
- border-radius: 10px
Starting with 2023.3 update, I have custom:button-cards disappearing randomly. After a refresh or two they are back, but disappear again after a couple refreshes. The button in particular contains a swipe-card that cycles through my security cameras. It has worked flawlessly for over a year until this update. I noticed in Chrome Dev tools the following errors when the button is missing. Has anyone else noticed this behavior? Unfortunately it doesn’t look like custom:button-card is an active project anymore.
- type: custom:button-card
entity: none
name: Camera
show_entity_picture: false
show_state: false
show_name: false
tap_action:
action: more-info
# hold_action:
custom_fields:
picture:
card:
type: custom:swipe-card
parameters:
effect: fade
pagination:
type: custom
autoplay:
pauseOnMouseEnter: true
disableOnInteraction: false
delay: 4000
speed: 2000
cards:
- type: picture-entity
entity: camera.garage_snapshot
aspect_ratio: '1:1'
name: Garage
show_entity_picture: false
show_state: false
show_name: false
tap_action:
action: more-info
- type: picture-entity
entity: camera.backyard_snapshot
aspect_ratio: '1:1'
name: Backyard
show_entity_picture: false
show_state: false
show_name: false
tap_action:
action: more-info
Not OP but I’m particularly interested in replicating your sidebar, can you share your code there?