I am working on a set of similar icons that I need - such as the OSRAM smart+ plug icon.
Here’s how it looks:
My source code from button_card_templates.yaml:
https://pastecode.io/s/ogu5jyy8
1 Like
Hi Guys,
can anyone help me with this:
button:
- type: custom:button-card
entity: weather.home
name: Wetter
template: weather_button_style
template part:
custom_fields:
temperature: >
[[[
const temp = entity.attributes.temperature
return `${temp}°`
]]]
entity ID: weather.home
It dosent show me a Temperature…
Out of the box: no
The room titles are not buttons, just that: titles…
However… with some additional code you could hide the original titles and replace them with a grid containing custom:button-card which can trigger anything… so in theory this is certainly possible
I like the idea a lot, but currently don’t think I can help out with implementing this.
try:
custom_fields:
temperature: >
[[[ {
const temp = entity.attributes.temperature;
return `${temp}°`;
} ]]]
Hi Giblet,
dosent work 
Just the Icon work:
Can you send the complete template for this button?
1 Like
Ok I had a stab at it anyway, and I found a way to do it
It’s not perfect, but maybe someone can help make it better.
For my resolution it’s very close to Mattias’ work, just a few pixels different, but maybe for other resolutions it won’t work as well
EDIT: I changed some things, and it look pretty much perfect now
EDIT2: Ok, so let’s make a template, and show how to add a lights group
EDIT3: An important addendum, if you want to replace the title of a swipe-card, your browser will go bananas… to make it work put the custom:mod-card (which is around the custom:swipe-card) in a grid card with columns: 1
See the example at the bottom of this post
Add the following to button_card_templates.yaml:
#################################################
# #
# TITLE_BUTTON #
# #
#################################################
title_button:
styles:
card:
- background: none
- padding: 0px 0px 0px 0px
name:
- justify-self: left
- font-size: 2.4vw
- font-family: SF Text
- font-weight: 500
- line-height: 0
- color: rgba(255, 255, 255, 0.8)
- letter-spacing: 0.5px
- padding: 1vw 0px 2vw 0px
Then, as the image shows, you need to add a vertical image within the grids, within ui-lovelace.yaml
The first item in the vertical stack is going to be a custom:button-card with the template we added
In the custom button card you can define you tap_action, for me it’s to toggle a group of lights
- type: vertical-stack
view_layout:
grid-area: Woonkamer
cards:
- type: custom:button-card
name: Woonkamer
show_icon: false
show_state: false
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.living_kitchen
template: title_button
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: light.livingroom_switches
name: Lampen
hold_action: !include popup/livingroom_lights.yaml
template:
- base
- icon_shade
- type: custom:button-card
entity: light.livingroom_dimmers
name: Dimmers
hold_action: !include popup/livingroom_dimmers.yaml
template:
- base
- icon_livinroom
- type: custom:button-card
entity: sensor.lumi_lumi_weather_temperature
name: Temperatuur
tap_action: !include popup/temperature.yaml
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- sensor.lumi_lumi_weather_temperature
template:
- temperature
- icon_temp
variables:
popup_name: Woonkamer
- type: custom:button-card
entity: cover.curtains
name: Gordijnen
hold_action: !include popup/curtains.yaml
template:
- curtains
- icon_curtains_combined
→ Example to add a clickable title to a swipe-card
- type: vertical-stack
view_layout:
grid-area: Overig
cards:
- type: custom:button-card
name: Overig
show_icon: false
show_state: false
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.lights_other
template: title_button
- type: grid
columns: 1
cards:
- type: custom:mod-card
style:
swipe-card:
$: |
.swiper-container {
padding: 0px 0px 20px 0px !important;
}
card:
type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: light.kitchen
name: Keuken
hold_action: !include popup/dimmer.yaml
template:
- dimmer
- icon_spot
6 Likes
I’m on mac safari/chrome as well. are you sure you’ve updated themes?
If you don’t want titles, remove title from the grid cards
- type: grid
title: Media
1 Like
btw no-temperature is broken button-card/issues/509, should be easy to write a template for it instead though
see if this works for starters
name: >
[[[ return states['weather.home'].attributes.temperature; ]]]
Wow, don’t know what to say… that’s looks great.
Thanks for spending the time on that, I should have some time this evening to try it out, but seems like you did a great job on it already 
Im a bit noob when it comes to Hass but not code/tech) is there any tutorial how to install / use this
HI Mattias,
same problem
Nothing more than the first post and the github page linked within it
Generally the easiest way: backup your HA instance, copy the config from Mattias to your HA instance, and start editing the config to match/include your config
When you say “copy the config from Mattias to your HA instance,” is this the whole file structure?
I did this but get errors everywhere.
Is it a case if jsut fixing until it goes?
What am I doing wrong that the square incorrectly cuts off at the bottom?
My wrong code from ui-lovelace.yaml:
- type: grid
title: Bezpieczeństwo
view_layout:
grid-area: bezpieczeństwo
columns: 1
cards:
- type: custom:swipe-card
start_card: 4
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: binary_sensor.ogrod_drzwi
name: Ogród drzwi
hold_action: !include popup/sensor_ogroddrzwi.yaml
template:
- base
- icon_closet
- type: custom:button-card
entity: binary_sensor.piwnica_drzwi
name: Piwnica drzwi
hold_action: !include popup/sensor_piwnicadrzwi.yaml
template:
- base
- icon_closet
- type: custom:button-card
entity: binary_sensor.salon_balkon
name: Salon balkon
hold_action: !include popup/sensor_salonbalkon.yaml
template:
- base
- icon_closet
- type: custom:button-card
entity: binary_sensor.brama_garazowa
name: Brama garażowa
hold_action: !include popup/sensor_bramagarazowa.yaml
template:
- base
- icon_garagedoor
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: binary_sensor.piotr_balkon
name: Piotr balkon
hold_action: !include popup/sensor_piotrbalkon.yaml
template:
- base
- icon_closet
- type: custom:button-card
entity: binary_sensor.dziadek_pokoj_drzwi
name: Dziadek pokój
hold_action: !include popup/sensor_dziadekpokoj_drzwi.yaml
template:
- base
- icon_closet
- type: custom:button-card
entity: light.brama_parking
name: Brama parking
template:
- base
- icon_gate
Your #BASE# comment has the same indentation as your temperature template. Don’t do that 
custom_fields:
temperature: >
[[[
const temp = entity.attributes.temperature
return `${temp}°`
]]]
#BASE#
homekit_style:
aspect_ratio: 1/1
show_label: true
show_state: true