Thanks for your reply. Unfortunately, margin: auto doesn’t seem to have made a difference.
A screenshot with the recommended margin settings is below. I’ve mouse hovered over the card in the ‘edit dashboard’ mode to demonstrate more clearly how the card doesn’t center itself within the grid.
Bump if anyone can help 
I’m trying to make something like in the below image, if anyone could help or has any ideas of how to do it that would be great. I managed to make a round gradient button but can’t figure out how to make a square button around it and have it change with an on/off state.
type: custom:button-card
show_state: true
hold_action:
action: none
tap_action:
action: call-service
haptic: medium
service: scene.turn_on
service_data:
entity_id: scene.default
styles:
card:
- background: 'linear-gradient(110deg, #6d3c01, #fea980)'
- height: 50px
- width: 50px
- border-radius: 50%
Would like some help in this as well
i thought it might also work if this was intergrated into the settings tab but with no luck
Hi, sorry if this was asked before, tried to search in this post but it has over 6000 replies so excuse me please.
Is it possible that I can stack two mdi/phu icons together? Basicaly overlap them so I can get it displayed as one?
thanks!
Kind of this?
type: custom:button-card
styles:
grid:
- grid-template-areas: '"icon_1 icon_2"'
custom_fields:
icon_1: |
[[[
return `<ha-icon
icon="mdi:white-balance-sunny"
style="width: 32px; height: 32px; color: orange;">
</ha-icon>`
]]]
icon_2: |
[[[
return `<ha-icon
icon="mdi:circle-outline"
style="width: 32px; height: 32px; color: green;">
</ha-icon>`
]]]
card_mod:
style: |
div#icon_2 {
grid-column-start: 1 !important;
}
Yes - thank you! I will try implementing this into my code
Hi everybody,
I’m playing with button_card and something (ok that really a detail…) annoying me…
graph_temp_hum:
variables:
entity: "sensor.xiaomi_multisensor_salon_humidite"
color: "var(--info-color)"
name: "Default name"
icon: "mdi:adjust"
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr max-content
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
icon: '[[[ return variables.icon ]]]'
template:
- icon_info_vertical
style: |
ha-card {
box-shadow: none;
background: none;
border-radius: var(--border-radius);
}
styles:
card:
- top: 12px
- left: 12px
- height: 47px
type: 'custom:button-card'
item2:
card:
type: 'custom:mini-graph-card'
entities:
- entity: '[[[ return variables.entity ]]]'
line_color: '[[[ return variables.color ]]]'
line_width: 10
font_size: 55
height: 120
show:
name: false
icon: false
legend: false
state: true
style: |
ha-card {
box-shadow: none;
background: none;
border-radius: var(--border-radius);
}
styles:
card:
- top: 4px
- left: 12px
And the result:
How to reduce the tiny white gap ?
Thank you !!
Having a blank, hoping someone can help with the best way to have two objects directly overlapping each other and centered both left/right and top/down? Would it be a grid with absolute positioning?
Trying to get these two objects (apex chart and button) over each other:
unfortunately, it is not available now 
Sorry, I use a different dashboard now and don’t have the old version stored anywhere
I have multiple WiZ Light Bulbs that I am using the newly added integration for.
The integration reports back the state of the bulb, but it’s difficult to display an accurate bulb color when a bulb effect is in use (see below). I’d like to specify an RGB value for the icon color based on the active effect (examples… Ocean: Blue, Romance: Pink, Sunset: Orange, Forest: Green, …)
I’ve been lost at how to parse this, when the attribute for “effect” is only present when an effect is active.
min_mireds: 153
max_mireds: 454
effect_list:
- Ocean
- Romance
- Sunset
- Party
- Fireplace
- Cozy
- Forest
- Pastel Colors
- Wake up
- Bedtime
- Warm White
- Daylight
- Cool white
- Night light
- Focus
- Relax
- True colors
- TV time
- Plantgrowth
- Spring
- Summer
- Fall
- Deepdive
- Jungle
- Mojito
- Club
- Christmas
- Halloween
- Candlelight
- Golden white
- Pulse
- Steampunk
- Rhythm
supported_color_modes:
- color_temp
- rgbw
friendly_name: Office02
supported_features: 4
color_mode: brightness
brightness: 128
effect: Deepdive
min_mireds: 153
max_mireds: 454
effect_list:
- Ocean
- Romance
- Sunset
- Party
- Fireplace
- Cozy
- Forest
- Pastel Colors
- Wake up
- Bedtime
- Warm White
- Daylight
- Cool white
- Night light
- Focus
- Relax
- True colors
- TV time
- Plantgrowth
- Spring
- Summer
- Fall
- Deepdive
- Jungle
- Mojito
- Club
- Christmas
- Halloween
- Candlelight
- Golden white
- Pulse
- Steampunk
- Rhythm
supported_color_modes:
- color_temp
- rgbw
friendly_name: Office02
supported_features: 4
color_mode: color_temp
brightness: 128
color_temp: 184
hs_color:
- 27.746
- 13.648
rgb_color:
- 255
- 236
- 220
xy_color:
- 0.356
- 0.344
Neither of these work. What am I missing?
tap_action:
action: call-service
service: button.press
target:
entity_id: button.all_open
tap_action:
action: call-service
service: button.press
service-data:
entity_id: button.all_open
I think service-data: should be service_data: i.e. underscore, not hyphen.
Right. Thanks.
I have Wiz as well but I’m not using a bulb icon in my interface. In your case, if the bulb is off could you not use a light grey icon for the bulb icon? Like you say the bulb reports back the effect when the bulb is on.
In my case
min_mireds: 153
max_mireds: 454
effect_list: Ocean, Romance, Sunset, Party, Fireplace, Cozy, Forest, Pastel Colors, Wake up, Bedtime, Warm White, Daylight, Cool white, Night light, Focus, Relax, True colors, TV time, Plantgrowth, Spring, Summer, Fall, Deepdive, Jungle, Mojito, Club, Christmas, Halloween, Candlelight, Golden white, Pulse, Steampunk, Rhythm
supported_color_modes: color_temp, rgbww
friendly_name: WiZ RGBWW Tunable 3E33FE
supported_features: 4
color_mode: brightness
brightness: 255
effect: Christmas
How can I display the entity picture of a media_player on the background of a button?
@mdb17 What is the “entity picture”? Do you mean some cover art or? Wouldn’t it be dependent on if the media_player in question is delivering the art?
I’m my case it’s a roku player that I am wanting to display the picture of the app that is currently open. The roku entity displays this in
entity_picture: >-
/api/media_player_proxy/media_player.43_tcl_roku_tv?token=889ebfe32a2b469fe7a0800feda9099d4ee08b16bb6c8a591358e877641ca0f4&cache=97b9c6b5e83572
I have been able to apply that to background: url and it will display it but I want to be able to use the entity id