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?
Also intressed in some cards, like door card, sidebar, bottom card with electicity. 
nice work!
Hi @AwesomeGuyNamedMatt , this worked with
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
However, when the website is loading i’m still seeing these lines for a short second:
New light popup
light_new:
template:
- base
- circle
- loader
variables:
circle_input: >
[[[
if (entity) {
// if light group get brightness from child to remove bounce
let child = entity.attributes.entity_id,
brightness = child && states[child[0]].attributes.brightness
? Math.round(states[child[0]].attributes.brightness / 2.54)
: Math.round(entity.attributes.brightness / 2.54);
return brightness === 0 && entity.state !== 'off'
? 1
: brightness
}
]]]
circle_input_unit: '%'
light_entity: '[[[ return entity.entity_id ]]]'
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
#- service: browser_mod.close_popup
- service: browser_mod.popup
data:
sequence:
style: >
--popup-background-color: transparent;
card_mod:
style:
more-info-card:
$ha-card:
.: |
state-card-content {
display: none !important;
}
$: |
.card-header {
display: none !important;
}
more-info-light:
$: |
ha-attributes {
display: none !important;
}
content:
type: custom:more-info-card
entity: '[[[ return variables.light_entity; ]]]'
The ‘Change color’ button doesn’t work. Don’t know why.
I’ve looked into creating custom buttons below the slider, but the existing custom cards for lighting seems be to broken.
Personally I don’t use it, so I’d probably hide it - like this:
more-info-light:
$: |
ha-attributes {
display: none !important;
}
.buttons md-outlined-icon-button:nth-child(2) {
display: none !important;
}
Or all of them:
more-info-light:
$: |
ha-attributes {
display: none !important;
}
.buttons {
display: none !important;
}
5 Likes
Hey guys, I’m setting up this theme and I noticed it replaces my Overview section. I’m wondering if this theme could be setup as a specific dashboard? That would allow me to give a specific user a custom dashboard experience. Thank you!
Hello,
im want to select the effects for my nanoleaf in the popup:
Here are the attributes of the nanoleaf:
And this is the duplicated light.yaml:
light_nanoleaf:
template:
- base
- circle
# - loader
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: >
[[[
return !entity || entity.attributes.friendly_name;
]]]
card_mod:
style:
#popup header
.:
content:
type: entities
card_mod:
style: |
#states {
padding-top: 0.5em;
}
entities:
- >
[[[
if (entity) {
let lights = [],
id = Boolean(entity.attributes.entity_id)
? [entity.entity_id].concat(entity.attributes.entity_id)
: [entity.entity_id];
for (let i = 0; i < id.length; i++) {
lights.push({
"type": "custom:mushroom-light-card",
"entity": id[i],
"fill_container": false,
"primary_info": "name",
"secondary_info": "state",
"icon_type": "icon",
"show_brightness_control": true,
"use_light_color": true,
"show_color_temp_control": true,
"show_color_control": true,
"collapsible_controls": true
});
}
return lights;
}
]]]
variables:
circle_input: >
[[[
if (entity) {
// if light group get brightness from child to remove bounce
let child = entity.attributes.entity_id,
brightness = child && states[child[0]].attributes.brightness
? Math.round(states[child[0]].attributes.brightness / 2.54)
: Math.round(entity.attributes.brightness / 2.54);
return brightness === 0 && entity.state !== 'off'
? 1
: brightness
}
]]]
circle_input_unit: '%'
Could someone guide me, how this could be done?
Thanks!
I have some trouble with the youtube thumbnail.
I have the sensor.youtube_watching working and it gives me the url to every video thumbnail .
But i get no image in the custom buton card. i have tried for hours
i use the Nvidia shield, anyone else with shield or android tv to get this to work ?
Best regards
Share the code for the button, maybe i can help
stupid me. added some stuff in comment 
I can get the picture when i use the state of sensor.youtube_watching in a generic camera card , but it updates slow and dosent give me the info like title of the video
No one have the same issue?