I have a small issue. I decided to use some conditional chips in a second chips row.
But, when there is 1 chip displayed itās OK, but starting from 2 chips it goes badā¦
3 chips
2 chips
I think this is the horizontal stack + conditional combination that does this spacingā¦
Any solution ? I tried some card-mod things but never find any way of having chips left alignedā¦
Could you share some code so we can check whatās going on (or better said, wrong in this case)?
Iād suggest you start tagging your changes to the Github repository. I know it can be daunting, to learn these Github things. 
If you want, just send me a PM, we could develop a small workflow for you, that runs smoothly afterwards and all your changes would be tracked and signed with a release tag. That way everybody can check the latest changes and work accordingly. Iād be happy to help, your work is so exceptional, Iād love to give something back.
Hello,
thank you for your sharing.
Could you share your list_items_climate? @djacid
Could you share your list_items_favorite? @tpx01
As well as an example of using the button card? big thanks
@tben hoe does sensor.present work? I canāt get my head around what the link is between the sensor.present and the input_select. I would like to copy your scene button, thanks!
Added the code to the original post, thanks for noticing. Here it is if you donāt want to scroll.
list_items_favorite:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item1 item2"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
list_items_climate:
styles:
card:
- background-color: transparent
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2 item3"'
- grid-template-columns: 1fr 3fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
I will try to add a video to demonstrate the use of this card.
@tben small tweak for the media_buttonā¦ I created a widget that allows to change the button (pause/play) based on actual status. This enhances the usability as in the case of Sonos there is not really an āoff stateā (it remains Paused forever).
New widget:
widget_play_pause:
tap_action:
action: toggle
color: var(--google-grey)
show_icon: true
show_name: false
size: 20px
icon: >
[[[
if (entity.state == 'playing') {
return 'mdi:pause';
}
return 'mdi:play';
]]]
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 14px
- place-self: center
- height: 42px
grid:
- grid-template-areas: '"i"'
icon:
- color: 'rgba(var(--color-theme),0.9)'
then this code change in your button:
item2:
card:
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: 'custom:button-card'
entity: '[[[ return variables.entity ]]]'
template: widget_play_pause
+1
Trying to figure out why this is actually called a scene. I think the intent was to be able to toggle between different states of a person? Thatās probably also how āthe systemā is able to detect if you go to sleep or not?
Can you share the code for the custom button card? Its not lining up correctly for me and Iām not sure what Iām missing
sorry to bother you again, I think there was too much copy paste in the widget_temperature template.
Yes I can share !
- cards:
- template: bordures
type: custom:button-card
- card:
entity: sensor.open_doors
template: pilule_open_count
icon: mdi:door-open
type: 'custom:button-card'
conditions:
- entity: sensor.ppl_at_home
state: '0'
- entity: sensor.open_doors
state_not: '0'
type: conditional
- card:
entity: sensor.open_windows
template: pilule_open_count
icon: mdi:window-open-variant
type: 'custom:button-card'
conditions:
- entity: sensor.ppl_at_home
state: '0'
- entity: sensor.open_windows
state_not: '0'
type: conditional
- card:
entity: binary_sensor.machine_a_laver
template: pilule_appliances
icon: mdi:washing-machine
type: 'custom:button-card'
conditions:
- entity: binary_sensor.machine_a_laver
state_not: 'off'
type: conditional
- card:
entity: binary_sensor.seche_linge
template: pilule_appliances
icon: mdi:tumble-dryer
type: 'custom:button-card'
conditions:
- entity: binary_sensor.seche_linge
state_not: 'off'
type: conditional
- card:
entity: media_player.maison
template: pilule_gh
icon: mdi:cast-connected
type: 'custom:button-card'
conditions:
- entity: media_player.maison
state_not: 'off'
type: conditional
- template: bordures
type: custom:button-card
type: horizontal-stack
Gives :
Removing conditional gives :
- cards:
- template: bordures
type: custom:button-card
- card:
entity: sensor.open_doors
template: pilule_open_count
icon: mdi:door-open
type: 'custom:button-card'
- card:
entity: sensor.open_windows
template: pilule_open_count
icon: mdi:window-open-variant
type: 'custom:button-card'
- card:
entity: binary_sensor.machine_a_laver
template: pilule_appliances
icon: mdi:washing-machine
type: 'custom:button-card'
- card:
entity: binary_sensor.seche_linge
template: pilule_appliances
icon: mdi:tumble-dryer
type: 'custom:button-card'
- card:
entity: media_player.maison
template: pilule_gh
icon: mdi:cast-connected
type: 'custom:button-card'
- template: bordures
type: custom:button-card
type: horizontal-stack
I see this behaviour only while in Edit Mode - try coming out of that and see if the allignment fixes itself.
I use yaml mode so no edit mode to leave.
well, Iāve got some of it to work, by removing some old Lovelace dashboards that were created from the web interface instead of YAML.
now the icons get the general shape but not the colors, for example, the binary sensor that is supposed to be blueā¦any ideas?
Looks like the theme is not showing.
Have you included the provided theme in your view?
Or you can set the theme as default for your user.
Hmm 
@tben did say he changed some names and variables.
Can you double check that the colors in your template match the ones defined in the theme?
blue:
state:
- styles:
icon:
- color: 'rgba(var(--color-blue),1)'
img_cell:
- background-color: 'rgba(var(--color-blue), 0.2)'
card:
- background-color: 'rgba(var(--color-background-blue), var(--opacity-bg))'
name:
- color: 'rgba(var(--color-blue-text),1)'
label:
- color: 'rgba(var(--color-blue-text),1)'
value: 'on'
The --color-blue-text and --color-background-blue should be defined in the mobile_light.yaml file.
In the first iteration, these variables were called --couleur-bleu (in french) I think.
Otherwise, iām out of ideaās 
Yeah Iām sorry for all these bearking changes, Iāll be careful from now on 
I renamed and added quite a few variables
button_card_template
volets ā cover
prise ā outlet
movement ā binary_sensor
personne ā person
bordure ā edge
titre ā title
Theme
google-red-500 ā google-red
google-green-500 ā google-green
google-yellow-500 ā google-yellow
google-blue-500 ā google-blue
google-violet-500 ā google-violet
google-grey-500 ā google-grey
couleur-rouge ā color-red
couleur-vert ā color-green
couleur-jaune ā color-yellow
couleur-bleu ā color-blue
couleur-violet ā color-purple
couleur-gris ā color-grey
couleur-rose ā color-pink
couleur-theme ā color-theme
Hi @tben and everyone else.
This looks truly amazing and I would love to implement this for my HA set up.
Unfortunately most of what I can find on this forum isnāt suited for some like me, who doesnāt have a lot of coding or HA experience. Although I understand the basics of this, I always feel like the Installation read meās and guides start somewhere in the middle.
Any chance you have some resource/guide, other forum posts, or anything else about the very general set up of using a custom lovelace UI like this? I just need a place to start 
Thanks a lot and keep up the nice work!