good evening could you share your configuration? thank you
it is pretty messy so I canāt share it right now, but let me know what button card you are interested in using and I can share the config for that.
i love your 5 button card music
i had to create two button card templates: list_five_items and media_five_buttons. Hopefully it makes sense. I also made another template called media_five_buttons_only that removes the top row that normally shows the icon/picture and info. If you want to learn more of how this works, I would read about CSS grids.
list_five_items:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2 item3 item4 item5"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
media_five_buttons:
variables:
entity: media_player.speakers
name: Default name
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: more-info
template:
- media_mini_album
- icon_info
type: custom:button-card
item2:
card:
template: list_five_items
type: custom:button-card
custom_fields:
item1:
card:
icon: mdi:power
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item2:
card:
icon: mdi:pause
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item3:
card:
icon: mdi:skip-next
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item4:
card:
icon: mdi:volume-minus
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item5:
card:
icon: mdi:volume-plus
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
media_five_buttons_only:
variables:
entity: media_player.speakers
name: Default name
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
- row-gap: 12px
custom_fields:
item2:
card:
template: list_five_items
type: custom:button-card
custom_fields:
item1:
card:
icon: mdi:power
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item2:
card:
icon: mdi:pause
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item3:
card:
icon: mdi:skip-next
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item4:
card:
icon: mdi:volume-minus
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item5:
card:
icon: mdi:volume-plus
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
3 Likes
thanks you 
Hi,
I am trying to create a popup inspired by this design to control light brightness and color.
But I have a problem with text that display brightness which is not refreshed (when used outside of popup it works correctly)
Can someone help me ?
Code :
popup_light:
template: popup_3_items
custom_fields:
item1:
card:
type: custom:button-card
template: header_popup
icon: mdi:lightbulb
name: LumiĆØre
show_label: none
styles:
icon:
- color: var(--color-theme)
item2:
card:
type: custom:state-switch
entity: hash
default: color
states:
brightness:
type: custom:button-card
styles:
grid:
- grid-template-areas: '"item1"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
card:
- background: none
- box-shadow: none
- padding: 4%
custom_fields:
item2:
- background-color: blue
- border-radius: 12px
- position: absolute
- left: 64%
- top: >
[[[
var bri = states[variables.entity].attributes.brightness;
return Math.round(bri ? (80-(72*bri/256)) : '80') + '%';
]]]
- height: 25px
- width: 45px
- font-size: 11px
- line-height: 25px
- color: white
custom_fields:
item1:
card:
type: "custom:slider-card"
entity: "[[[ return variables.entity ]]]"
radius: 20px
rotate: 270
containerHeight: 320px
width: 250px
height: 100px
top: 100px
left: 17%
thumbHorizontalPadding: 0px
thumbWidth: 0px
mainSliderColor: rgba(var(--color-theme),0.1)
mainSliderColorOff: rgba(var(--color-theme),0.1)
secondarySliderColor: var(--color-theme)
secondarySliderColorOff: var(--color-theme)
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
}
.off {
border: 1px solid rgba(var(--color-theme),0.3) !important;
}
.on {
border: 1px solid rgba(var(--color-theme),0.3) !important;
}
item2: >
[[[
var bri = states[variables.entity].attributes.brightness;
return Math.round(bri ? (bri/256*100) : '0') + '%';
]]]
#####
color:
type: custom:light-entity-card
entity: "[[[ return variables.entity ]]]"
persist_features: true
brightness: false
color_temp: false
white_value: false
hide_header: true
effects_list: false
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 0 0 20px 0 !important;
}
item3:
card:
type: custom:button-card
template: list_2_buttons
custom_fields:
item1:
card:
icon: "mdi:lightbulb-on"
name: LuminositƩ
type: "custom:button-card"
template: action_button
tap_action:
action: navigate
navigation_path: "#brightness"
styles:
icon:
- color: var(--color-theme)
item2:
card:
icon: "mdi:palette"
name: Couleur
type: "custom:button-card"
template: action_button
tap_action:
action: navigate
navigation_path: "#color"
styles:
icon:
- color: var(--color-theme)
7 Likes
Thank you for sharing! This ticks all the boxes I need. I just got into home assistant and had to port this to the updated version on the github page. I changed my template slightly because when the fan was Off the service buttons still had darker colors, and I think I want them more dimmed in this state.
Dark mode in the picture below. Not sure if I like how it looks with the blue background on row 1, or if blue should be the bg color for the entire card.
Also, big kudos for @tben for doing all the work to get us this far. This style looks amazing and deserves to be the HA default one 
Hopefully it will be added to HACS soon 
3 Likes
This, unfortunately, turns out to be harder than thoughtā¦ As this is theoretically not a theme, nor an integration, it doesnāt really fit into the system HACS requiresā¦ But weāll see what we can come up with. 
2 Likes
What happens, if you leave the āwrongā percentage display for a few seconds? Does it update then, or does it stay with the wrong number āforeverā?
If the first, Iād guess the updates of the state arenāt handled through to the card. Iād ty to use triggers_update to specifically mark the light entity, or even better, all.
Please try to leave the popup open for at least a minute. Button-card refreshes automatically every minute, so worst case should be, that after that minute the update is handled.
If the latter is the case, weād need to investigate further. 
But my guess is on the handling of updated state attributes inside button-card, as you say without the popup it works. On the other hand it could be browser-mod (or are you using something different for the popup?). Weāll see, please try the above mentioned. 
Popup not refreshed even if I wait one minute.
I also think the problem is linked with browser-mod.
Hmmm, thatās unfortunate. Iām not using browser-mod myself, have it installed but never really got it, and want to uninstall it āfor agesāā¦
I just took a short look in the repo of browser-mod, there seems to be nothing āsticking outā in case of not updated entities.
On thinking further about it, does the real state for the brightness (checked in developer-tools) change? Or does this stay at 29% as well?
can you share your Fan Config?
It changes. Everything works fine except the display that is not refreshed.
Absolutely!
But just know with the dark theme it still looks like the previous picture. I havenāt had time to dig into this yet. Lots to learn here 
The Natural mode triggers a switch button, but the oscillate is triggered directly with service calls. I guess going forward the oscillate might as well just trigger a switch button as well so it can be tied to a voice assistant.
ui-lovelace.yaml
- type: custom:button-card
entity: fan.xiaomi_smart_fan
variables:
entity: fan.xiaomi_smart_fan
name: Fan
switch_natural: switch.xiaomi_smart_fan_natural
template:
- fan_buttons
button_card_templates.yaml
fan_buttons:
show_icon: false
show_name: false
show_label: false
variables:
entity:
switch_natural:
name: 'Fan'
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: toggle
hold_action:
action: more-info
template:
- icon_info
- fan
type: 'custom:button-card'
item2:
card:
template: list_items_columns_4
type: 'custom:button-card'
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
icon: 'mdi:fan'
styles:
icon:
- transform: scale(0.625)
tap_action:
action: call-service
service: fan.decrease_speed
service_data:
entity_id: entity
percentage_step: 10
type: 'custom:button-card'
template: widget_icon
item2:
card:
icon: 'mdi:leaf'
entity: '[[[ return variables.entity ]]]'
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: '[[[ return variables.switch_natural ]]]'
type: 'custom:button-card'
template:
- >-
[[[
if (entity.attributes.mode === 'Nature') {
return 'blue';
} else {
return 'widget_icon';
}
]]]
- widget_icon
item3:
card:
icon: 'mdi:rotate-3d-variant'
entity: '[[[ return variables.entity ]]]'
tap_action:
action: call-service
service: fan.oscillate
service_data:
entity_id: entity
oscillating: >-
[[[ return !entity.attributes.oscillate ]]]
type: 'custom:button-card'
template:
- >-
[[[
if (entity.attributes.oscillate) {
return 'blue';
} else {
return 'widget_icon';
}
]]]
- widget_icon
item4:
card:
entity: '[[[ return variables.entity ]]]'
icon: 'mdi:fan'
tap_action:
action: call-service
service: fan.increase_speed
service_data:
entity_id: entity
percentage_step: 10
type: 'custom:button-card'
template: widget_icon
list_items_columns_4:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2 item3 item4"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
4 Likes
I had the same last month: Discord
I had to stop working on it but the problem is related to light-popup-card for me (i use view and not popup).
Iām going to see how you did it but the operation of light-popup is seems different apart from a popup
I have to find the time to finish the map but I am running out of time
here a preview, itās a poc, so impossible to share it for the moment, but yours is almost identical so you will probably release it before me so to see if it is useful or not to continue 
Ouch ! gifmaker doesnāt like color pickerā¦ 
in summary, I would ask for help on the topic of browser-mod 
Ps:
I just remembered that I wanted to go on another card than light-popup because the problem seems to come from her :
2 Likes
Thank you Clemalex, maybe youāre right I should ask for help in browser-mod topic because I really want this to be a popup.
I still have a lot of work to do but your design is exactly what I was thinking. (I donāt know if I am able to create blur effect and animation to be honest 
)
Also you can continue to work on yours. Having 2 possibilities (popup and view) is always interesting for community.
All popups can be turn into a view (in panel mode)
Just ask
- type: custom:light-entity-card
card_mod:
style:
'#light-entity-card-light-salon_lampe_01':
$: |
#interactionLayer{ z-index: 1; filter: opacity(0.6);}
#backgroundLayer{
filter: blur(20px);
}
Itās a config of state-card
type: custom:state-switch
default: color-card
transition: flip #<-- activation
transition_time: 500 #<-- config
1 Like
Thank you !!!
Sorry for this; how do I go about to make it possible for me to use this layout in Lovelace?
I have HACS, and button card installed. But thenā¦?