Drop - justify-self: start for air, door and fence in the styles section.
thanks for replying that fast!!, but sadly i’m still getting “Master” word shrunk
Sorry, I’ve overlooked that. Change grid-template-columns to
- grid-template-columns: auto 1fr 1fr
thanks! it did work 
I’m trying to learn, and I have read up as good as I can right now.
But I think I need some help here…
I want to create a template for these buttons;
Could someone help me out with the coding. I’m trying my best by my self, but I aint getting any great results… 
Absolutely not.
I’m just trying to learn how to create buttons for my specific needs and likings.
No need to be harsh.
This is the actual (the newest) template for the light_slider (actual means, it collapses the slider when off):
card_light_slider:
variables:
ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
grid:
- row-gap: 12px
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
item2:
card:
type: conditional
conditions:
- entity: "[[[ return entity.entity_id ]]]"
state: 'on'
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
Without the “collapse”:
card_light_slider:
variables:
ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
grid:
- row-gap: 12px
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
item2:
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
1 Like
Hello,
I would like to create a button-card for my HVAC based on what I’ve made for my Hue light like that:
And the code:
type: custom:button-card
entity: light.veranda
name: Véranda
icon: mdi:floor-lamp-dual
aspect_ratio: 11/9
state:
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
- border: 1px rgba(80, 80, 80) solid
name:
- color: rgba(0, 0, 0, 0.6)
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 50%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: true
- transition: true
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
And the DEV of my entity HVAC:
I would like:
- on tap_action make a toggle off<>heat_cool of my HAVC
- double tap action, show the more info of my Climate_sejour
- show in the head right circle (or not in the circle):
- the current_temperature
- the temperature (consign)
Hi guys!
I have a new question…why in Home Assistant browser (PC) interface I see the complete card, and from the APP / Smartphone I see it cut below (and square)?
Did I get something wrong with the code?
Thanks
This is the code:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 6%
- font-size: 100%
custom_fields:
alarm:
- align-self: start
- position: absolute
- height: 100%
- width: 100%
- line-height: 28px
custom_fields:
alarm:
card:
type: custom:alarmo-card
name: ALLARME
entity: alarm_control_panel.alarmo
no_card: false
use_clear_icon: true
style: |
ha-card {
box-shadow: none;
PC Browser:
Smartphone/APP
Hello,
After hours of debugging i didn’t find the reason of the bug.
My button do not change of color, text did, but not the color :
chips_icon:
template: chips
show_icon: true
size: 80%
show_state: false
tap_action:
action: more-info
entity: '[[[ return variables.entity ]]]'
variables:
icon: "mdi:arrow-left"
entity: "alarm_control_panel.tyxal_alarm"
prefix: ""
icon: '[[[ return variables.icon ]]]'
label: |
[[[
if (states[variables.entity].state == 'disarmed'|| states[variables.entity].state == 'off'){
return variables.prefix + ` Désactivée`
}
if (states[variables.entity].state == 'armed' || states[variables.entity].state == 'on'){
return variables.prefix + ` Activ..e`
}
return '??' ;
]]]
styles:
grid:
- grid-template-areas: '"i l"'
label:
- justify-self: center
- padding: 0px 6px
- font-weight: bold
- font-size: 14px
chips_color:
template: chips
show_icon: true
size: 80%
show_state: false
triggers_update: all
tap_action:
action: more-info
entity: '[[[ return variables.entity ]]]'
variables:
icon: "mdi:arrow-left"
entity: ""
prefix: ""
min: 0
max: 6
icon: '[[[ return variables.icon ]]]'
label: |
[[[
if (states[variables.entity].state < variables.min)
return variables.prefix + " bas"
if (states[variables.entity].state > variables.min && states[variables.entity].state < variables.max)
return variables.prefix + " moyen"
if (states[variables.entity].state > variables.max)
return variables.prefix + " haut"
return '??' ;
]]]
states:
- operator: '>'
value: variables.max
styles:
icon:
- color: 'rgba(var(--color-red),1)'
img_cell:
- background-color: 'rgba(var(--color-red),0.2)'
card:
- background-color: 'rgba(var(--color-background-red),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-red-text),1)'
label:
- color: 'rgba(var(--color-red-text),1)'
- operator: '<'
styles:
icon:
- color: 'rgba(var(--color-green),1)'
img_cell:
- background-color: 'rgba(var(--color-green),0.2)'
card:
- background-color: 'rgba(var(--color-background-green),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-green-text),1)'
label:
- color: 'rgba(var(--color-green-text),1)'
value: variables.min
- operator: 'default'
styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow),0.2)'
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-yellow-text),1)'
label:
- color: 'rgba(var(--color-yellow-text),1)'
styles:
grid:
- grid-template-areas: '"i l"'
label:
- justify-self: center
- padding: 0px 6px
- font-weight: bold
- font-size: 14px
- template: chips_color
variables:
icon: "mdi:sunglasses"
entity: "sensor.wattignies_uv"
prefix: "UV :"
min: 3
max: 6
type: 'custom:button-card'
any idea ?
EDIT : theme :
#main interface colors
primary-color: '#434343'
google-red : '#F54436'
google-green : '#01C852'
google-yellow : '#FF9101'
google-blue : '#3D5AFE'
google-violet : '#661FFF'
google-grey: '#BBBBBB'
color-red : 245, 68, 54
color-green : 1, 200, 82
color-yellow : 255, 145, 1
color-blue : 61, 90, 254
color-purple : 102, 31, 255
color-grey : 187, 187, 187
color-pink : 233, 30, 99
color-theme : 51,51,51
color-background-yellow : 250, 250, 250
color-background-blue : 250, 250, 250
color-background-green : 250, 250, 250
color-background-red : 250, 250, 250
color-yellow-text: 'var(--primary-text-color)'
color-blue-text: 'var(--primary-text-color)'
color-green-text: 'var(--primary-text-color)'
color-red-text: 'var(--primary-text-color)'
opacity-bg: '1'
thanks
Nothing wrong with th card, it shows exactly like it should. Smaller screen = card get’s fitted. Everything is there, the border, the margins/paddings, looks fine! What do you want to have different?
Forget it, just realised, the last line of buttons is missing… I’ll have to look again.
What exactly is not working? Colors is, unfortunately, not specific enough. 
My guess, you’re getting always the “default” styles, as the variables in value should normally be a javascript template. So first change
states:
- operator: '>'
value: variables.max
to
states:
- operator: '>'
value: "[[[ return variables.max ]]]"
and see if it works like you want. Otherwise specify a little more, or just show a picture of what it looks with this code, and what you want to have in the end.
After looking at it again, my guess would be the aspect_ratio. Remove the aspect ratio and see how hard it hits the design 
… I’m quite sure, you’re limiting the resize (because of the aspect_ratio) and therefor it get’s cut in smaller windows.
Try experimenting with it in the browser window, where you can make the window bigger and smaller to see the result.
EDIT: Google Chrome has a good develper tool, there you can view your layout in different sizes (pre-configured)
If I delete aspect_ratio, the card disappears…
That’s unfortunate, but it is the source of the display problem… 
I’d say you’d have to start again, as with aspect_ratio you won’t get the result you wanted. I can only speak for the Minimalist “theme”, and there the alarm card is handled a lot different than other cards. You might want to take a look at the alarm_card clemalex made, maybe this helps you? 
Thanks for your help.
Chips_icon is the “UV : HAUT” card
The card do not update the style (text-color or background color) according the entity state.
If entity.uv > max (6), the card should display “prefix” + “haut” (works well) and change the background color to red (not working)
Edit : I tried your fix but it doesn’t work 
I can’t try it myself, can’t get to my PC right now, sorry. So bear with me…
Have you tried using the template function instead for the operator? Like so:
states:
- operator: template
value: >
[[[
if (states[variables.entity].state < variables.min)
return true;
]]]
styles:
[...]
And for the other states as well. The value needs to return true, to use the style underneath its definition.
And you should leave the “fix” from before in place. Even if it wasn’t the culprit here, it is the best way to use it like this.
EDIT: any error messages in the developer console of the browser?
Yes template works well ! Thanks a lot !! 
1 Like
Hi,
I have the following issue:
In order to display an adress I readout the subattribute of a places sensor:
var street = states['sensor.joergs_location'].attributes.street
Sometimes, this attribute is null.
Then an error appears:
ButtonCardJSTemplateError: TypeError: Cannot read properties of null (reading 'substring') in 'var street = states['sensor.joergs_location'].attributes.street var number = states['sensor.jo...'
How can I manage this error so that the card is simply displayed with ‘unknown’?
I tried to insert an if clouse 'If states[‘sensor.joergs_location’].attributes.street is not null or != null
That doesn’t work. Has anybody an idea?
Maybe for better understanding, the whole code looks like this and basically works:
name: |
[[[
var street = states['sensor.joergs_location'].attributes.street
var number = states['sensor.joergs_location'].attributes.street_number
street = street.substring(0,30)
if (states['sensor.joergs_location'].attributes.devicetracker_zone == 'not_home')
return street + ' ' + number;
else return states['person.jorg'].state;
]]]
label: |
[[[
var town = states['sensor.joergs_location'].attributes.city
var postal = states['sensor.joergs_location'].attributes.postal_town
town = town.substring(0,30)
postal = postal.substring(0,30)
if (town == '-') return postal;
else return town;
]]]