Thank you. I moved my install to the HACS version and it seems to have resolved my problem.
Quick additional question - can I change the color scheme on a specific card? I have various scene cards (these are blue) and I’d like to add on that is red instead of blue.
Thanks
Appreciate that I am self talking but as I cannot change the color scheme of the scenes, I am now stuck on the behaviour of the Vertical Button Card (Vertical Button Card - UI Lovelace Minimalist). When used with an input boolean it does not show the state of this boolean by turning into the asked for color:
- type: 'custom:button-card'
template: card_vertical_button
entity: input_boolean.away
name: Away
icon: mdi:exit-run
variables:
ulm_card_vertical_button_state: on
ulm_card_vertical_button_color: red
The button does work but it does not indicate an on or off state. What am I missing? I am actually trying to recreate this from the wiki Vertical Buttons - how is that done, also with the time below? Thank you!
Could you share you room cards code? They’re lovely
hi, I don’t mind sharing but there are some minor problems in the code. for instance the thermostat button is connected to a script which allows me to cycle through three states off auto heat. I want to built the script directly in to the card!
I am not a coder, very low expertise. (mostly using google to learn).
I would be happy if you/anybody wants to give the last small code implementations.
I need help on;
That’s no problem! We are all here to share even when it’s not perfect 
I’m no coder either, and I’m barely using Minimalist yet (using Mushroom, very similar in style but way easier). But I loved those cards so I’ll be looking into them.
Did you make them from scratch or did you re-use an existing resource? (sorry I’m not aware of all the existing cards for Minimalist, but I haven’t really seen those ones and I went through all the custom cards last week).
Regarding the number of lights, it’s probably easy to do with a template. The other question is where to display the counter - replacing the bulbs icon or as a badge counter?
Looking forward to that code! Thank you in advance
I scrolled up and saw your posts and code, so I can start there unless you’ve updated it considerably. Thanks!
here you go, please do let me know if you find improvements!
---
custom_card_room:
template:
- "ulm_language_variables"
variables:
room_card_area_name: "your area name"
room_card_image_path: "your area image url"
room_card_climate_entity: "your area climate entity"
room_card_label: true
color: "var(--google-grey-500)"
show_icon: false
show_name: true
show_label: true
triggers_update: "all"
label: |-
[[[
if (variables.room_card_label) {
return '<ha-icon icon="mdi:thermometer" style="width: 16px; height: 16px;"></ha-icon>' + (entity.attributes.current_temperature || entity.attributes.temperature || entity.state || '-') + '°C' + ' | '
+ '<ha-icon icon="mdi:water-percent" style="width: 18px; height: 18px;"></ha-icon>' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%' + ' | '
+ '<ha-icon icon="mdi:lightbulb-on" style="width: 16px; height: 16px;"></ha-icon>' + ' count ' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%';
} else if (entity.state == "on") {
return variables.ulm_on
} else if (entity.state == "off") {
return variables.ulm_off
} else {
return entity.state
}
]]]
## {{ expand(area_entities('Bedroom 1')) | selectattr('domain','eq','light') | selectattr('state','eq','on') | list | count }}
## {{ area_id('my_device_id') }}
# state:
# - operator: "template"
# value: >
# [[[
# return (variables.entity_8.state != "on")
# ]]]
# styles:
# card:
# - background-image: >
# [[[
# return 'linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.4) 100%), url('+ variables.room_card_image_path +')'
# ]]]
state:
- styles:
custom_fields:
notification:
- border-radius: "50%"
- border: "2px solid var(--card-background-color)"
- width: "24.5px"
- height: "24.5px"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "35%"
- margin-left: "-35%"
- line-height: 0
- display: "grid"
value: "unavailable"
styles:
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
- background-size: "cover"
- background-repeat: "no-repeat"
- background-position: "center"
- background-image: >
[[[
return 'linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%), url('+ variables.room_card_image_path +')'
]]]
state:
- justify-self: "start"
- font-weight: "bold"
- font-size: "14px"
- filter: "opacity(40%)"
- margin-left: "6px"
grid:
- grid-template-areas: "'n n n n n n n n' 'l l l l l l l l' 'i1 i2 i3 i4 i5 i6 i7 i8'"
- grid-template-columns: " 1fr minmax(0px, 0.5fr) minmax(0px, 0.5fr) . 1fr 1fr 1fr 1fr 1fr"
- grid-template-rows: "min-content 2.5fr 1fr"
- justify-items: "center"
- gap: "0em 0.5em"
name:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- color: "white"
- font-size: "1.4em"
- margin-left: "6px"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- color: "white"
- font-size: "0.7em"
- margin-left: "6px"
custom_fields:
i1:
- justify-self: "start"
- align-self: "start"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i2:
- justify-self: "start"
- align-self: "start"
- border-radius: "50%"
- width: "0px"
- height: "42px"
- display: "grid"
i3:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "0px"
- height: "42px"
- display: "grid"
i4:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i5:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i6:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i7:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
i8:
- justify-self: "end"
- align-self: "end"
- border-radius: "50%"
- width: "42px"
- height: "42px"
- display: "grid"
custom_fields:
# notification: >
# [[[
# if (entity.state =='unavailable'){
# return `<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>`
# }
# ]]]
#presence entity
i1:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_1?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_1.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_1; ]]]"
entity: >
[[[
if (variables.entity_1.entity_id) {
return variables.entity_1.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_1; ]]]"
styles:
card:
- display: "none"
i2:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_2?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_2.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_2; ]]]"
entity: >
[[[
if (variables?.entity_2?.entity_id) {
return variables.entity_2.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_2; ]]]"
styles:
card:
- display: "none"
i3:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_3?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_3.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_3; ]]]"
entity: >
[[[
if (variables?.entity_3?.entity_id) {
return variables.entity_3.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_3; ]]]"
styles:
card:
- display: "none"
i3:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_3?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_3.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_3; ]]]"
entity: >
[[[
if (variables?.entity_3?.entity_id) {
return variables.entity_3.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_3; ]]]"
styles:
card:
- display: "none"
value: >
[[[
if (states[entity.entity_id].attributes.hvac_modes.includes("auto")) {
return (entity.attributes.hvac_modes == 'auto')
}
]]]
#climate entity
i5:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_5?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_5.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_5; ]]]"
entity: >
[[[
if (variables?.entity_5?.entity_id) {
return variables.entity_5.entity_id;
}
]]]
icon: mdi:power
# if icon is stated in UI then uncomment
# icon: >
# [[[
# if (variables?.entity_5?.icon) {
# return variables.entity_5.icon;
# }
# ]]]
state:
- operator: "template"
value: >
[[[
return (entity.attributes.hvac_modes == 'heat' || entity.attributes.hvac_action == 'heating')
]]]
icon: "mdi:fire"
styles:
icon:
- color: "rgba(var(--color-red),1)"
img_cell:
- background-color: "rgba(var(--color-red),0.2)"
- operator: "template"
value: >
[[[
return (entity.attributes.hvac_modes == 'heat' || entity.attributes.hvac_action == 'idle')
]]]
icon: "mdi:sync-circle"
styles:
icon:
- color: "rgba(var(--color-green),1)"
img_cell:
- background-color: "rgba(var(--color-green),0.2)"
value: >
[[[
return (entity.attributes.hvac_modes == 'auto' || entity.attributes.hvac_action == 'idle')
]]]
icon: "mdi:sync-circle"
styles:
icon:
- color: "rgba(var(--color-green),1)"
img_cell:
- background-color: "rgba(var(--color-green),0.2)"
i6:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_6?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_6.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_6; ]]]"
entity: >
[[[
if (variables?.entity_6?.entity_id) {
return variables.entity_6.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_6; ]]]"
styles:
card:
- display: "none"
i7:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_7?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_7.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_7; ]]]"
entity: >
[[[
if (variables?.entity_7?.entity_id) {
return variables.entity_7.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_7; ]]]"
styles:
card:
- display: "none"
i8:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_8?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_8.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_8; ]]]"
entity: >
[[[
if (variables?.entity_8?.entity_id) {
return variables.entity_8.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_8; ]]]"
styles:
card:
- display: "none"
widget_icon_room:
variables:
tap_action:
action: "toggle"
hold_action:
action: "none"
tap_action:
action: >
[[[ if (variables?.tap_action?.action) return variables.tap_action.action; else return 'none'; ]]]
entity: "[[[ return variables.tap_action.entity; ]]]"
navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
url_path: "[[[ return variables.tap_action.url_path; ]]]"
service: "[[[ return variables.tap_action.service; ]]]"
service_data: "[[[ return variables.tap_action.service_data; ]]]"
hold_action:
action: >
[[[ if (variables?.hold_action?.action) return variables.hold_action.action; else return 'none'; ]]]
entity: "[[[ return variables.hold_action.entity; ]]]"
navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
url_path: "[[[ return variables.hold_action.url_path; ]]]"
service: "[[[ return variables.hold_action.service; ]]]"
service_data: "[[[ return variables.hold_action.service_data; ]]]"
show_icon: true
show_name: false
styles:
grid:
- grid-template-areas: "'i'"
card:
- height: "100%"
- box-shadow: "none"
- padding: "0px"
- border-radius: "50%"
icon:
- width: "50%"
- height: "50%"
- line-height: "0"
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- border-radius: "50%"
- background-color: "rgba(var(--color-theme),0.05)"
color: "var(--google-grey)"
in case someone struggles with the same issue - the state on needs to be put into “”. It cannot just stand as the word on. I knew that but looking at it for too long makes you blind.
Hi,
I’m still pretty new to all of this and doing a lot of research to learn. I want to use a chip at the top of my view to show window and door sensor status and have the icon and color change based on the state. For a window, show the open window icon in red when it’s opened, and show the closed window icon in green when it’s closed.
I’ve managed to get it working with the code below, but is this the best way to do it? With almost 20 contact sensors between doors and windows, I wasn’t sure if there’s a better way instead of copying/pasting this for each sensor.
- type: custom:button-card
template:
- chip_mdi_icon_state
- ulm_language_variables
variables:
ulm_chip_mdi_icon_state_icon: mdi:window
ulm_chip_mdi_icon_state_entity: binary_sensor.laundry_room_window_contact
label: >
[[[ return states[variables.ulm_chip_mdi_icon_state_entity].state == 'on' ?
variables.ulm_open : variables.ulm_closed ]]]
icon: >
[[[ return states[variables.ulm_chip_mdi_icon_state_entity].state == 'on' ?
'mdi:window-open' : 'mdi:window-closed' ]]]
styles:
icon:
- color: >
[[[ return states[variables.ulm_chip_mdi_icon_state_entity].state == 'on' ?
'red' : 'green' ]]]
For anyone interested, have modified the awesome speedtest card to suit broadband, in my case Aussie Broadband.
Template:
---
custom_card_broadband:
triggers_update: "all"
show_name: false
show_label: false
variables:
ulm_custom_card_aussiebb_color: "green"
ulm_custom_card_aussiebb_name: "Aussie BB"
ulm_custom_card_aussiebb_label: "Usage"
ulm_custom_card_aussiebb_remaining: "30"
styles:
grid:
- grid-template-areas: "'item1' 'item2' 'item3'"
- 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"
tap_action:
action: "none"
show_last_changed: false
show_label: true
show_name: true
show_icon: true
label: >-
[[[ return variables.ulm_custom_card_aussiebb_label
]]]
name: >-
[[[ return variables.ulm_custom_card_aussiebb_name
]]]
icon: "mdi:swap-horizontal"
styles:
icon:
- color: >-
[[[ return
`rgba(var(--color-${variables.ulm_custom_card_aussiebb_color}),
1)`; ]]]
- width: "32px"
label:
- justify-self: "center"
- align-self: "start"
- font-weight: "bolder"
- font-size: "12px"
- filter: "opacity(40%)"
name:
- margin-top: "10px"
- justify-self: "center"
- font-weight: "bold"
- font-size: "14px"
img_cell:
- background-color: >-
[[[ return
`rgba(var(--color-${variables.ulm_custom_card_aussiebb_color}),
0.2)`; ]]]
- border-radius: "50%"
- place-self: "center"
- width: "62px"
- height: "62px"
grid:
- grid-template-areas: "'i' 'n' 'l'"
card:
- box-shadow: "none"
size: "20px"
item2:
card:
type: "custom:button-card"
tap_action:
action: "call-service"
service: "speedtestdotnet.speedtest"
show_icon: true
layout: icon_name
show_label: false
show_name: true
styles:
icon:
- color: "rgba(var(--color-${variables.ulm_custom_card_aussiebb_color}),0.9)"
# - width: "20px"
img_cell:
- background-color: "none"
- place-self: "center"
- justify-self: "start"
# - width: "40px"
# - height: "20px"
name:
# - align-self: "start"
# - justify-self: "start"
- font-weight: "bold"
- font-size: "16px"
card:
- box-shadow: "none"
- border-radius: "10px"
- border: "2px solid var(--google-grey)"
- padding_bottom: "-8px"
- height: "40px"
- padding-top: "5px"
- padding-left: "5px"
name: >-
[[[ return states[variables.ulm_custom_card_aussiebb_remaining].state + ' days'
]]]
icon: "mdi:calendar-end"
item3:
card:
type: "custom:button-card"
template: "list_2_items"
custom_fields:
item1:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
color: "var(--google-blue)"
show_label: true
show_icon: false
name: "Downloaded"
entity: >-
[[[ return
variables.ulm_custom_card_aussiebb_download_entity;
]]]
label: |
[[[
var state1 = "";
if (states[variables.ulm_custom_card_aussiebb_download_entity].state){
var state1 = states[variables.ulm_custom_card_aussiebb_download_entity].state;
if (states[variables.ulm_custom_card_aussiebb_download_entity].attributes.unit_of_measurement){
state1 += states[variables.ulm_custom_card_aussiebb_download_entity].attributes.unit_of_measurement;
}
}
return state1;
]]]
styles:
icon:
- width: "30px"
- height: "30px"
label:
- align-self: "center"
- justify-self: "center"
- font-weight: "bold"
- font-size: "16px"
name:
- align-self: "center"
- justify-self: "center"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
grid:
- grid-template-areas: "'l' 'n'"
- grid-template-columns: "auto"
- grid-template-rows: "min-content"
card:
- box-shadow: "none"
- padding-top: "15px"
- padding-botton: "10px"
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "14px"
- place-self: "center"
- height: "80px"
item2:
card:
type: "custom:button-card"
color: "var(--google-blue)"
show_label: true
show_icon: false
name: "Uploaded"
entity: >-
[[[ return
variables.ulm_custom_card_aussiebb_upload_entity;
]]]
label: |
[[[
var state1 = "";
if (states[variables.ulm_custom_card_aussiebb_upload_entity].state){
var state1 = states[variables.ulm_custom_card_aussiebb_upload_entity].state;
if (states[variables.ulm_custom_card_aussiebb_upload_entity].attributes.unit_of_measurement){
state1 += states[variables.ulm_custom_card_aussiebb_upload_entity].attributes.unit_of_measurement;
}
}
return state1;
]]]
styles:
icon:
- width: "30px"
- height: "30px"
label:
- align-self: "center"
- justify-self: "center"
- font-weight: "bold"
- font-size: "16px"
name:
- align-self: "center"
- justify-self: "center"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
grid:
- grid-template-areas: "'l' 'n'"
- grid-template-columns: "auto"
- grid-template-rows: "min-content"
card:
- box-shadow: "none"
- padding-top: "15px"
- padding-botton: "10px"
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "14px"
- place-self: "center"
- height: "80px"
Button code:
- type: custom:button-card
template: custom_card_broadband
variables:
ulm_custom_card_aussiebb_download_entity: sensor.nbn_downloaded_gb
ulm_custom_card_aussiebb_upload_entity: sensor.nbn_uploaded_gb
ulm_custom_card_aussiebb_color: green
ulm_custom_card_aussiebb_name: Aussie Broadband
ulm_custom_card_aussiebb_label: Usage
ulm_custom_card_aussiebb_remaining: sensor.nbn_billing_cycle_remaining
Hi. I have 1 question/issue that maybe I ask here before thinking about raising it in github:
1- Grey, squared background when tapping a (white, rounded) Room card/icon (on mobile. iPhone 13, iOS 15.4 Beta 4, same on latest HA iOS app & Chrome. Minimalist theme - all 3 no difference)
Can I disable this somehow? I’d rather not have any effect than one that “overflows” like this.
On desktop, the long-press effect (there is no effect on click) is perfect:
This works at a card level (but not the entities, which seem to be their own cards inside.
- type: 'custom:button-card'
card_mod:
style: |
mwc-ripple {display:none;}
`
Questions I solved. Sharing learnings:
2. Haptics only supported for the main card?
Is it possible to enable haptics als for the entities (small rounded icons) on a Room Card?
Yes, creating a custom card (based off card_room) and editing the section at the bottom. See here editing the template in
/config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/card_templates/cards/card_room.yaml
3. Add double_tap_actions for the icons in Room card
Yes, creating a custom card (based off card_room) and editing the section at the bottom. See here editing the template in
/config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/card_templates/cards/card_room.yaml
Thank you 
Thank you.
Also pulled the card code from your previous post some days before.
It’s taking me a lot of work to get your card working. It didn’t show up at first - I saw in the Console that it requires a climate entity. I removed that part to make it work with the room light.
Background image is not loading for me (/local/images/bedroom.jpg - it’s working in another card, and it works if done via console css). background-image is just not being generated 
I’ll keep playing with it. It’s a really nice layout!
Btw, I think you wanted to add more actions to the card and/or widgets/icons (double_tap, hold). I’ve done that in my custom_card_room too. See my post here about doing that. I also added haptics
Cheers
Can you share your popup template en ui code?
Popups problem - for me none pop ups work. I tried the light popup and also the custom person card with pop up and nothing. I have the requirements installed via HACS, set it up in yaml same way as it should be and still nothing. for light poo up hold action does nothing - for light without pop up it opens the classic pop up windows from HA not the nice minimalist one.
For the person card - again it does nothing. Am i missing some settings?
Good afternoon all!
I have a quick question and I cannot seem to understand it.
I want to install Graph Card, but I don’t know exactly how to do it. What do I have to do with the template code and how to install that? I cannot find any documentation about is.
https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_graph/
Hope someone can help
Minimalist automatically install a mini graph card template. (Look in the picture for directory)
Just copy or type this code which was also provided in your linked guide and edit variables.
- type: 'custom:button-card'
template: card_graph
variables:
ulm_card_graph_color: "var(--google-blue)"
ulm_card_graph_name: Temperature Livingroom
ulm_card_graph_entity: sensor.livingroom_temperature
ulm_card_graph_color2: "var(--google-green)"
ulm_card_graph_entity2: sensor.bedgroom_temperature
ulm_card_graph_type: fill
ulm_card_graph_hours: 24
for me it helped to clear the browser cache and restart home assitant
tried that several time. It won’t work - pc or phone, it behaves still the same 
Hello. I understood how to use regular custom cards, but I don’t understand how to use the users who post their work here. I tried to install in custom_components in the folder where the add-on is located, or in the root config/ui_lovelace_minimalist/custom_card. How to edit yaml, I know what names to assign to configs is not clear. Does anyone have a mini faq?
I need help. I started the configuration, when I modify the configuration.yaml file with frontend to apply the theme, with the restart the Home Assistant Cloud menu disappears and I cannot access from smartphone. Am I wrong something?
You can still access the navigation bar by swiping from the left side. If you want to get the sidebar icon back you can do it by editing minimalist-mobile-tapbar.yaml script.