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%
3 Likes
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 !!
1 Like
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.
1 Like
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
Would you mind sharing the entire code? It looks incomplete (the first part seems to be missing).
Thank you in advance!