Could you show us the section of your raw configuration where you have the bigtemp template is included? (That is the section that begins with
standard:
color_type: card
size: 80%
...
standard-button:
template: standard
variables:
value_on: 'on'
...
bigtemp:
variables:
...
)
I did just like You Said.
I’ve pasted all code from “yaml for the template” into raw editor at the beginning before views: section.
I found some simmilar post
and im wondering because I have no button_card_templates: section im my configuration.
Im so confused.
Cheer up! 
Russell has already explained the way quite wonderfully, you simply missed the hint.
The template section in the raw config editor always starts with the unique key
button_card_templates:
(no indentation)
Below that all templates follow ( with indentation):
button_card_templates:
blablabla:
color_type: card
aspect_ratio: 1/1
more_blablabla:
styles:
card:
- border: none
And in exactly this way you apply the template „bigtemp“:
button_card_templates:
bigtemp:
variables:
hide: false
color: 'rgba(0,0,0,0.3)'
…
…
Your button-card should then look like this:
type: 'custom:button-card'
template: bigtemp
entity: …
icon: …
#or whatever you want to add
Hi Russell,
I want to change not the main icon without success. I can easy change the color but not the icon. Don’t know where I go wrong.
Motion: >
[[[
var icon= "mdi:motion-sensor-off";
if (states["binary_sensor.motion_sensor_master_bathroom_occupancy"].state == "on") {
icon="mdi:motion-sensor";
}
return `<ha-icon icon="${icon}";
style="width: 20px; height: 20px;">
</ha-icon ><span> <span style="color: var(--text-color-sensor);">${states["sensor.disk_use_percent_home"].state}%</span></span>`
]]]
Try removing the semi-colon at the end of
return `<ha-icon icon="${icon}";
like this:
return `<ha-icon icon="${icon}"
You are awesome ! This did the trick !
Hi Rusell,
I’m trying to build a colour picker inside love lace. I’m using the following to create the card.
cards:
- type: entities
entities:
- type: "custom:slider-entity-row"
entity: input_number.input_color
full_row: true
hide_state: true
attribute: hue
style: |
ha-card {
background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
}
Result
Now I want the icon associated with the colour picker to take the same colour and the light itself to take on the colour.
the logic is something like the following
if (states["input_number.input_color"].state <= 16.6)
return "rgb(255, states["input_number.input_color"].state/16.6*255, 0)";
else if (states["input_number.input_color"].state <= 33.2)
return "rgb(255- (states["input_number.input_color"].state-16.6)/16.6*255, 255, 0)";
else if (states["input_number.input_color"].state <= 49.8)
return "rgb(0, 255, (states["input_number.input_color"].state-33.2)/16.6*255)";
else if (states["input_number.input_color"].state <= 66.4)
return "rgb(0, 255- (states["input_number.input_color"].state-49.8)/16.6*255, 255)";
else if (states["input_number.input_color"].state <= 83)
return "rgb((states["input_number.input_color"].state-49.8)/16.6*255, 0, 255)";
else
return "rgb(255, 0, 255- (states["input_number.input_color"].state-83)/16.6*255)";
Any ideas ?
Within the card definition in Lovelace:
styles:
icon:
- color: |
[[[
if (states["input_number.input_color"].state <= 16.6)
return "rgb(255, states["input_number.input_color"].state/16.6*255, 0)";
if (states["input_number.input_color"].state <= 33.2)
return "rgb(255- (states["input_number.input_color"].state-16.6)/16.6*255, 255, 0)";
if (states["input_number.input_color"].state <= 49.8)
return "rgb(0, 255, (states["input_number.input_color"].state-33.2)/16.6*255)";
if (states["input_number.input_color"].state <= 66.4)
return "rgb(0, 255- (states["input_number.input_color"].state-49.8)/16.6*255, 255)";
if (states["input_number.input_color"].state <= 83)
return "rgb((states["input_number.input_color"].state-49.8)/16.6*255, 0, 255)";
return "rgb(255, 0, 255- (states["input_number.input_color"].state-83)/16.6*255)";
Note that because the returns don’t execute anything following, we don’t actually need the “else ifs”.
I haven’t tested this code, but it should be about what you need. I’m also assuming that the icon is the icon associated with the entity. If that’s not the case, there’s another way to code this.
Thank you for your help. I’m now looking to find a way to get this in a variable so I can use it multiple times. Any ideas there ?
And how can I create one card that includes multiple sliders. The purpose is to have one card for a light which you can easily change the color, brightness or switch to temperatue.
I couldnt get the override working. Has something changed?
@alkissack, it should work, but I just tested it locally and it didn’t work. I wonder if something changed in the custom button card itself since I wrote that post? If you change it directly in the template it works fine, so it’s the override feature that isn’t working as expected. Feel free to create a bug ticket on github for it and see if the author has any insight into the issue. You may use my example yaml for the ticket if you like. In the meantime, you can create a separate template with each combination of hot/cold range you need.
Thanks Keith
very beautiful slider!
but, how do you get this card assigned to a lamp?
Hi,
your dashboard looks great.
can you share it?
Hi,
I have a custom button card that when pressed opens a climate pop up. All good up to here.
I saw that climate has “hvac_modes” with states “heat” and “off” and hvac_action with 3 states: “idle”, “heating” and “off”.
I want that button to have 3 colors: red glow around button and red name/icon that blinks if my thermostat is actively heating, white name/icon when idle and blue if OFF.
All I manage to do is to get climate state (heat and off) and set red glow and red blinking name/icon when idle and blue when off.
This is my button code and button card:
type: custom:button-card
entity: climate.heating
icon: mdi:heat-wave
name: Climate
show_name: true
show_state: false
layout: vertical
size: 20%
styles:
card:
- height: 55px
- background-color: rgb(33,38,40)
- border: 1px solid rgb(80,80,80)
- border-radius: 10%
- font-family: sans-serif
- padding: 5%
- color: white
label:
- color: white
- font-size: 7px
- justify-self: start
- padding: 0px 2px
name:
- text-transform: none
- font-size: 13px
- justify-self: center
- padding: 0px 5px
icon:
- color: white
- width: 30px
- height: 30px
- padding: 0px 0px 5px 0px
state:
- justify-self: null
- font-size: 11px
- padding: 0px 0px
state:
- value: heat
styles:
state:
- color: red
name:
- color: red
icon:
- color: red
- animation:
- blink 2s linear infinite
card:
- filter: drop-shadow(0 0 1.0rem rgb(136,8,8))
- border: 10px
- value: idle
styles:
state:
- color: white
name:
- color: white
icon:
- color: white
- value: 'off'
styles:
state:
- color: green
name:
- color: green
icon:
- color: green
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Heating
style:
$: |
.mdc-dialog
.mdc-dialog__container
.mdc-dialog__surface {
border-radius: 25px;
}
.mdc-dialog
.mdc-dialog__content {
padding: 40px 40px !important;
}
content:
type: horizontal-stack
cards:
- type: custom:better-thermostat-ui-card
entity: climate.heating
eco_temperature: 22
double_tap_action:
action: more-info
How do I set button collors and animations based on those 3 hvac_action instead of hvac_modes states?
Sorry to reply to a post over 2 years old, but this dashboard is incredible. I marvel that you were able to do most of this with the custom button card. Do you have the lovelace yaml code posted on github, or can you post it here? I would love to study it to better understand the techniques you used. If not, do you mind if I ask you a few questions about it?
Hi Keith, trying to show humidity to the bigtemp card, the humidity sensor for NEST is an individual sensor and doesn’t have attributes, instead it is the state.
Any advice how to show it on the card ?
@Mmohab, you should be able to change the logic in the javascript for the humidity card in custom fields.
custom_fields:
humidity:
card:
state_display: |
[[[
if (entity.attributes.current_humidity)
return entity.attributes.current_humidity;
return variables.alt_humidity_entity && states[variables.alt_humidity_entity].state;
]]]
Thanks a lot, done