Thanks, I didn’t realize there was 4 with the layout: icon_label. I thought there was 3 rows where the icon and label share the same row.
I have that set. I’m using the following config to allow me to use carriage returns (\r\n) inside the label field.
label:
- text-transform: capitalize
- padding: 10px 20px
- font-size: 12px
- justify-self: start
- align-self: start
- color: white
- text-align: start;
- white-space: pre
the white-space: pre allows me to use carriage returns in css. See below if (playing) return Title: ${title}\r\nArtist: ${artist}.
- <<: *custom_button_remote_1column_active_glow_name_stateless
name: Media
icon: mdi:music-note
label_template: >
var playing = states['media_player.living_room_dot'].state === 'playing';
if (playing) {
var title = states['media_player.living_room_dot'].attributes.media_title;
var artist = states['media_player.living_room_dot'].attributes.media_artist;
return `Title: ${title}\r\nArtist: ${artist}`;
}
return 'No Media';
This shows up as a text block that is justified and aligned at the start.
However the multi-lines are centered based on the inheritance from the card in this line of the JS file, and I cannot override it.
hello
i had read the documentation but cannot find how to change backfground of the button
can help please?
type: vertical-stack
cards:
- type: ‘custom:button-card’
styles:
card:
- height: 40px
color_type: label-card
color: ‘rgb(44, 109, 214)’
name: ILUMINAÇÃO DA SALA
- type: horizontal-stack
cards:
- type: ‘custom:button-card’
entity: light.luz_sala_de_estar
name: SALA DE ESTAR
icon: ‘mdi:ceiling-light’
tap_action:
action: toggle
dbltap_action:
action: more-info
color_type: card
color: ‘rgb(61, 134, 244)’
- type: ‘custom:button-card’
I love this, if you wouldn’t mind could you look at this and tell me if im doing something wrong.
I set up livingroom, kitchen, diningroom. They are all listed but the entities won’t hide when pressing the button. I love this idea! Thanks
automation.yaml
- id:
alias: Diningroom Card - ON
trigger:
- platform: state
entity_id: input_boolean.diningroom
from: 'off'
to: 'on'
condition: []
action:
- service: homeassistant.turn_off
entity_id: group.input_diningroom_on
groups.yaml
input_diningroom_on:
name: Input Dining Room ON
view: no
entities:
- input_boolean.kitchen
- input_boolean.livingroom
@dmatik and @RomRider thank you for all the responses to my questions and even some that came along on the way (like the anchors)
I wanted to thank all of you for telling me about this and showing an example. It was pretty easy to setup and man it saved me over 6000 lines of code already!! (and not even done yet).
I also adapted the new grid style for the Homekit button I previously made with padding. They look pretty much the same now. I was actually forced using the grid style as a spinning icon would not spin around its own axis when using padding, so all my icons were flying over the screen (which was pretty funny actually).
For the ones wanting the Homekit button I posted earlier, here is the new code.
Add spin: true to the state, under value
I probably need to stare at this a bit longer but so far everything looks right. What I don’t see is your input_boolean declaration in configuration.yaml. Without that, none of this works. Also, don’t forget to restart home assistant.
EDIT: I noticed that your Group, Automation, and Lovelace code snippets are specific to the Dining Room Card. I assume you also have similar code for the Living Room and Ktichen as well, correct?
that looks mightily impressive, thanks for posting.
I am looking for a future replacement for my Tiles card, since that seems to no longer be maintained.
The huge thing about that card is, it sets a config style, and only per entity settings in the entity config below that.
Looking at your code, the full styling would be a config global setting, except for maybe names and icons.
Is there some way the Button card could be set to use a main global setting for all buttons, and only the button specific settings in the actual button?
I’m away from keyboard for 2 days so expect some latency in my answers 
