Manually in the button-card-template file
For the states:
If you have this folder in your system Ā« custom_card_schumijo_flowerĀ», try removing it. It was mixing up the translations for me
1 Like
I will digg some deeper 
Where did you found that template for the vertical-buttons?
So i need to make a folder named card_light_slider_collapse_color and a yaml file inside named card_light_slider_collapse_color.yaml and than change the template name of the card_light_slider_collapse card to card_light_slider_collapse_color? If this is correct what i need to do with the color_slider template?
Hey there ive followed the installation instructions and got it working on desktop.
However on mobile i get this error. Not sure how to debug. Any suggestions?
The same issue occurs on my android phone and wifes iphone
I just reinstalled the app and it now works.
Iām not so familiar with Github, how could I download the popups_templates.yaml to start testing it?
Thanks for this great theme!
The template is in the button_card_template.yaml called vertical_buttons.
1 Like
Vertical stack, followed by horizontal stack, add four cards.
Hi!
Iām quite new to using this theme. But I can not figure out how to use the vertical buttons. Could someone please help me out here?
Thanks in advance!
So the vertical_buttons are not available? Iām editing my setup in YAML-mode, so I need a code example if available?
Iām looking for a way to get these to work:
You need to use the vertical_buttons template in your card config.
Yeah, ok. But Iām clearly doing something wrong here since the card just vanishes from the dashboard.
- type: 'custom:button-card'
template: vertical_buttons
variables:
ulm_card_script_title: Good morning
ulm_card_script_icon: 'mdi:blinds'
Thanks for the pointer with the bold option. font-weight: 500 works for me, showing a colored emoji but keeping the text bold. BTW, this seems to be a regression bug in Chrome 96 for Windows.
2 Likes
so iĀ“ve made a room card that controls my lights, covers and heater.
figured iĀ“d share it if someone wants to use it
Singe tap shows more info
Double tap on the light turns it on/off
button-card template:
room:
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
label: '[[[ return states[variables.room_climate].attributes.current_temperature + "Ā°C" ]]]'
template:
- ulm_language_variables
name: '[[[ return variables.room_name ]]]'
icon: '[[[ return variables.room_icon ]]]'
color: var(--google-grey)
show_icon: true
show_label: true
show_name: true
size: 20px
styles:
icon:
- color: "rgba(var(--color-blue),1)"
label:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: "rgba(var(--color-blue),0.2)"
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 21px 8px 8px 21px
- box-shadow: none
- padding: 0px
item2:
card:
type: 'custom:button-card'
template: list_items
custom_fields:
item1:
card:
type: 'custom:button-card'
template: widget_icon
entity: '[[[ return variables.room_light ]]]'
state:
- value: 'on'
icon: mdi:lightbulb
styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow), 0.2)'
- value: 'off'
icon: mdi:lightbulb-outline
tap_action:
haptic: heavy
action: more-info
double_tap_action:
haptic: heavy
action: call-service
service: light.toggle
service_data:
entity_id: '[[[ return variables.room_light ]]]'
item2:
card:
type: 'custom:button-card'
template: widget_icon
icon: 'mdi:window-shutter'
entity: '[[[ return variables.room_cover ]]]'
tap_action:
haptic: heavy
action: more-info
item3:
card:
type: 'custom:button-card'
template: widget_icon
icon: 'mdi:home-thermometer'
entity: '[[[ return variables.room_climate ]]]'
tap_action:
haptic: heavy
action: more-info
- type: 'custom:button-card'
template: room
variables:
room_name: # <-- Room Name
room_icon: # <-- Room Icon
room_light: # <-- Light Entity
room_cover: # <-- Cover Entity
room_climate: # <-- Climate Entity
17 Likes
I have been trying to modify the custom media player card with controls to be more in line with the custom media player card with control.
Currently I do not have much experience with the button card, so my question would be more related to that I guess.
My current adjustments will render following look
So my questions are:
- The state of the entity is reflected in the name, but the background image that I set ( like the code in the media player with control card ) will not auto change. It will only change when refreshing the page. Any way to get it to work like the other card?
- The items of the card all have the theme back color now, how do you set this to transparent?
- The bottom items are left aligned, is center aligned possible too?
I got these working by using the vertical_buttons template inside the horizonal-stack card.
Here is my example (please note that I am using UI-mode):
type: horizontal-stack
cards:
- type: custom:button-card
template: vertical_buttons
entity: script.bedtime
- type: custom:button-card
template: vertical_buttons
entity: script.fans
- type: custom:button-card
template: vertical_buttons
entity: script.panic
1 Like
Can the chip_icon_only template use the MDI Icons or only the emojis? When I try to use the yaml code below all I get is the text mdi:alpha-g-circle displayed
type: 'custom:button-card'
template: chip_icon_only
variables:
ulm_chip_icon_only: 'mdi:alpha-g-circle'`
Only emojis: