That’s strange. I copied your template select into Dev Tools and it said that the variable is missing.
Anyway, I then created a new select entity based on your code, which is working properly. 
check if your friendly name is set correctly for entities
Okay… I found it… turns out I had misspelled one of my media players… check both at the top and the bottom of the conditional_media template that all your media players are listed correctly.
and as @VietNgoc said that their frendly names are set correctly
Also thanks for the suggestions
Late reply, but i did this the other day by using card_mod to add a temperature monitor (that still needs more styling). This way the card pushed to the bottom isn’t kicked out of the flow.
More info: To align something to the other end of a flex flow you can use margin auto (which direction depends on your flex directon (usually margin-top or margin-left for bottom or right align))
We also need to wrap the vertical-stack in a mod-card since it doesn’t support card_mod inherently, which means we also want to set the height of the newly created object.
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: custom:mod-card
view_layout:
grid-area: sidebar
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
- type: custom:mini-graph-card
name: Utomhus
show:
fill: false
color_thresholds:
- value: 2
color: "#ff9800"
- value: 0
color: "#ffffff"
- value: -2
color: "#639dd1"
entities:
- sensor.utomhus_temperature
card_mod:
style: |
ha-card {
border: none;
border-radius: 0px;
}
card_mod:
style:
.: |
ha-card {
height: 100%;
}
hui-vertical-stack-card$: |
#root > mini-graph-card {
margin-top: auto;
}
Would someone be able to clarify what changes are required in order to change the colour gradient of a light bulb icon, based upon the brightness % value of the bulb? Instead of the original Blue colour that Mattias used for the light state on colour, I changed it to a yellow colour within the theme:
state-icon-active-color: "#f0b81d" #changed from #3182b7
state-active-color: "#f0b81d" #changed from #3182b7
and I also changed the following:
button-card-light-color-temp: hsl(44, 88%, 53%) #changed from hsl(204, 58%, 40%)
When my light is on at 100% brightness, the bulb icon shows correctly as yellow.
As I dim the bulb down to say 10% brightness, the icon colour changes to a Brown colour. I want this to remain yellow, but just a lighter/paler yellow, which is why I picked the new hsl values above.
The SVG icon I am using in one example case is the ‘icon_recessed’ kindly provided by someone earlier in this thread. In the on state, it uses:
fill="var(--button-card-light-color-no-temperature)
which I don’t have in my theme, so I added one:
button-card-light-color-no-temp: hsl(44, 88%, 53%)
however, after adding this, the fill colour of the icon remains fully yellow regardless of state or brightness.
I can see in extra_styles.yaml that the first section relates to lights, so it looks like this is where I need to perhaps change something, but I’m a bit lost as to what.
extra_styles:
extra_styles: >
[[[
if (entity) {
if (entity.entity_id.split('.')[0] === 'light' && variables.state_on) {
// theme variable and conditions
let style = getComputedStyle(document.body),
theme_var = style.getPropertyValue('--button-card-light-color-temp'),
is_hsl = theme_var.startsWith('hsl('),
is_color_temp = entity.attributes.color_mode === 'color_temp';
if (is_hsl && is_color_temp && entity.attributes.brightness) {
// calculate lightness in hsl
let regex_pattern = /(\d+)(?!.*\d)/g,
brightness = entity.attributes.brightness / 2.54,
lightness = parseFloat(theme_var.match(regex_pattern)[0]),
min = lightness - 10,
max = lightness + 10,
calc_lightness = brightness * (max - min) / 100 + min;
var light_color = theme_var.replace(regex_pattern, calc_lightness);
}
else {
var light_color = 'var(--button-card-light-color)';
}
}
}
return `
/* * * * * * * * * * * * * * * * * *
* *
* LIGHT *
* *
* * * * * * * * * * * * * * * * * */
svg {
--light-color: ${
variables.state_on && entity.attributes.brightness
? light_color
: variables.state_on && !entity.attributes.brightness
? 'var(--state-icon-active-color);'
: 'var(--state-icon-color);' }
}
.light-color {
fill: var(--light-color);
transition: all 0.25s ease-out;
}
/* magnification */
:host {
--card-portrait: 1.4;
--card-phone: 2.271;
}
${this._config.template.includes('light') ? `
Developer tools in my browser shows that the var button-card-light-color is being applied, which is coming from ‘extra_styles.yaml’. I’m just a bit lost with all the different light colour styles.
Good evening, good people!
I have tried a lot of different things and haven’t managed to succeed. Is there anyone here who can tell me how to magically change the grid title when swiping on a swipe card, similar to the Media grid? I’ve tried copying conditional_media without success, there must be a trigger somewhere, I think. But I can’t figure out where.
I have a twin ev charger, and want to use an image for each connector with different image on each chargepoint depending on state somewhat like this:
Yeah the images are a little rough right now, but that is fixable. My challenge is how do I set the size so it scales with the button itself depending on dasboard? Here is my code:
- type: custom:button-card
entity: sensor.laddbox
show_icon: false
show_entity_picture: true
show_name: false
template:
- base_charge
styles:
grid:
- grid-template-areas: '"mainCharger twinCharger"'
width: 100%
height: 100px
margin-right: 5px
custom_fields:
mainCharger: |
[[[
const mainAttributes = states['sensor.laddbox'].attributes['mainCharger'];
console.log('Main Charger Attributes:', mainAttributes);
const mainStatus = mainAttributes ? mainAttributes['connector'] : null;
console.log('Main Charger Connector Status:', mainStatus);
return '<img height="100px" src="/local/laddbox_' + (mainStatus === 'CONNECTED' ? 'green' : 'off') + '.png">';
]]]
twinCharger: |
[[[
const twinAttributes = states['sensor.laddbox'].attributes['twinCharger'];
console.log('Twin Charger Attributes:', twinAttributes);
const twinStatus = twinAttributes ? twinAttributes['connector'] : null;
console.log('Twin Charger Connector Status:', twinStatus);
return '<img height="100px" src="/local/laddbox_' + (twinStatus === 'CONNECTED' ? 'green' : 'red') + '.png">';
]]]
i have a very strange problem, my cards are not showing or they disapear when i set the entity to a LIGHT.
when i add to the same code a binary sensor or all other than a light. the card comes back.
the light entity is working, i can switch the light over devices.
- type: custom:button-card
show_state: false
entity: light.color_temperature_light_29
name: Keller
template:
- light1
- icon_shade
light1:
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: '%'
min_color_temp_kelvin: 2702
max_color_temp_kelvin: 6535
min_mireds: 153
max_mireds: 370
supported_color_modes:
- color_temp
color_mode: null
brightness: null
color_temp_kelvin: null
color_temp: null
hs_color: null
rgb_color: null
xy_color: null
is_deconz_group: false
friendly_name: Kellerlicht
supported_features: 40
var(--button-card-light-color) and var(--button-card-light-color-no-temperatue) are part of custom:button-card and reflects the colors being provided by a bulb (e.g. pink), see here.
Is there a brightness value when you turn on the lamp?
now i set the lamp manuall to 57%
and there is a value
min_color_temp_kelvin: 2702
max_color_temp_kelvin: 6535
min_mireds: 153
max_mireds: 370
supported_color_modes:
- color_temp
color_mode: color_temp
brightness: 145
color_temp_kelvin: 2702
color_temp: 370
hs_color:
- 28.391
- 65.659
rgb_color:
- 255
- 166
- 87
xy_color:
- 0.526
- 0.387
is_deconz_group: false
friendly_name: Kellerlicht
supported_features: 40
and then the card works again, but why is he doing this ?
when i then turn off the lamp the card is not visible again
Check your extra_styles.yaml. Most probably it’s not updated according to Matt’s latest one.
For me it fixed the issue.
3 Likes
I tried youre extra template to show the " imac " icon.
the code that i used:
# macbook CIRCLE
macbook:
custom_fields:
macbook: >
[[[
return (states[variables.macbook].state == 'on')
? '<ha-icon icon="cil:laptop-mac" style="width:100%;display:flex; color:var(--state-icon-active-color);"></ha-icon>'
: null;
]]]
styles:
custom_fields:
macbook:
- position: absolute
- height: auto
- border-radius: 50%
- right: 1%
- padding: 5%
- margin: -10%
- top: 30%
- width: 15%
- transition: top 250ms ease-out
# - background: >
# [[[
# return variables.state_on
# ? 'rgba(255, 255, 255, 0.4)'
# : '#3082b787';
# ]]]
Then on the card:
- type: custom:button-card
entity: light.lampen_inloopkast
name: Kast
variables:
motion: binary_sensor.motion_sensor_inloopkast_occupancy
macbook: binary_senor.imac
triggers_update: binary_sensor.motion_sensor_inloopkast_occupancy
double_tap_action:
action: more-info
template:
- light
- icon_spot
- motion
- macbook
for some reason i get i error on the card.
the macbook template i stored in a extra_circle.yaml file under button_card_templates
Two questions 
(Red) How can I align the date, day and event to the left no matter what I do I can only make the time align left.
(Yellow) I think it was up a while ago but I haven’t managed to fix it. But what is that causes the white borders around the cards and graphs?
1 Like
How did you do the buttons in the upper row?
has anyone the same experience since update hass to 2023 11.1? The swipe-card got transparent. (the first card is fix and the swiped cards are transparent)
Am I alone with this problem? So it seem not to be a common behaviour …?
Edit: The Problem only exists on my hass - docker container setup. Running hass on a VM everything woorks fine……
binary_senSor
@pedolsky thanks. What about for non-colour bulbs, that just have a brightness attribute - how can i create the desired gradient of yellow based on the brightness %, so that instead of a gradient of yellow (at 100%) down to brown (at 10%), I achieve yellow down to a pale yellow - as if there is a scale of opacity being applied to the yellow. I thought this is what the hsl values i posted would be used for, in accordance with the brightness % attribute of the bulb?
Oh typo, Will try this evening again.
The rest are of the config is oké? It’s no problem to have more variables?