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?
Hello everyone. I’ve been trying to get this working for 3 weeks and I just can’t figure it out.
Was wondering if anyone could help.
I have my tesla car button where I want circle to be the car charge and the state of the button to be the state of charging (charging, asleep or online). I also want the circle and charge to change color when charging.
For this I created a new sensor which has all the attributes I need:
# Tesla Car 1 Multi Attributes Sensor
- platform: template
sensors:
tesla_combo_1:
value_template: "{{ states('sensor.tesla_state_1') }}"
friendly_name: Tesla Blanche Status
attribute_templates:
car_state: "{{ states('sensor.tesla_state_1') }}"
battery_level: "{{ states('sensor.tesla_battery_level_1') }}"
plugged_in: "{{ states('binary_sensor.tesla_plugged_in_1') }}"
charge_power: "{{ states('sensor.tesla_charger_power_1') }}"
Then my lovelace looks like this:
- type: custom:button-card
entity: sensor.tesla_battery_level_1
double_tap_action:
!include popup/tesla1_climate.yaml
name: Blanche
template:
- tesla
- icon_tesla
The tesla template is here:
tesla:
template:
- base
- tesla_circle
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;
}
variables:
circle_input: >
[[[
if (entity) {
let battery = entity.attributes.battery_level
? Math.round(entity.attributes.battery_level * 100)
: null;
if (battery !== null) {
return battery === 0 && entity.state !== 'off'
? 1
: battery;
}
}
]]]
circle_input_unit: '%'
The base template is the same as Mattis’s latest
And the tesla_circle is a modified circle template:
tesla_circle:
styles:
card:
- --c-stroke-color-on: '#b0b0b0'
- --c-stroke-color-off: none
- --c-fill-color-on: '68f213'
- --c-fill-color-off: rgba(255,255,255,0.04)
- --c-stroke-width: 2.3
- --c-stroke-width-dragging: 4
- --c-font-color: '#97989c'
- --c-font-size: 14px
- --c-unit-font-size: 10.5px
- --c-font-weight: 700
- --c-letter-spacing: -0.02rem
custom_fields:
circle:
- display: initial
- width: 88%
- margin: -3% 2% 0 0
- justify-self: end
- opacity: 1
custom_fields:
circle: >
[[[
let r = 22.1,
c = r * 2 * Math.PI,
tspan = '<tspan dx=".2" dy="-.4">',
charge = variables.charge_power,
input = variables.circle_input || ' ',
unit = variables.circle_input_unit || ' ';
fill_color = charge > 0 ? 'var(--c-fill-color-on)' : 'var(--c-fill-color-off)';
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${c};
stroke-dashoffset: ${typeof input === 'number' && c - input / 100 * c};
stroke-width: var(--c-stroke-width);
stroke: ${fill_color};
fill: ${fill_color};
}
text {
font-size: var(--c-font-size);
font-weight: var(--c-font-weight);
letter-spacing: var(--c-letter-spacing);
fill: ${fill_color};
}
tspan {
font-size: var(--c-unit-font-size);
}
#circle_value, tspan {
text-anchor: middle;
dominant-baseline: central;
}
</style>
<circle id="circle_stroke" cx="25" cy="25" r="${r}"/>
<text id="circle_value" x="50%" y="52%">${input}${tspan}${unit}</tspan></text>
</svg>
`;
]]]
I’ve tried so many different ways.
The settings, tilt and extra styles template are also the same as Mattis’s.
Could anyone tell me what’s wrong?
Thanks guys.
hi Paul,
happy to help but im going to need some clarification on a few points
- you crated tesla_combo_1 but I can’t see you using it, where do you use it?
- the Tesla template is in what file / folder?
- what is the issue? you have said what you would like the code to do but you did not provide details on what it is doing.
- you have a double_tap_action in the Tesla template, what is that for? you have override it with
double_tap_action:
!include popup/tesla1_climate.yaml
the sensor.youtube_watching has updated a lot recently, can you provide some relevant code?
Thanks Mason.
1.Yes sorry. I copied an old code to you (only the ui-lovelace.yaml one). The Combo Tesla sensor is used here:
- type: custom:button-card
entity: sensor.tesla_combo_1
double_tap_action:
!include popup/tesla1_climate.yaml
name: Blanche
template:
- tesla
- icon_tesla
(the level battery one was just there for a test I was trying out)
-
The Tesla template is in config/button_card_templates/
-
The code at this point doesn’t do anything. The card stays blank. No error code.
I want the icon to show (I have an icon that works), the name to show: Blanche, the state to show (sensor.tesla_state_1) and the charge (sensor.tesla_battery_level_1) to show in the circle position. Also, the charge will be green when charging occurs (when sensor.tesla_charger_power_1 > 0 ) and normal gray when not. -
The double tap is there for a climate pop up that works when I was testing with battery level.
I tested the card with battery level and Mattis’s normal circle, base, etc. This is what I had then. (but I don’t want the charge there anymore. I’d rather have it in the circle.)
Yeah I didn’t realize there was also one in the Tesla template. I just need one for the climate.
Thank you so much for looking into this. 
Oh also, this might help
In base, I added “charging” and “online” as a state “on” so that the button turns white when the car is charging or online. Dark when asleep.
Thanks for the reply !
{{states(‘sensor.youtube_watching’)}} in template editor gives me https://img.youtube.com/vi/DAXjbMG42RY/maxresdefault.jpg the correct url back.
I have updated to Matts latest Media.yaml and Base.yaml
I have also downloaded the cookie txt wich seems to work as intended beacuse i get the url ?
when i use the custom button card like this:
type: custom:button-card
entity: media_player.shield
triggers_update: sensor.youtube_watching
template:
- conditional_media
i get a blank button card with no image and no info like title.
when i look at the youtube_watching sensor it gives me all the attributes from the youtube video currently playing.
when i try do display the image with out the - conditional_media template i just see the sensor eye icon
Also when i try to force the image to be displayed in the button it returns blank. by that i mean add it ass entity_picture or as a background.
Only 2 ways i got it to show att all is to use either markdown card with ,
content: ‘’
or in a generic camera card.
I also can’t seem to make it work. But I am able to see the title and info of the video just not the thumbnail of it.
I did create the youtube.com_cookies.txt file that’s needed in the config folder with Chrome. Did you do that?
The problem is that I get an error saying it can’t read the .youtube.com_cookies.txt
Notice the dot in front of youtube.com_cookies.txt
I don’t have a dot.
Could that be a problem?
A dot can’t be added. I tried.
I’m not even sure I create the youtube.com_cookies.txt exactly right. As there were several options in creating it. Is it explained anywhere here? I missed it I guess.
you have to use a cookie downloader plugin to your browser and download a cookie txt from youtubes webpage and rename it and place it in the config folder , thats how i understood it.
and i belive the dot just makes the file inviceble in the folder , but you can go to options in explorer and choose to see hidden files.
are you using nvidia shield ? if so how did you add it to HA ?
with chromecast device or as android ADB ?
Yeah that’s what I did. I downloaded the file etc. It’s just not being accepted by HA. It gives me an error.
Yeah I’m using a raspberry Pi. I’ll figure it out. Thanks
Hmmm today it is giving me an error on the buttons. usually it just leaves the button blank with no errors.
that error is because you have a semicolon on your second to last line and the last line of your variables.
it should be
unit = variables.circle_input_unit || ' ',
fill_color = charge > 0 ? 'var(--c-fill-color-on)' : 'var(--c-fill-color-off)';