I think you do! I literally just googled:
alternating background images css
to get that page I linked
haha, yes, it was the 7th link on my google search, I landed on the 4th ā¦ still, daunting it will be set in a single button card template. Maybe @romrider will accept a feature request for this. Worth a shot, I can see a multitude of use cases for this, saving a lot of screen real estate.
Iām really struggling to get the font size to change inside a stack? Any help on what Iām doing wrong would be greatly appreciated for the few hairs I have left on my head! 
- cards:
- entity: input_boolean.mailbox_switch
hold_action:
action: more-info
name: Mail1
show_icon: true
tap_action:
action: toggle
type: 'custom:button-card'
style:
- font-size: 12px
- font-weight: bold
- entity: input_boolean.mailbox_switch
hold_action:
action: more-info
name: You've Got Mail
show_icon: true
tap_action:
action: toggle
type: 'custom:button-card
gridcol: 1 / 3
gridrow: 1 / 2
type: horizontal-stack
Shouldnāt it be
type: 'custom:button-card'
styles:
card:
- font-size: 12px
- font-weight: bold
1 Like
btw in this case it needed:
- position: absolute
- bottom: 0%
- right: 50%
- transform: translateX(+50%)
-50% does:
nice tool, thanks!
giving back, marquee on a label 
:
label: >
[[[ var caption = 'Next: ';
var alarm = states['sensor.next_alarm_day_only'].state;
if (entity.state !== 'Not set')
return `<div style='display: flex;
padding: 0px 5px 0px 5px;
align-items: center;
background: transparent;'>
<div>${caption}</div>
<marquee>
<span style='color: var(--primary-color);align-items: center;'>${alarm} at ${entity.state}</span>
</marquee>`;
return entity.state; ]]]
3 Likes
Iāve stumped myself. I created two buttons which are for the mostpart identical, with the exception that one entity_id is a sensor and the other is a switch. (superficial things like name and icon are different)
The result is:
-
The āDoorā button (sensor) displays its icon correctly while the āLR Fanā (switch) button does not.
-
If I change the
entity_idfor the 2nd button to another sensor (instead of a switch), everything works as it should. From what I can tell, the icon is blank simply because the entity is a switch. -
Iāve also determined removing
color_typebrings the icon back, but it appears as a different color (including when using the default skin), so that solution doesnāt really work either. I prefer to keepcolor_typein there because this is a WIP that will be incorporated into a decluttering card ā I need to keep the option available of making some of them blank-cards.
Any ideas? yaml below. Thanks!
type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: null
entity: sensor.lr_status_door
hold_action:
action: more-info
icon: 'mdi:door'
name: Door
show_last_changed: true
show_state: false
size: 30%
styles:
card:
- height: 100px
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: more-info
- type: 'custom:button-card'
color_type: null
entity: switch.dev_fan_lr
hold_action:
action: more-info
icon: 'mdi:fan'
name: LR Fan
show_last_changed: true
show_state: false
size: 30%
styles:
card:
- height: 100px
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: toggle
Iāve tried to fix it. Is it better now? Thanks for your help, itās really appreciated!
Please(!) help me understant one simple thing,
Iām working with lovelace, trying to understand how to make a template button.
Do I write the !Include <template_file.yaml> in the configuration.yaml file?
How the <template_file.yaml> syntax looks like?
refresh my memory, which post are we talking about here?
change icon field from
icon: 'mdi:battery-unknown'
to
icon: |
[[[
if (entity === undefined)
return 'mdi:battery-unknown';
var s = entity.state;
s = parseInt(s);
if (isNan(s))
return 'mdi:battery-unknown';
s = Math.floor(s/10) * 10;
if (s === 0)
return 'mdi:battery-10';
return `mdi:battery-${s}`;
]]]
and for color useā¦
color: |
[[[
if (entity === undefined)
return 'gray';
var s = entity.state;
s = parseInt(s);
if (isNan(s))
return 'gray';
if (s <= 15)
return 'red';
else if (s <= 49)
return 'yellow';
return 'green';
[[[
1 Like
Im trying to figure out how to change the icon of a button card with javascript but i suck at it.
What i want to do is, if anyone of sensor.lights_status, sensor.switches_status, sensor.sensors_status shows the state Problems I want fas:exclamation-triangle icon. If not i want the icon fas:home to be shown.
I dont even know where to start and havnt found any code i understand and might be able to rewrite. 
Help is much appreciated!
@r1kkie This might not be the best way, but my solution to your problem takes two steps and is probably simpler than you thought it might be.
- Create a sensor that tells you if any of the three sensors in question shows the state āProblems.ā
sensor:
- platform: template
sensors:
sensor_problems:
entity_id:
- sensor.lights_status
- sensor.switches_status
- sensor.sensors_status
friendly_name: 'Device Problems'
value_template: >-
{%- if is_state("sensor.lights_status", "Problems") -%}
Yes
{%- elif is_state("sensor.switches_status", "Problems") -%}
Yes
{%- elif is_state("sensor.sensors_status", "Problems") -%}
Yes
{%- else -%}
No
{%- endif -%}
- Include something like the below in your button config. When the entity.state is āYesā, the button icon will change for you (To show you what else you can do with it, Iāve also written it below so that the icon color will turn red to get your attention. You could remove this, or play around to make it even more eye-catching by changing the card background, make the icon blink, etc. All up to you!)
type: 'custom:button-card'
entity: sensor.sensor_problems
icon: 'fas:home'
name: Sensor Problems
state:
- value: 'Yes'
icon: 'fas:exclamation-triangle'
styles:
icon:
- color: redThanks for the reply and that worked great, didnt think about making a template sensor and then use that sensor as entity.
Did anyone add a custom logo to their button cards? I have devices from different manufacturers. Whenever they go offline for some reason (mostly due to Wink hub), I have to find the name of it and figure out which manufacturer and open their respective app to find out the issue.
Ex: (instead of notification circle, I want to show that the manufacturerās small logo)
Yeah you would have to use templating. If you look at the authorās Hass example you can see that he just uses html to link the logos. I am using same method to set custom material design icons for weather under time display. Here is how it looks and the code:
cards:
- entity: sensor.simple_time
show_icon: false
show_state: false
show_name: true
show_label: true
name: |
[[[
return states['sensor.simple_time'].state;
]]]
label: |
[[[ return `<ha-icon
icon="mdi:home-thermometer"
style="width: 18px; height: 18px; color: #5f6c83; opacity: 0.6;">
</ha-icon><span> ` + states['climate.living_room'].attributes.current_temperature +`Ā°F</span>
<ha-icon
icon="mdi:weather-cloudy"
style="padding-left: 3px; width: 18px; height: 18px; color: #5f6c83; opacity: 0.6;">
</ha-icon><span> ` + states['sensor.dark_sky_temperature'].state +`Ā°F</span>`
]]]
styles:
card:
- width: 140px
- padding-top: 11%
name:
- font-size: 27px
- padding-bottom: 5px
label:
- font-size: 15px
type: 'custom:button-card'
While we are on the subject, does anyone know how to add the dynamic Dark Sky weather icon instead of my static cloud?
1 Like
Thank you, @skynet01 I donāt think there is a way to display custom icon/image inside the notification ellipsis. Only icons from Materialdesignicons allowed.
I went ahead with āentity_pictureā and got this result instead.
- type: 'custom:button-card'
template: switches_lights_square
size: 70% # icon size
name: Bedroom
entity: switch.bedroom_light
entity_picture: '/local/kasalogo.png'
custom_fields:
notification: >
[[[ return `<ha-icon
icon="mdi:bed-king-outline"
style="width: 18px; height: 18px; color: #5f6c83; opacity: 0.6;">
</ha-icon>` ]]]
Cleaned up grid little bit and arranged icons to this effect.
1 Like
Iām wondering if anyone has any thoughts on my previous post? Iām still struggling with absent icons.