Stupid question, but I’ve noticed that when I use layout-card, the custom button card will grow in height even thought I’ve set a height for the button card. I think the layout card does some scaling. Any idea how to force the height of the button card?
I’ve tried “!important” and it had no effect:
style: |
ha-card {
height: 36px !important;
}
Don’t use card-mod on button-card. Use directly the configuration of button-card. Everything is in the documentation on github.
styles:
card:
- height: 36px
hi
i’m stuck on my custom button cards…
I want the icon to be aligned to the left instead of center, isnt there an easy way to do this?
Instead of using the grid.
I tried the grid thing from the example of the apple homekit like buttons, but even a 1:1 copy doenst work
This is my code
- type: custom:button-card
entity: automation.notificatie_afval
show_label: true
show_state: true
size: 30%
icon: mdi:delete
styles:
card:
- font-size: 14px
- height: 120px
- width: 120px
name:
- justify-self: start
- padding-left: 10px
state:
- justify-self: start
- padding-left: 10pxSecond question i have, my entity name is too long to fit on 1 line inside the button.
Is there a way so it uses 2 lines?
How?
Thx in advance! lovely card!
Found it for the icon, just seeking for the 2 lines of text
That should do it
styles:
name:
- white-space: normal
That fixes it indeed.
But now… its too much
How do i set it to have 2 lines and then cut it off?
That should probably work, but not sure:
styles:
name:
- line-clamp: 2
It gets back to 1
I also want the color of the card to change to color x and the color of the icon to color y
if the state is on.
i tried by adding
color_type: card
and then adding styles
and:
state:
- value: 'on'
styles:
- state:
- color: 'rgb(255,0,0)'
- icon:
- color: 'rgb(0,0,255)'but it doesnt change
styles is not an array, it’s an object.
For your multi-line problem I don’t know then. You’ll have to search the internet 
styles:
state:
- color: 'rgb(255,0,0)'
icon:
- color: 'rgb(0,0,255)'
Ok for the multi-line, will look further but i tried google before.
What do you mean, styles is not an array
how do i fix it (the colors)?
I dont see any difference with my code
(knowledge about colors and themes, is not that good here)
My code:
styles:
state:
Your code:
styles:
- state:
That’s what I mean by styles not being an array
Hi,
Sorry I should have clarified, I tried direct configuration as well, it didn’t matter. Layout card will scale the width and height. Here is the compete card that will show the issue.
id: test3
title: TEST3
icon: mdi:test-tube
panel: true
path: test3
cards:
- type: custom:layout-card
#layout: vertical
layout: horizontal
max_width: [50%, 50%]
#max_width: [auto, auto]
cards:
- type: "custom:button-card"
color_type: label-card
name: Alarm Panel2
styles:
card:
- height: 36px
#- width: auto
#- width: 800px
- type: "custom:button-card"
#color_type: label-card
name: Alarm Panel3
style: |
ha-card {
height: 36px !important;
}
ok clear
It still doesnt change the color though; not sure what im doing else wrong
cards:
- type: custom:button-card
entity: automation.lichten_inkom_aan_bij_thuiskomst
show_label: true
show_state: true
size: 30%
icon: mdi:lightbulb
color_type: card
styles:
card:
- font-size: 14px
- height: 120px
- width: 120px
img_cell:
- justify-content: start
- align-items: start
- padding-left: 20px
name:
- white-space: unset
- justify-self: start
- padding-left: 10px
state:
- value: 'on'
styles:
state:
- color: 'rgb(255,0,0)'
icon:
- color: 'rgb(0,0,255)'
- justify-self: start
- padding-left: 10pxstate is indented incorrectly. You’re also combining state attribute with state style attribute. Don’t mix up the 2.
- type: custom:button-card
entity: automation.lichten_inkom_aan_bij_thuiskomst
show_label: true
show_state: true
size: 30%
icon: mdi:lightbulb
color_type: card
styles:
card:
- font-size: 14px
- height: 120px
- width: 120px
img_cell:
- justify-content: start
- align-items: start
- padding-left: 20px
name:
- white-space: unset
- justify-self: start
- padding-left: 10px
state:
- justify-self: start
- padding-left: 10px
state:
- value: 'on'
styles:
state:
- color: 'rgb(255,0,0)'
icon:
- color: 'rgb(0,0,255)'Ok thats clear, its working now indeed
only thing is i’ve set the icon color now, but how do i keep that and adjust the button color?
i need to adjust color_type then?
or can i add something like:
state:
- value: 'on'
styles:
state:
- color: 'rgb(255,0,0)'
icon:
- color: 'rgb(0,0,255)'
button:
- color: ....i cant do that right.
Are you talking about the background color of the button card?
yes i am, thanks
card:
- background: 'rgb(0,0,255)'
Doesnt work 
I’ll explain: current background is good for state off, i only want to change background when state is on
so i tried:
cards:
- type: horizontal-stack
title: Automatisaties Lichten
cards:
- type: custom:button-card
entity: automation.lichten_inkom_aan_bij_thuiskomst
show_label: true
show_state: true
size: 30%
icon: mdi:lightbulb
color_type: card
styles:
card:
- font-size: 14px
- height: 120px
- width: 120px
- background
img_cell:
- justify-content: start
- align-items: start
- padding-left: 20px
name:
- white-space: unset
- justify-self: start
- padding-left: 10px
state:
- justify-self: start
- padding-left: 10px
state:
- value: 'on'
styles:
state:
- color: 'rgba(255, 255, 255, 0.4)'
icon:
- color: 'rgb(255,140,0)'
card:
- background: 'rgb(0,0,255)'What is - background doing alone in:
styles:
card:
- background