You should be able to this without card_mod. Button Card is crazy adaptable. I’ll send you an example when I get back home from vacation. I like the look and style you added.
1 Like
@liQuid_cOOled Yes I was just thinking the same actually. Especially with so many button cards within the picture elements card.
Making that change should improve loading times.
Also need to improve scaling on some of the text and icon elements.
1 Like
Dear All,
as new user of HA and trying to make my dashbord…
I reach to have button as I would like…
But, I don’t understand how I can place the name of the card in certer to see all the words and in case of a name too long, to have two line…
So my goal is to have same size of button for all but with the name completely showed
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Rez
alignment: center
subtitle_tap_action:
action: none
title_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
name: Cuisine
show_state: false
button_type: button
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_cuisine
entity: input_boolean.lampe_cuisine
icon: mdi:lightbulb
styles:
grid:
- grid-template-areas: "\"/n\" \"/i\""
- grid-template-columns: min-content
- grid-template-rows: min-content
name:
- padding-left: px
- font-size: 16px
- font-weight: bold
img_cell:
- justify-content: 0
- position: absolute
- width: 100px
- height: 150px
- left: 50px
- bottom: null
- margin: 0px 0px -60px -50px
- background: var(--blue)
- border-radius: 300px
card:
- height: 100%
- width: 90%
- padding: 10px 0px 40px 40px
- type: conditional
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Table de cuisine
show_state: false
button_type: button
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_table_cuisine
entity: input_boolean.lampe_table_cuisine
icon: mdi:lightbulb
styles:
img_cell:
- justify-content: 0
- position: absolute
- width: 100px
- height: 150px
- left: 50px
- bottom: null
- margin: 0 0 -60px -30px
- background: var(--blue)
- border-radius: 300px
card:
- height: 100%
- width: 100%
- padding: 10px 0px 40px 40px
name:
- font-size: 16px
- justify-self: start
- font-weight: 500
- color: contrast20
- type: conditional
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Evier
show_state: false
button_type: button
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_evier
entity: input_boolean.lampe_evier
icon: mdi:lightbulb
styles:
img_cell:
- justify-content: 0
- position: absolute
- width: 100px
- height: 150px
- left: 50px
- bottom: null
- margin: 0 0 -60px -30px
- background: var(--blue)
- border-radius: 300px
card:
- height: 100%
- width: 100%
- padding: 10px 0px 40px 40px
name:
- font-size: 16px
- justify-self: start
- font-weight: 500
- color: contrast20
- type: conditional
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Meuble de cuisine
show_state: false
button_type: button
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_meuble_cuisine
entity: input_boolean.lampe_meuble_cuisine
icon: mdi:lightbulb
styles:
img_cell:
- justify-content: 0
- position: absolute
- width: 100px
- height: 150px
- left: 50px
- bottom: null
- margin: 0 0 -60px -30px
- background: var(--blue)
- border-radius: 300px
card:
- height: 100%
- width: 100%
- padding: 10px 0px 40px 40px
name:
- font-size: 16px
- justify-self: start
- font-weight: 500
- color: contrast20
- type: conditional
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Buanderie
show_state: false
button_type: button
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_buanderie
entity: input_boolean.lampe_buanderie
icon: mdi:lightbulb
styles:
img_cell:
- justify-content: 0
- position: absolute
- width: 100px
- height: 150px
- left: 50px
- bottom: null
- margin: 0 0 -60px -30px
- background: var(--blue)
- border-radius: 300px
card:
- height: 100%
- width: 100%
- padding: 10px 0px 40px 40px
name:
- font-size: 16px
- justify-self: start
- font-weight: 500
- color: contrast20
- type: conditional
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
As you can see, Button is to light on the light and I have a status of my lamps used to indicate with color of the bulb the status of my light, because the light is turn_on with Logo 8! and Alexa too.
Thanks for your help
Let’s start with this…
I recommend using a custom:layout-card to control the spacing for 5 buttons
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Rez
alignment: center
subtitle_tap_action:
action: none
title_tap_action:
action: none
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:button-card
name: Cuisine
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_cuisine
entity: input_boolean.lampe_cuisine
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: ' "n" "i" '
- type: custom:button-card
name: Table de cuisine
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_table_cuisine
entity: input_boolean.lampe_table_cuisine
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: normal
card:
- padding: 15%
grid:
- grid-template-areas: ' "n" "i" '
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Evier
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_evier
entity: input_boolean.lampe_evier
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: ' "n" "i" '
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Meuble de cuisine
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_meuble_cuisine
entity: input_boolean.lampe_meuble_cuisine
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: normal
card:
- padding: 15%
grid:
- grid-template-areas: ' "n" "i" '
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Buanderie
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_buanderie
entity: input_boolean.lampe_buanderie
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: ' "n" "i" '
Thanks for your quick reply.
Of course it’s really better.
Last question, why, when I made a second line of button, the hight of the button change? and not on the first raw? 
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Rez
alignment: center
subtitle_tap_action:
action: none
title_tap_action:
action: none
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:button-card
name: Cuisine
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_cuisine
entity: input_boolean.lampe_cuisine
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
- type: custom:button-card
name: Table cuisine
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_table_cuisine
entity: input_boolean.lampe_table_cuisine
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: normal
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Evier
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_evier
entity: input_boolean.lampe_evier
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Meuble cuisine
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_meuble_cuisine
entity: input_boolean.lampe_meuble_cuisine
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: normal
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Buanderie
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_buanderie
entity: input_boolean.lampe_buanderie
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:button-card
name: Salle Manger
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_sam
entity: input_boolean.lampe_sam
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
- type: custom:button-card
name: Salon
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_salon
entity: input_boolean.lampe_salon
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: normal
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Mur Télé
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_mur_tv
entity: input_boolean.lampe_mur_tv
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Hall
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_hall
entity: input_boolean.lampe_hall
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: normal
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Bureau
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_bureau
entity: input_boolean.lampe_bureau
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
I used - white-space: pre-line for cards with a single line name and - white-space: normal for multi-line names
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Rez
alignment: center
subtitle_tap_action:
action: none
title_tap_action:
action: none
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:button-card
name: Cuisine
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_cuisine
entity: input_boolean.lampe_cuisine
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
- type: custom:button-card
name: Table cuisine
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_table_cuisine
entity: input_boolean.lampe_table_cuisine
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: normal
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Evier
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_evier
entity: input_boolean.lampe_evier
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Meuble cuisine
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_meuble_cuisine
entity: input_boolean.lampe_meuble_cuisine
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: normal
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Buanderie
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_buanderie
entity: input_boolean.lampe_buanderie
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:button-card
name: Salle Manger
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_sam
entity: input_boolean.lampe_sam
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: normal
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
- type: custom:button-card
name: Salon
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_salon
entity: input_boolean.lampe_salon
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Mur Télé
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_mur_tv
entity: input_boolean.lampe_mur_tv
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Hall
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_hall
entity: input_boolean.lampe_hall
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
conditions:
- condition: state
entity: input_boolean.lampe_cuisine
state: true
icon:
- width: 50px
- left: 35px
- color: contrast50
- color: orange
- opacity: "0.8"
- type: custom:button-card
name: Bureau
show_state: false
button_type: button
size: 3rem
tap_action:
action: perform-action
perform_action: homeassistant.turn_on
target:
entity_id: input_boolean.int_bureau
entity: input_boolean.lampe_bureau
icon: mdi:lightbulb
styles:
name:
- font-size: 12px
- white-space: pre-line
card:
- padding: 15%
grid:
- grid-template-areas: " \"n\" \"i\" "
ok, understood…
Now I can develop for all my light.
Thanks a lot !
Is it possible to let the entity picture refer to an external url like https://…. ? When I set the entity picture to true and place the external url, it doesn’t work.
Sure, try this example for the background
entity: light.corner_stand
type: custom:button-card
show_state: false
show_name: false
show_icon: false
size: 20em
styles:
card:
- background-image: url('https://picsum.photos/200/300')
- background-size: cover
- padding: 50%
or this for the entity pic
entity: light.corner_stand
type: custom:button-card
entity_picture: https://picsum.photos/200/300
show_entity_picture: true
But then it covers the whole background. I think my only option is to create a custom field with a
You have other options, it’s just not clear what you are trying to achieve
entity: light.corner_stand
type: custom:button-card
entity_picture: https://picsum.photos/200/300
show_entity_picture: true
styles:
img_cell:
- width: 200px
- height: 40px
So many ways with this card
entity: light.corner_stand
type: custom:button-card
entity_picture: https://picsum.photos/200/300
show_entity_picture: true
styles:
icon:
- width: 50px
- height: 50px
- border-radius: 50%
name:
- align-self: middle
- justify-self: start
- margin-left: -40px
grid:
- grid-template-areas: "\"i n\" "
- grid-template-columns: 1fr 1fr 1fr
Help a newb. I tried pasting in your code, and this was the result…
Where do I start to make that example work?
My goal is to simply add some padding around some button text on a grid card…
Something between these two extremes (not enough space, or too much space when “render as square”.
It appears you don’t have the custom:button card installed via HACs
No I haven’t. I was scared off by…
Proceed with caution - HACS is not for everyone. If you’re a Home Assistant beginner or are looking for the most stable experience in your smart home, HACS is probably not for you.
Without HACs you cannot install card mod. That is what is needed to adjust custom cards you choose to install.
well, now that is 100% not true…
sure we can do it without HACS… just download the resource by hitting the dl button, save it in your config www folder and point to it (depending on yaml mode or not) in your resources file or in the UI setup)
that’s the way I still do it btw for any of the custom resources I test run.
But, HACS is way easier for regular resources yes, got to admit that.
1 Like
He just started…I’ll let you explain further 
1 Like
yeah well, to @thomba as a newbie (your words): you should really start easy, and grow into more detail when your experience with this stuff grows.
You cant just copy and paste the more complex configs and expect them to work out of the box.
Understanding you need to install custom resources for this type of config, and how to do that, is fundamental for you Home Assistant happiness going forward.
So, either follow the Install instructions from the card-mod repo (ok, it’s a bit outdated, but the idea is still the same)
or, follow the HACS instructions (indeed a bit complex, and clearly not written for the uninitiated… though still doable) and install any custom resource via that interface.
Are styles not applied when layout: is used?
Code:
type: custom:button-card
entity: sensor.entity_with_string
name: NAME_10px
layout: name_state
show_state: true
show_icon: false
styles:
card:
- background-color: "#393939"
icon:
- color: lightblue
name:
- font-size: 10px
state:
- color: red
- font-size: 20px
The name - “NAME_10px” - is shown in 10px
The state - “state_red_16px” - is shown with the same style as the name.
Is there a way to give the state a different style?
When you choose layout you are basically combining those two fields*(name and state). The styles you apply to name will apply to the state as well…
This would apply to both the name and state
name:
- color: red
- font-size: 30px
You are better off using grid styles
type: custom:button-card
entity: sensor.entity_with_string
name: test
show_state: true
show_icon: false
styles:
card:
- background-color: "#393939"
name:
- color: red
- font-size: 30px
state:
- color: blue
- font-size: 30px
grid:
- grid-template-areas: "\"n s\" "
- grid-template-columns: 1fr 1fr
1 Like