kman42
February 3, 2024, 5:50pm
1
I’m trying to create a custom button card that will show icons for two lamps and a title below. See right tile in the image below.
Basically, I want this tile to be similar to the two on the left with a border around the large square tile, but not around the individual lamp icons or the title (Family Room). Here’s my code so far:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.family_room_left_table_bulb
icon: mdi:lamp
show_name: false
- type: custom:button-card
entity: light.family_room_left_table_bulb
icon: mdi:lamp
show_name: false
- type: custom:button-card
name: Family Room
here you go
type: custom:button-card
icon: mdi:lamp
aspect_ratio: 1/1
show_name: true
name: Family Room
entity: light.family_room_left_table_bulb
tap_action:
action: toggle
styles:
card:
- border-radius: 24px
name:
- font-size: 40px
and if you have colour-adjustable lamps, here’s something similar, but the card changes colour to match the lamp
type: custom:button-card
icon: mdi:lamp
aspect_ratio: 1/1
show_name: false
entity: light.family_room_left_table_bulb
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- border-radius: 24px
- background-color: |
[[[
if (states['light.family_room_left_table_bulb'].state == 'on') {
const rgb = states['light.family_room_left_table_bulb'].attributes.rgb_color;
return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
}
return 'var(--contrast10)';
]]]
icon:
- color: var(--black)
card_mod:
style: |
:host {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
position: unset !important;
display: grid !important;
}
1 Like
Take a look at the stack-in-card . It is a bit old and sometimes needs the help of card_mod to remove borders and backgrounds but still useful.
[Stack-in-card] allows to group multiple cards into one card without the borders.
YAML code
type: custom:stack-in-card
card_mod:
style: |
ha-card {
height: 250px;
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.living_room1
show_name: false
styles:
card:
- border: none
- type: custom:button-card
entity: light.living_room2
show_name: false
styles:
card:
- border: none
- type: custom:button-card
entity: light.living_room_lights
show_icon: false
name: Living Room
styles:
card:
- border: none
name:
- font-size: "30px"
You may need to play with the card’s dimensions to get it to match to rest.
EDIT: As a bonus, the “title” at the bottom is another custom:button-card that can be used to toggle the living room group, for example.
1 Like
Just add border: none !important; or border-style: none !important; to the mod to remove the card border.
type: custom:stack-in-card
card_mod:
style: |
ha-card {
height: 250px;
border: none !important;
}
border: none !important;
That would remove the border from the stack-in-card, which I assumed the OP wanted to keep in order to match the other cards which is why it wasn’t included in the top card.
@kman42 This should be a good place to start.
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.family_room_left_table_bulb
icon: mdi:lamp
show_name: false
- type: custom:button-card
entity: light.family_room_left_table_bulb
icon: mdi:lamp
show_name: false
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.family_room_left_table_bulb
icon: mdi:lamp
card_mod:
style: |
ha-card {
border: none !important;
}
- type: custom:button-card
entity: light.family_room_left_table_bulb
icon: mdi:lamp
card_mod:
style: |
ha-card {
border: none !important;
}
- type: custom:button-card
name: Family Room
card_mod:
style: |
ha-card {
border: none !important;
}
That does not do what the OP is looking for.
I’m trying to create a custom button card that will show icons for two lamps and a title below. See right tile in the image below.
Basically, I want this tile to be similar to the two on the left with a border around the large square tile, but not around the individual lamp icons or the title (Family Room).
This revised code uses Mushroom Light Cards for the individual lights in the stack-in-card; primary and secondary info is hidden, borders and backgrounds removed. The custom:button-card at the bottom is stylized to look like bottom of a Mushroom Light Card. Includes the original two cards on the left.
YAML Code
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.living_room_lights
layout: vertical
name: Family Room
icon: mdi:lightbulb
- type: custom:mushroom-light-card
entity: light.living_room_lights
layout: vertical
name: Living Room
icon: mdi:lamps
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
height: 100%;
}
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.living_room1
layout: vertical
icon: mdi:lamp
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
border: none;
background: none;
}
- type: custom:mushroom-light-card
entity: light.living_room2
layout: vertical
icon: mdi:lamp
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
border: none;
background: none;
}
- type: custom:button-card
entity: light.living_room_lights
name: Family Room
show_icon: false
show_state: true
state_display: '[[[ return (entity.state = "on") ? `${parseInt(entity.attributes.brightness / 2.54)}%` : "Off" ]]]'
styles:
card:
- border: none
- margin-top: '-5px'
name:
- font-size: 14px
- font-weight: bold
- color: '#e1e1e1'
state:
- font-size: 12px
- font-weight: bolder
- line-height: 1.5
- color: '#9b9b9b'
1 Like
Thanks for the edit, but he didn’t mention using the Mushroom addon.
Isn’t this more of what he was requesting for the 3rd card with only the Button addon?
type: horizontal-stack
cards:
- type: custom:button-card
entity: light.couch_light
name: Family Room
show_state: true
aspect_ratio: 1/1
styles:
icon:
- color: orange
card:
- background-color: '#1a1a1a'
- font-size: 16px
- type: custom:button-card
entity: light.couch_light
name: Living Room
show_state: true
aspect_ratio: 1/1
styles:
icon:
- color: orange
card:
- background-color: '#1a1a1a'
- font-size: 16px
- type: custom:button-card
tap_action:
action: toggle
styles:
card:
- background-color: '#1a1a1a'
- font-size: 10px
grid:
- grid-template-areas: |
"light1 light2 "
"light3 light3 "
- grid-template-columns: 1fr 1fr
- grid-template-rows: 5.3em 1fr 1fr
- grid-gap: 0
custom_fields:
light1:
card:
type: custom:button-card
entity: light.pc_lights
aspect_ratio: 2/1
show_name: false
icon: mdi:lamp
tap_action:
action: toggle
styles:
grid:
- grid-template-areas: |
"i"
- grid-template-columns: 1fr
- grid-template-rows: 1fr
card:
- margin-top: 10px
- padding: 0px
- background-color: '#1a1a1a'
- font-size: 10px
icon:
- height: 100%
- color: orange
light2:
card:
type: custom:button-card
entity: light.bathroom_lights
show_name: false
icon: mdi:lamp
aspect_ratio: 2/1
tap_action:
action: toggle
styles:
grid:
- grid-template-areas: |
"i"
- grid-template-columns: 1fr
- grid-template-rows: 1fr
card:
- margin-top: 10px
- padding: 0px
- background-color: '#1a1a1a'
- font-size: 10px
icon:
- height: 100%
- color: orange
light3:
card:
type: custom:button-card
entity: light.bed_lights
aspect_ratio: 3.7
name: Family Room
icon: none
styles:
grid:
- grid-template-areas: |
"n"
- grid-template-columns: 1fr
- grid-template-rows: 1fr
card:
- margin-top: 30px
- background-color: '#1a1a1a'
- font-size: 16px
kman42
February 4, 2024, 3:22pm
11
Thank you! This is exactly what I am looking to do. And thanks to everyone else that responded—sorry if my question wasn’t clear.
I’m not sure if I’m being trolled or what but I can play this game.
he didn’t mention using the Mushroom addon.
Look at the two cards on the left that the OP is already using; those are Mushroom Light cards
he was requesting for the 3rd card with only the Button addon?
OP may not have know about the stack-in-card, hence my suggestion in Post #4 .
Isn’t this more of what he was requesting
Your design does not match the OP’s original image nor the request. You used custom:button-cards instead of the Mushroom Light cards which the OP stated “I want this tile to be similar to the two on the left”. You missed the border around the stack which was part of the request and was re-mentioned in Post 6. OP did not mention a third light; he wanted a title which in my design in Post 4 allowed toggling another light (or light group) with the use of the bottom custom:button-card (which could be easily removed if desired.).
Coming back to this one:
he was requesting for the 3rd card with only the Button addon?
Done.
YAML code
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.living_room_lights
layout: vertical
name: Family Room
icon: mdi:lightbulb
- type: custom:mushroom-light-card
entity: light.living_room_lights
layout: vertical
name: Living Room
icon: mdi:lamps
- type: custom:button-card
entity: light.living_room_lights
name: Family Room
show_icon: false
show_state: true
state_display: |
[[[ return (entity.state = "on") ? `${parseInt(entity.attributes.brightness / 2.54)}%` : "Off" ]]]
styles:
card:
- padding-top: 0
grid:
- grid-template-areas: '"button1 button2" "n n" "s s"'
- grid-template-rows: min-content min-content
- grid-template-columns: 1fr 1fr
name:
- font-size: 14px
- font-weight: bold
- color: '#e1e1e1'
- margin-top: '4px'
- margin-bottom: '0px'
state:
- font-size: 12px
- font-weight: bolder
- color: '#9b9b9b'
- margin-top: '2px'
- margin-bottom: '8px'
button1:
- padding: 0
button2:
- padding: 0
custom_fields:
button1:
card:
type: custom:mushroom-light-card
entity: light.living_room1
layout: vertical
icon: mdi:lamp
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
border: none;
background: none;
}
button2:
card:
type: custom:mushroom-light-card
entity: light.living_room2
layout: vertical
icon: mdi:lamp
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
border: none;
background: none;
}
