Hi Ben, like your card. I have succesfully added it to my config but the media player part is not working. "Blue_playing" doesn't work I just get a strange error picture. Any suggestions how to fix it? Where did you get that sonos icon if I may ask?
I have 2 rows of chips, a permanent and a conditional one. The first row works fine, but I have an issue with the second row, hope you can help me to fix it. I have a binary sensor which turns on if any of the conditional chips are to be showed. I use this to conditionally display the horizontal stack, which contains the conditional chip(s). I would like to left align the displayed chips like I have in the permanent row, but no matter how many conditional chips I have, the systems divides the horizontal stack into n equal parts and put 1 chip in each, see screenshots (for 2 and for 4 chips):
Can any of you guide me how to align the chips within the horizontal stack? Thank you.
1 Like
Here are the _playing templates I use below. What is the error you are getting? Also make sure itâs all lower case too 
---
green_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-green),1)"
img_cell:
- background-color: "rgba(var(--color-green), 0.2)"
value: "playing"
blue_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-blue),1)"
img_cell:
- background-color: "rgba(var(--color-blue), 0.2)"
value: "playing"
pink_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-pink),1)"
img_cell:
- background-color: "rgba(var(--color-pink), 0.2)"
value: "playing"
red_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-red),1)"
img_cell:
- background-color: "rgba(var(--color-red), 0.2)"
value: "playing"
orange_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-orange),1)"
img_cell:
- background-color: "rgba(var(--color-orange), 0.2)"
value: "playing"
yellow_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-yellow),1)"
img_cell:
- background-color: "rgba(var(--color-yellow), 0.2)"
value: "playing"
teal_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-teal),1)"
img_cell:
- background-color: "rgba(var(--color-teal), 0.2)"
value: "playing"
Sonos icons are from this integration: GitHub - elax46/custom-brand-icons: Custom brand icons for Home Assistant
Thanks! Will try to add these templates and see if it is working then. I don' really get an error just a broken picture which doesn't function
1 Like
I tried adding your custom_alarm template and adding some shields but whatever I try it keeps doing this, I tried changing I think every width to try make it fit but they stay the same width. I also tried adding the âarmingâ state but that doesnât even show up. I bascially want Disarmed-Arming-Away-Home-Night, any advise?
It may very well be me sucking in grids and the new CSS.
Share your code but itâs most likely the column gap property Iâd say. Try making it smaller and see what happens, or possibly remove altogether!?!?
The column-gap is currently set to 2 and I changed the width of the item to 40px in stead of 80px. For testing purposes I removed the arming which didnât show up anyway⊠As said maybe my grid is off, I know f*ck all about the CSS fractions. Thanks!
custom_alarm:
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:
type: custom:button-card
template:
- "icon_info"
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
tap_action:
action: more-info
label: '[[[ return states[variables.ulm_custom_alarm_grid_state].state ]]]'
styles:
card:
- background-color: 'rgba(0,0,0,0)'
state:
- value: 'disarmed'
label: 'Disarmed'
icon: "mdi:shield-off"
styles:
icon:
- color: 'rgba(var(--color-green), 1)'
img_cell:
- background-color: 'rgba(var(--color-green-bg), 1.0)'
- value: 'arming'
label: 'Arming'
icon: "mdi:shield-outline"
styles:
icon:
- color: 'rgba(var(--color-yellow), 1)'
img_cell:
- background-color: 'rgba(var(--color-yellow-bg), 1.0)'
- value: 'armed_away'
label: 'Armed away'
icon: "mdi:shield-lock"
styles:
icon:
- color: 'rgba(var(--color-red), 1)'
img_cell:
- background-color: 'rgba(var(--color-red-bg), 1.0)'
- value: 'armed_home'
label: 'Armed home'
icon: "mdi:shield-home"
styles:
icon:
- color: 'rgba(var(--color-red), 1)'
img_cell:
- background-color: 'rgba(var(--color-red-bg), 1.0)'
- value: 'armed_night'
label: 'Armed night'
icon: "mdi:shield-moon"
styles:
icon:
- color: 'rgba(var(--color-red), 1)'
img_cell:
- background-color: 'rgba(var(--color-red-bg), 1.0)'
item2:
card:
type: custom:button-card
template: custom_alarm_state_grid_item_list
custom_fields:
disarm:
card:
type: custom:button-card
icon: mdi:shield-off
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'disarmed'
icon: "mdi:shield-off"
styles:
icon:
- color: 'var(--google-green)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: 'var(--border-radius-bar)'
# tap_action:
# action: call-service
# service: alarm_control_panel.alarm_disarm
# service_data:
# entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# haptic: success
# arming:
# card:
# type: custom:button-card
# icon: mdi:shield-outline
# template: custom_alarm_state_grid_job_state_item_list_items
# entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# state:
# - value: 'arming'
# icon: "mdi:shield-outline"
# styles:
# icon:
# - color: 'var(--google-yellow)'
# card:
# - background-color: 'rgba(0,0,0,0)'
# - border-radius: '4px'
# # tap_action:
# # action: call-service
# # service: alarm_control_panel.alarm_arm_
# # service_data:
# # entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# # haptic: success
away:
card:
type: custom:button-card
icon: mdi:shield-lock
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_away'
icon: "mdi:shield-lock"
styles:
icon:
- color: 'var(--google-red)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '4px'
# tap_action:
# action: call-service
# service: alarm_control_panel.alarm_arm_away
# service_data:
# entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# haptic: success
night:
card:
type: custom:button-card
icon: mdi:shield-moon
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_night'
icon: "mdi:shield-moon"
styles:
icon:
- color: 'var(--google-red)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '4px'
# tap_action:
# action: call-service
# service: alarm_control_panel.alarm_arm_night
# service_data:
# entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# haptic: success
home:
card:
type: custom:button-card
icon: mdi:shield-home
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_home'
icon: "mdi:shield-home"
styles:
icon:
- color: 'var(--google-red)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '4px'
# tap_action:
# action: call-service
# service: alarm_control_panel.alarm_arm_home
# service_data:
# entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# haptic: success
custom_alarm_state_grid_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 'var(--border-radius-bar)'
- pointer-events: none
- background-color: 'rgba(var(--color-theme), 0.05)'
- justify-items: center
- width: 40px
grid:
- grid-template-areas: "'disarm away night home'"
- grid-template-columns: "1fr 1fr 1fr 1fr"
- grid-template-rows: "1fr"
- column-gap: 2px
- justify-items: center
img_cell:
- justify-items: center
custom_alarm_state_grid_job_state_item_list_items:
show_icon: true
show_name: false
size: 24px
tap_action:
action: none
styles:
card:
- box-shadow: none
- padding: 2px
- border-radius: 'var(--border-radius)'
- place-self: center
- height: 40px
- width: 40px
- pointer-events: auto
- background-color: transparent
grid:
- grid-template-areas: '"i"'
icon:
- color: var(--google-grey)
Thanks for the idea, but it did not work. I forgot to mention that Iâm using the layout-card custom component, and depending on the orientation and resolution, I apply a 2, 3 or 4-column arrangement. The conditional card is always expanding through all the columns, and as you can see on the screenshots, works perfectly for the permanent row. The only difference between the 2 rows is the conditional display of the icons and if no icon to be displayed, to the horizontal stack too. So adding the conditional option to the horizontal stack would cause the issue of the second row, but I donât know what styling could fix the alignment of the icons.
@CM000n, do you have an idea, because my layout is based on your shared code (however you are not hiding the horizontal stack, when there is no icon to be displayed). Thank you.
Hey @clemalex
Great work. I am looking at a fan control for my 6 speed DC fan. I have the 6 speeds, light on/off and summer/winter modes control through broad link and wanting a button card to showcase it.
Could you please let me know how to implement this card?
Much appreciated 
Would you be able to share the code for this and show us how to achieve this? Please and thank you.
1 Like
How do you get the chip to display the time left on a timer ?
Some minor customization on the chip, my YAML:
type: 'custom:button-card'
template:
- chip_mdi_icon_state
- custom_fan_timer
variables:
ulm_chip_mdi_icon_state_icon: mdi:fan
ulm_chip_mdi_icon_state_entity: fan.mi_smart_standing_fan_1x
ulm_chip_mdi_icon_state_fan_timer_entity: number.mi_smart_standing_fan_1x_delay_off_countdown
and the customization in a separate YAML file:
custom_fan_timer:
icon: |
[[[
var fan_timer_icon = "mdi:fan";
if (states[variables.ulm_chip_mdi_icon_state_fan_timer_entity].state > 0){
var fan_timer_icon = "mdi:fan-clock";
}
return fan_timer_icon;
]]]
label: |
[[[
var fan_timer_label = states[variables.ulm_chip_mdi_icon_state_fan_timer_entity].state;
var hours = ~~(fan_timer_label / 60);
var minutes = fan_timer_label % 60;
if (fan_timer_label == 0){
return "";
} else if (minutes < 10){
return hours + ":0" + minutes;
} else {
return hours + ":" + minutes;
}
]]]
2 Likes
How did you get the remaining value of the timer in that number entity ?
I have the exact same issue with conditional chips. Any tips would be appreciated !
Hi,
I tried this, here is a snippet of my code -
title: "Home"
path: "home"
type: vertical-stack
cards:
- type: "custom:button-card"
template: "card_esh_welcome"
triggers_update: "input_boolean.minimalist_dropdown"
variables:
ulm_card_esh_welcome_collapse: input_boolean.minimalist_dropdown
ulm_weather: "weather.home_2"
entity_1:
nav: "home"
icon: "mdi:home"
name: "Home"
color: "blue"
entity_2:
nav: "bedroom"
icon: "mdi:bed-queen"
name: "Bed"
color: "yellow"
entity_3:
nav: "livingroom"
icon: "mdi:sofa"
name: "Lounge"
color: "green"
entity_4:
nav: "kitchen"
icon: "mdi:fridge"
name: "Kitchen"
color: "purple"
entity_5:
nav: "garden"
icon: "mdi:shovel"
name: "Garden"
color: "red"
- type: 'custom:button-card'
template: card_title
label: "People"
- type: vertical-stack
cards:
- type: "custom:button-card"
template: card_person_info
variables:
ulm_card_person_entity: person.simon
ulm_card_person_use_entity_picture: true
ulm_card_person_zone2: zone.work
ulm_multiline: true
ulm_card_person_driving_entity: sensor.s16_ety_ignition_state
ulm_card_person_commute_entity: sensor.work_travel_time
ulm_card_person_commute_icon: mdi:car
ulm_card_person_battery_entity: sensor.simon_bettys_iphone_battery_level
ulm_card_person_battery_state_entity: sensor.simon_bettys_iphone_battery_state
- type: "custom:button-card"
template: card_person_steps
variables:
ulm_card_person_entity: person.nicola
ulm_card_person_use_entity_picture: true
ulm_card_person_zone1: zone.work
ulm_card_person_zone2: zone.parents
ulm_multiline: true
ulm_card_person_driving_entity: sensor.s16_ety_ignition_state
ulm_card_person_commute_entity: sensor.total_steps
ulm_card_person_commute_icon: mdi:walk
ulm_card_person_battery_entity: sensor.simon_bettys_iphone_battery_level
ulm_card_person_battery_state_entity: sensor.simon_bettys_iphone_battery_state
And it resulted in this, even after a restart?
Any help would be appreciated
Itâs because you have the line in the part for the view configuration.
type: vertical-stack
A vertical-stack cannot be a type before the cards line. Thatâs what the error says. 
Probably a stupid question, but I am using a power-switch card for my water-heater. (Power Outlet Card - UI Lovelace Minimalist) and that works fine. But sometimes I would like to check the history of the on/off. For instance on the stock lovelace I could long-press the button to get the history but with this card it only toggles. Is there a way to customize the long-press vs the short press? Is there a custom card that would do it?
There is a new feature incoming for all cards in the next release or the one after that. Where you can set for all types of click-actions (short, hold and double) a custom action. See this Pull-Request https://github.com/UI-Lovelace-Minimalist/UI/pull/721
Edit: As this card is not compiled of nested cards you can also change your card config to something like this but that could interfere with the popup (maybe change hold_action to double_tap_action):
- type: 'custom:button-card'
template: card_power_outlet
variables:
ulm_card_power_outlet_consumption_sensor: sensor.power_outlet_livingroom_consumption
entity: switch.power_outlet_livingroom
name: Power Outlet Livingroom
hold_action:
action: "more-info"
1 Like