It’s your filler cards that are the problem. Post those templates.
use:
name:
- text-transform: capitalize
- font-size: 13px
- font-weight: bold
- align-self: end
great! thanks.
now why does this work? the align-self: end is about vertical positioning, which was already done in the absolute, 5% settings, and I coudn’t get it to position correctly horizontally…
btw, would you know how to solve the other quest I posted above this, on alternating background images? I realize now I have stacked images with the comma separator. Hence no errors. But, I want them to alternate automatically, like an animation. Slideshow if must. Hope to not have to use keyframes, because that is quite daunting in a js template.
have a look at this, seems rather complicated just to alternate 2 images…
because text align only aligns the text inside the bounds of the box, which is perfectly the size of your text. Basically doing nothing. If you used the position: aboslute, you would have also had to set the horiztonal position and divided the position in half.
- position: absolute
- bottom: 5%
- right: 50%
- transform: translateX(-50%)
BTW, I don’t have this memorized, I Just google my options. You should start that too with CSS.
This page might satisfy your needs but it looks like you have to build html using a template and then apply the a style. Not sure how you’d get the animation to work. It may not be possible without a custom card.
yes! that is what I was looking for indeed. will certainly try that and see what happens. If it works, it would give an even better control over the vertical positioning. great.
quite, this is my main source…CSS Tutorial though it sometimes helps to know what to look for 
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.