Thx for the hints! Slowly things are moving in the right direction.
The label: battery doesn’t work. It overwrites the battery %. The solution:
name: Battery
I just answered your Github issue. 
mode without an “s” is correct. I’ll take a look why the colors and borders aren’t working. If you could provide a piece of code (eg. a place where it won’t work for you), that would be helpful. Ideally just post it in the Github issue.
Did you ‘activate’ label by using show_label: true ?
Another day, another template
Modified the template for a homekit style look + quick toggles for the lights in each room.
Clicking on a room brings you to the details page of the room:
6 Likes
Can you share your configuration?
The room template config:
########################################################################################################
# #
# ROOM #
# #
########################################################################################################
room:
tap_action:
action: more-info
color: var(--google-grey-500)
show_icon: true
show_name: true
show_label: true
size: 20px
label: >-
[[[
if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}else{
return "Unavailable";
}
]]]
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"i toggle" "n n" "l l"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
icon:
- color: 'rgba(var(--color-theme),0.2)'
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
- margin-top: 12px
label:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
custom_fields:
toggle:
card:
entity: '[[[ return entity.entity_id ]]]'
name: '[[[ return name ]]]'
state:
- value: 'on'
icon: 'mdi:lightbulb'
styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow), 0.2)'
- value: 'off'
icon: 'mdi:lightbulb-off'
tap_action:
action: toggle
type: 'custom:button-card'
template:
- widget_icon
Usage in lovelace:
- type: 'custom:button-card'
template:
- room
- yellow
entity: light.keuken
name: Keuken
icon: mdi:silverware-fork-knife
tap_action:
action: navigate
navigation_path: '/lovelace-mobile/keuken/'
Not really optimized, so there will be some duplication from other components.
Tips to improve are welcome
5 Likes
What is the content of template ‘Yellow’?
2 Likes
Yes, sorry.
I added some more colors and gave them a more suitable name 
####################################################
# #
# COLOR #
# #
####################################################
yellow:
styles:
icon:
- color: rgba(var(--color-yellow), 1)
img_cell:
- background-color: rgba(var(--color-yellow), 0.2)
yellow_on:
state:
- styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow), 0.2)'
value: 'on'
####################################################
blue:
styles:
icon:
- color: rgba(var(--color-blue), 1)
img_cell:
- background-color: rgba(var(--color-blue), 0.2)
blue_on:
state:
- styles:
icon:
- color: 'rgba(var(--color-blue),1)'
img_cell:
- background-color: 'rgba(var(--color-blue), 0.2)'
value: 'on'
####################################################
green:
styles:
icon:
- color: rgba(var(--color-green), 1)
img_cell:
- background-color: rgba(var(--color-green), 0.2)
green_on:
state:
- id: green_on
styles:
icon:
- color: 'rgba(var(--color-green), 1)'
img_cell:
- background-color: 'rgba(var(--color-green), 0.2)'
value: 'on'
green_off:
state:
- id: green_off
styles:
icon:
- color: 'rgba(var(--color-green), 1)'
img_cell:
- background-color: 'rgba(var(--color-green), 0.2)'
value: 'off'
####################################################
red:
styles:
icon:
- color: rgba(var(--color-red), 1)
img_cell:
- background-color: rgba(var(--color-red), 0.2)
red_on:
state:
- id: red_on
styles:
icon:
- color: rgba(var(--color-red), 1)
img_cell:
- background-color: rgba(var(--color-red), 0.2)
value: 'on'
red_off:
state:
- id: red_off
styles:
icon:
- color: rgba(var(--color-red), 1)
img_cell:
- background-color: rgba(var(--color-red), 0.2)
value: 'off'
####################################################
violet:
styles:
icon:
- color: rgba(var(--color-violet), 1)
img_cell:
- background-color: rgba(var(--color-violet), 0.2)
@tben This will be a breaking change, but I think this will improve the repository 
2 Likes
The proposed change above allows for flexible configuration:
This is an input_boolean to change whether my motion sensor should control the lights:
- type: custom:button-card
entity: input_boolean.veranda_light_on
name: Sensor
label: "[[[ return entity.state === 'off' ? 'Active' : 'Not active' ]]]"
template:
- icon_info_bg
- green_off
- red_on
Love the design! Are you able to share the background image you use please?
This design is getting harder and harder to ignore, might have to start transferring mine over at some point
Yes, of course.
I stole it from here:
Add the lovelace-background: to your theme yaml file.
(can’t post it here, because of the char limit)
1 Like
Great work on the room button:)
I use groups instead of a singel light and wonder if its possible to add temperature etc… to his card instead of the dimmer value? Think this would be a nice feature to have a quick overview of the room.
@steinis I was thinking the same thing. Because i allready know the state of the lights by the color of the toggle button.
You can just change the label component from the template (if you know some javascript)
label: >-
[[[
if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}else{
return "Unavailable";
}
]]]
1 Like
Yeah was thinking it was something here. But how do I get/fetch more then one entity from lovelace config and into the generic template? I still want the light to be the main entity but I can easy add temp, lux etc to the card.
There are a few possibilities, but the easiest (and most flexible) will probably be to override the label property for each room:
- type: 'custom:button-card'
template:
- room
- yellow
entity: light.keuken
name: Keuken
icon: mdi:silverware-fork-knife
tap_action:
action: navigate
navigation_path: '/lovelace-mobile/keuken/'
label: '[[[ return states["sensor.temp_sensor_kitchen"].state + "°C" ]]]'
(not tested, but should be close to working)
2 Likes
nice, spot on:)
Hello I have a question. I am not a very good programmer. But is this possible? And the second question is there somebody how can build this?
3 Likes
Can someone help me put together climate card.
- entity: climate.haos_vir_hallway_climate
name: Hlajenje
template:
- airco_buttons
type: 'custom:button-card'
