I mean the background of the icon or img cell.
Hey guys, Iāve been searching for a way to change the background color of one of my button cards automatically every few seconds. More specifically; I would like to have the background color slowly fade into another color, kind of like the Philips HUE lights fading effect.
I found the extra_styling option and the pulse animation option but Iām not sure if this is the correct way for me to do it.
Anybody know of a way to create this effect? Any help is much appreciated!!
@Jordi83
The github has a perfect example for that: Injecting CSS with extra styles
Just readup on CSS for all the fun stuff you can do. From my own experience i know how hard that can be if you havent worked with CSS yes. So here is an example i made.
type: custom:button-card
card:
styles:
card:
- animation: bgcolorswap 10s linear infinite
extra_styles: >
@keyframes bgcolorswap {
0% {
background-color: red;
}
25% {
background-color: green;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-color: purple;
}
}
This will rotate between all the colors, remeber to end with the start color or it will snap.
(you can add more, just divide up the percentage. (instead of 25% steps you can do 10 steps of 10% .)
The 10 seconds is how long the whole animation will take. Infinite is just that. will loop forever.
Hi thanks for your response! hopefully i formated everythign correctly. Here is the code im using for the card:
type: grid
cards:
- type: weather-forecast
entity: weather.harwood_drive
show_forecast: false
- type: grid
cards:
- type: button
tap_action:
action: call-service
service: switch.toggle
service_data: {}
target:
device_id: 6417129118116af69721b40c498bb89a
show_state: true
entity: switch.garagedoor_sensor
name: Garage Door
icon: mdi:garage-variant
- type: button
tap_action:
action: toggle
entity: lock.front_door_lock
name: Front Door Lock
icon: mdi:door
show_state: true
- type: button
tap_action:
action: toggle
entity: light.den_8_keylinc_outside_light
name: Outside Sconce Light
icon: mdi:coach-lamp
- type: button
tap_action:
action: toggle
entity: switch.outside_deck_spot_lights
name: Patio Spot Lights
icon: mdi:track-light
show_state: false
columns: 4
square: false
- type: grid
cards:
- type: picture-entity
entity: camera.back_door
image: https://demo.home-assistant.io/stub_config/bedroom.png
camera_view: live
show_state: false
show_name: false
- type: picture-entity
entity: camera.front_door
image: https://demo.home-assistant.io/stub_config/bedroom.png
camera_view: live
show_state: false
show_name: false
columns: 2
square: false
- type: grid
cards:
- template: room
type: custom:decluttering-card
variables:
- entity: climate.upstairs
- icon: sofa
- name: LIVING ROOM
- show_icon: false
- temp_ent: climate.upstairs
- stat1_icon: thermometer
- stat1_pre: 'Temp: '
- stat1_suf: Ā°
- stat1_ent: sensor.upstairs_temperature
- stat2_icon: water-percent
- stat2_pre: 'Hum: '
- stat2_suf: '%'
- stat2_ent: sensor.upstairs_humidity
- icon1_ent: binary_sensor.den_rear_door
- icon1_name: Door
- icon1_tapaction: more-info
- icon1_holdaction: more-info
- icon1_colortype: null
- icon1_color1: tomato
- icon1_color2: null
- icon1_color3: red
- icon1_animate: blink 2s ease infinite
- icon1_state1: Open
- icon1_state2: Closed
- icon1_state3: unknown
- icon1_icon1: shield-off
- icon1_icon2: door
- icon1_icon3: help-circle
- icon2_ent: binary_sensor.office_motion
- icon2_name: Motion
- icon2_tapaction: more-info
- icon2_holdaction: more-info
- icon2_colortype: null
- icon2_color1: coral
- icon2_color2: null
- icon2_color3: red
- icon2_animate: null
- icon2_state1: 'Yes'
- icon2_state2: 'No'
- icon2_state3: unknown
- icon2_icon1: motion-sensor
- icon2_icon2: walk
- icon2_icon3: help-circle
- icon3_ent: switch.garage_light
- icon3_name: LR TV
- icon3_tapaction: toggle
- icon3_holdaction: more-info
- icon3_colortype: null
- icon3_color1: mediumseagreen
- icon3_color2: null
- icon3_color3: red
- icon3_animate: blink 2s ease infinite
- icon3_state1: 'on'
- icon3_state2: 'off'
- icon3_state3: unknown
- icon3_icon1: television-guide
- icon3_icon2: television
- icon3_icon3: help-circle
- icon4_ent: switch.garage_light
- icon4_name: LR Fan
- icon4_tapaction: more-info
- icon4_holdaction: more-info
- icon4_colortype: null
- icon4_color1: darkolivegreen
- icon4_color2: null
- icon4_color3: red
- icon4_animate: blink 2s ease infinite
- icon4_state1: 'on'
- icon4_state2: 'off'
- icon4_state3: unknown
- icon4_icon1: weather-windy
- icon4_icon2: fan
- icon4_icon3: help-circle
- icon5_ent: binary_sensor.baby_room_left
- icon5_name: Windows
- icon5_tapaction: more-info
- icon5_holdaction: more-info
- icon5_colortype: null
- icon5_color1: tomato
- icon5_color2: null
- icon5_color3: red
- icon5_animate: blink 2s ease infinite
- icon5_state1: Open
- icon5_state2: Closed
- icon5_state3: unknown
- icon5_icon1: window-open
- icon5_icon2: window-closed
- icon5_icon3: help-circle
- pu_title: Living Room
- pu_light1_ent: switch.garage_light
- pu_light1_name: Overheads
- pu_light1_colortype: icon
- pu_light2_ent: switch.garage_light
- pu_light2_name: Spots
- pu_light2_colortype: icon
- pu_climate_ent: climate.living_room_thermostat
- pu_climate_hum: sensor.upstairs_humidity
- pu_climate_temp: sensor.upstairs_temperature
- template: room
type: custom:decluttering-card
variables:
- entity: null
- icon: bed
- name: Master Bedroom
- show_icon: false
- temp_ent: climate.upstairs
- stat1_icon: thermometer
- stat1_pre: 'Temp: '
- stat1_suf: Ā°
- stat1_ent: sensor.upstairs_temperature
- stat2_icon: water-percent
- stat2_pre: 'Hum: '
- stat2_suf: '%'
- stat2_ent: sensor.upstairs_humidity
- icon1_ent: light.master_bedroom_lights_jackie
- icon1_name: Jackie Side High Hats
- icon1_tapaction: more-info
- icon1_holdaction: more-info
- icon1_colortype: null
- icon1_color1: tomato
- icon1_color2: null
- icon1_color3: red
- icon1_animate: blink 2s ease infinite
- icon1_state1: 'on'
- icon1_state2: 'off'
- icon1_state3: unknown
- icon1_icon1: lightbulb-on
- icon1_icon2: lightbulb
- icon1_icon3: help-circle
- icon2_ent: light.master_bedroom_lights_mike
- icon2_name: Mike Side High Hats
- icon2_tapaction: more-info
- icon2_holdaction: more-info
- icon2_colortype: null
- icon2_color1: coral
- icon2_color2: null
- icon2_color3: red
- icon2_animate: blink 2s ease infinite
- icon2_state1: 'on'
- icon2_state2: 'off'
- icon2_state3: unknown
- icon2_icon1: lightbulb-on
- icon2_icon2: lightbulb
- icon2_icon3: help-circle
- icon3_ent: light.master_bedroom_mantel_hat
- icon3_name: Mantel High Hats
- icon3_tapaction: toggle
- icon3_holdaction: more-info
- icon3_colortype: null
- icon3_color1: mediumseagreen
- icon3_color2: null
- icon3_color3: red
- icon3_animate: blink 2s ease infinite
- icon3_state1: 'on'
- icon3_state2: 'off'
- icon3_state3: unknown
- icon3_icon1: fireplace-off
- icon3_icon2: fireplace-off
- icon3_icon3: help-circle
- icon4_ent: light.master_bathroom_light
- icon4_name: Master Bath Light
- icon4_tapaction: more-info
- icon4_holdaction: more-info
- icon4_colortype: null
- icon4_color1: darkolivegreen
- icon4_color2: null
- icon4_color3: red
- icon4_animate: blink 2s ease infinite
- icon4_state1: 'on'
- icon4_state2: 'off'
- icon4_state3: unknown
- icon4_icon1: paper-roll
- icon4_icon2: paper-roll
- icon4_icon3: help-circle
- icon5_ent: binary_sensor.baby_room_left
- icon5_name: Windows
- icon5_tapaction: more-info
- icon5_holdaction: more-info
- icon5_colortype: null
- icon5_color1: tomato
- icon5_color2: null
- icon5_color3: red
- icon5_animate: blink 2s ease infinite
- icon5_state1: Open
- icon5_state2: Closed
- icon5_state3: unknown
- icon5_icon1: window-open
- icon5_icon2: window-closed
- icon5_icon3: help-circle
- pu_title: Living Room
- pu_light1_ent: switch.garage_light
- pu_light1_name: Overheads
- pu_light1_colortype: icon
- pu_light2_ent: switch.garage_light
- pu_light2_name: Spots
- pu_light2_colortype: icon
- pu_climate_ent: climate.living_room_thermostat
- pu_climate_hum: sensor.upstairs_humidity
- pu_climate_temp: sensor.upstairs_temperature
- template: room
type: custom:decluttering-card
variables:
- entity: climate.upstairs
- icon: sofa
- name: LIVING ROOM
- show_icon: false
- temp_ent: climate.upstairs
- stat1_icon: thermometer
- stat1_pre: 'Temp: '
- stat1_suf: Ā°
- stat1_ent: sensor.upstairs_temperature
- stat2_icon: water-percent
- stat2_pre: 'Hum: '
- stat2_suf: '%'
- stat2_ent: sensor.upstairs_humidity
- icon1_ent: binary_sensor.den_rear_door
- icon1_name: Door
- icon1_tapaction: more-info
- icon1_holdaction: more-info
- icon1_colortype: null
- icon1_color1: tomato
- icon1_color2: null
- icon1_color3: red
- icon1_animate: blink 2s ease infinite
- icon1_state1: Open
- icon1_state2: Closed
- icon1_state3: unknown
- icon1_icon1: shield-off
- icon1_icon2: door
- icon1_icon3: help-circle
- icon2_ent: binary_sensor.office_motion
- icon2_name: Motion
- icon2_tapaction: more-info
- icon2_holdaction: more-info
- icon2_colortype: null
- icon2_color1: coral
- icon2_color2: null
- icon2_color3: red
- icon2_animate: null
- icon2_state1: 'Yes'
- icon2_state2: 'No'
- icon2_state3: unknown
- icon2_icon1: motion-sensor
- icon2_icon2: walk
- icon2_icon3: help-circle
- icon3_ent: switch.garage_light
- icon3_name: LR TV
- icon3_tapaction: toggle
- icon3_holdaction: more-info
- icon3_colortype: null
- icon3_color1: mediumseagreen
- icon3_color2: null
- icon3_color3: red
- icon3_animate: blink 2s ease infinite
- icon3_state1: 'on'
- icon3_state2: 'off'
- icon3_state3: unknown
- icon3_icon1: television-guide
- icon3_icon2: television
- icon3_icon3: help-circle
- icon4_ent: switch.garage_light
- icon4_name: LR Fan
- icon4_tapaction: more-info
- icon4_holdaction: more-info
- icon4_colortype: null
- icon4_color1: darkolivegreen
- icon4_color2: null
- icon4_color3: red
- icon4_animate: blink 2s ease infinite
- icon4_state1: 'on'
- icon4_state2: 'off'
- icon4_state3: unknown
- icon4_icon1: weather-windy
- icon4_icon2: fan
- icon4_icon3: help-circle
- icon5_ent: binary_sensor.baby_room_left
- icon5_name: Windows
- icon5_tapaction: more-info
- icon5_holdaction: more-info
- icon5_colortype: null
- icon5_color1: tomato
- icon5_color2: null
- icon5_color3: red
- icon5_animate: blink 2s ease infinite
- icon5_state1: Open
- icon5_state2: Closed
- icon5_state3: unknown
- icon5_icon1: window-open
- icon5_icon2: window-closed
- icon5_icon3: help-circle
- pu_title: Living Room
- pu_light1_ent: switch.garage_light
- pu_light1_name: Overheads
- pu_light1_colortype: icon
- pu_light2_ent: switch.garage_light
- pu_light2_name: Spots
- pu_light2_colortype: icon
- pu_climate_ent: climate.living_room_thermostat
- pu_climate_hum: sensor.upstairs_humidity
- pu_climate_temp: sensor.upstairs_temperature
columns: 4
square: true
square: false
columns: 1
here is the code im using for the template which i pasted using the āRaw Configuration Editorā not sure if i did this correctly. Any help you can provide is extremely apricated!!
decluttering_templates:
room:
card:
custom_fields:
icon1: |
[[[
if (states['[[icon1_ent]]'].state == '[[icon1_state1]]')
return '<ha-icon icon="mdi:[[icon1_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon1_ent]]'].state == '[[icon1_state2]]')
return '<ha-icon icon="mdi:[[icon1_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon1_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon2: |
[[[
if (states['[[icon2_ent]]'].state == '[[icon2_state1]]')
return '<ha-icon icon="mdi:[[icon2_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon2_ent]]'].state == '[[icon2_state2]]')
return '<ha-icon icon="mdi:[[icon2_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon2_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon3: |
[[[
if (states['[[icon3_ent]]'].state == '[[icon3_state1]]')
return '<ha-icon icon="mdi:[[icon3_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon3_ent]]'].state == '[[icon3_state2]]')
return '<ha-icon icon="mdi:[[icon3_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon3_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon4: |
[[[
if (states['[[icon4_ent]]'].state == '[[icon4_state1]]')
return '<ha-icon icon="mdi:[[icon4_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon4_ent]]'].state == '[[icon4_state2]]')
return '<ha-icon icon="mdi:[[icon4_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon4_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon5: |
[[[
if (states['[[icon5_ent]]'].state == '[[icon5_state1]]')
return '<ha-icon icon="mdi:[[icon5_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon5_ent]]'].state == '[[icon5_state2]]')
return '<ha-icon icon="mdi:[[icon5_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon5_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon6: |
[[[
if (states['[[temp_ent]]'].state == "heat")
return '<ha-icon icon="mdi:fire" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[temp_ent]]'].state == "cool")
return '<ha-icon icon="mdi:snowflake" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
stat1: |
[[[
return `<ha-icon
icon="mdi:[[stat1_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat1_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat1_ent]]'].state}[[stat1_suf]]</span></span>`
]]]
stat2: |
[[[
return `<ha-icon
icon="mdi:[[stat2_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat2_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat2_ent]]'].state}[[stat2_suf]]</span></span>`
]]]
entity: '[[entity]]'
name: '[[name]]'
show_icon: false
show_label: false
show_state: false
size: 70%
state:
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: crimson
value: heat
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: lightblue
value: cool
styles:
card:
- font-size: 12px
- padding: 5px 3px 5px 3px
custom_fields:
icon1:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_color1]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state2]]') return "[[icon1_color2]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state3]]') return "[[icon1_color3]]";
else return null;
]]]
icon2:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_color1]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state2]]') return "[[icon2_color2]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state3]]') return "[[icon2_color3]]";
else return null;
]]]
icon3:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_color1]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state2]]') return "[[icon3_color2]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state3]]') return "[[icon3_color3]]";
else return null;
]]]
icon4:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_color1]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state2]]') return "[[icon4_color2]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state3]]') return "[[icon4_color3]]";
else return null;
]]]
icon5:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_color1]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state2]]') return "[[icon5_color2]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state3]]') return "[[icon5_color3]]";
else return null;
]]]
icon6:
- padding: 0px 0px 0px 0px
stat1:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat1_ent]]"].state < 20) return "lightblue";
if (states["[[stat1_ent]]"].state >= 20 && states["[[stat1_ent]]"].state < 28) return "mediumaquamarine";
else return "tomato";
]]]
stat2:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat2_ent]]"].state < 30) return "lightblue";
if (states["[[stat2_ent]]"].state >= 30 && states["[[stat2_ent]]"].state < 55) return "mediumaquamarine";
else return "tomato";
]]]
grid:
- grid-template-areas: >-
". n n n n icon6 ." ". stat1 stat1 stat1 stat1 stat1 ." ". stat2
stat2 stat2 stat2 stat2 ." ". icon1 icon2 icon3 icon4 icon5 ."
- grid-template-columns: 1fr 5fr 5fr 5fr 5fr 5fr 1fr
- grid-template-rows: 2fr 1fr 1fr 3fr
- padding: 0px 0px 0px 0px
icon:
- place-self: center
- padding: 0px 0px 3px 0px
name:
- justify-self: start
- font-size: 16px
- padding: 0px 0px 0px 3px
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- cards:
- cards:
- cards:
- color_type: '[[pu_light1_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light1_ent]]'
hold_action:
action: more-info
name: '[[pu_light1_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: custom:button-card
- color_type: '[[pu_light2_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light2_ent]]'
hold_action:
action: more-info
name: '[[pu_light2_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: custom:button-card
type: horizontal-stack
type: custom:vertical-stack-in-card
type: horizontal-stack
- cards:
- color_type: '[[icon1_colortype]]'
entity: '[[icon1_ent]]'
hold_action:
action: '[[icon1_holdaction]]'
icon: mdi:[[icon1_icon2]]
name: '[[icon1_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: mdi:[[icon1_icon1]]
styles:
icon:
- color: '[[icon1_color1]]'
- animation: '[[icon1_animate]]'
value: '[[icon1_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon1_tapaction]]'
type: custom:button-card
- color_type: '[[icon2_colortype]]'
entity: '[[icon2_ent]]'
hold_action:
action: '[[icon2_holdaction]]'
icon: mdi:[[icon2_icon2]]
name: '[[icon2_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: mdi:[[icon2_icon1]]
styles:
icon:
- color: '[[icon2_color1]]'
- animation: '[[icon2_animate]]'
value: '[[icon2_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon2_tapaction]]'
type: custom:button-card
- color_type: '[[icon3_colortype]]'
entity: '[[icon3_ent]]'
hold_action:
action: '[[icon3_holdaction]]'
icon: mdi:[[icon3_icon2]]
name: '[[icon3_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: mdi:[[icon3_icon1]]
styles:
icon:
- color: '[[icon3_color1]]'
- animation: '[[icon3_animate]]'
value: '[[icon3_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon3_tapaction]]'
type: custom:button-card
- color_type: '[[icon4_colortype]]'
entity: '[[icon4_ent]]'
hold_action:
action: '[[icon4_holdaction]]'
icon: mdi:[[icon4_icon2]]
name: '[[icon4_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: mdi:[[icon4_icon1]]
styles:
icon:
- color: '[[icon4_color1]]'
- animation: '[[icon4_animate]]'
value: '[[icon4_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon4_tapaction]]'
type: custom:button-card
- color_type: '[[icon5_colortype]]'
entity: '[[icon5_ent]]'
hold_action:
action: '[[icon5_holdaction]]'
icon: mdi:[[icon5_icon2]]
name: '[[icon5_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: mdi:[[icon5_icon1]]
styles:
icon:
- color: '[[icon5_color1]]'
- animation: '[[icon5_animate]]'
value: '[[icon5_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon5_tapaction]]'
type: custom:button-card
type: horizontal-stack
- color_type: '[[pu_therm_colortype]]'
custom_fields:
cardy:
card:
entity: '[[pu_climate_ent]]'
hide:
state: true
icon:
cool: mdi:snowflake
heating: mdi:fire
'off': mdi:stop-circle-outline
modes:
cool: null
heating: null
'off': null
name: Thermostat
sensors:
- attribute: hvac_action
entity: '[[pu_climate_ent]]'
name: Currently
- entity: '[[pu_climate_hum]]'
name: Humidity
type: custom:simple-thermostat
entity: light.curtis
show_icon: false
show_name: false
styles:
grid:
- grid-template-areas: '"cardy"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
type: custom:button-card
- cards:
- align_header: left
align_icon: left
animate: true
entities:
- color: '#f2ab48'
entity: '[[pu_climate_temp]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Temperature - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: custom:mini-graph-card
- align_header: left
align_icon: left
animate: true
entities:
- color: '#57a5f2'
entity: '[[pu_climate_hum]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Humidity - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: custom:mini-graph-card
type: horizontal-stack
type: custom:vertical-stack-in-card
deviceID:
- this
large: false
title: '[[pu_title]]'
triggers_update:
- '[[icon1_ent]]'
- '[[icon2_ent]]'
- '[[icon3_ent]]'
- '[[icon4_ent]]'
- '[[icon5_ent]]'
- '[[icon6_ent]]'
- '[[stat1_ent]]'
- '[[stat2_ent]]'
- '[[pu_light1_ent]]'
- '[[pu_light2_ent]]'
type: custom:button-card
Thanks for posting and the formatting. I now see where youāre using browser-mod. Your issue is most probably with its syntax. You should check the corresponding forum thread or documentation.
If I remember correctly, there was a change with browser_mod and the call service.
See here:
My code to call a pop-up is like this:
type: custom:button-card
entity: 'input_boolean.nap_mode'
icon: mdi:sleep
aspect_ratio: 1/1
name: Nap
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Timer Napmodus
deviceID:
- this
card:
type: entities
entities:
- entity: input_datetime.timer_nap_mode
- entity: timer.nap_mode_active
- entity: input_boolean.nap_mode_timer_on
Thank you so much Dujith! I will try this our later today. Much appreciated.
I have created several buttons card, but for some reason, the Icon color is not working for me in this card only. It is still showing a blue icon. My cards are fairly similiar, so I assume it is something minor I canāt see. Can you please assist.
type: custom:button-card
entity: switch.drive_gates
tap_action:
action: toggle
show_state: false
icon: mdi:car
color: green
size: 15%
label: Closed
show_label: true
styles:
card:
- '--mdc-ripple-color': red
- '--mdc-ripple-press-opacity': 0.5
grid:
- grid-template-areas: '"n" "i" "s" "l"'
name: Drive Gates
I assume you want to have a green icon?
Try adding icon to the styles section:
styles:
icon:
- color: green
Hi there,
i donāt know if itās possible to do what i want:
Iām using emoji as icon and i want to know if itās possible to modify their size.
label: |
[[[
return 'š¼';
]]]
Yes thatās possible using styles and font-size:
label: |
[[[
return 'š¼';
]]]
styles:
label:
- font-size: 200px
1 Like
Great! Thank you
Thanks for your prompt reply. Im not sure what exactly needs to be changed and if the change needs to be made in the button card it self in the love lace raw code. are you able to give me an example using the code i provided?
If anyone is interested im willing to compensate for help programming my HA system. Im fairly new to HA and could use a little help with customization.
You need to modify your template which you have in the raw configuration editor. Wherever you have
tap-action:
action: call-service
service: browser_mod.popup
service_data:
card:
xxxx
deviceID: this
you need to use the following:
tap-action:
action: fire-dom-event
browser_mod:
command: popup
card:
xxxx
Basically, whenever you have browser-mod_popup in your code, it needs to be replaced with the new syntax.
Thanks to the comment of Hekm77 the solution is terrifying simple:
styles:
img_cell:
- background: |
[[[
return 'rgb(' + entity.attributes.rgb_color + ',0.2)'
]]]
Greetings all! 
I am completely new to using templates/variables with my button cards, but can already see so many possibilities. Unfortunately, I just canāt seem to understand how to make them work. (At all 
). While the following obviously isnāt correct, it will hopefully explain what I was trying to accomplish:
type: custom:button-card
entity: light.den_lamp
tap_action:
action: |
[[[
if [light.den_lamp] is already on
call-service: light.turn_off
else
call-service: light.turn_on
service_data:
- brightness_pct: 70
- color_temp: 273
]]]
I ultimately have this working through a combination of an empty script and Node-Red, but if someone could perhaps show me the way it SHOULD be written it would definitely help me learn (and hopefully others as well)
Thanks!
I donāt think tap_action allows templating in its configuration. How about you use tap_action for turning the light on with its brightness and color_temp settings and use hold_action or double_tap_action for turning the light off?
Or use light.toggle as service for tap_action. This leaves out the brightness and temp settings thoughā¦