Hi all,
I have a question regarding the cool pop up card (media player).
At the control section I have source set to false so that this will show the arrow down.
Changes:
Result:
Once I select the error the card flickers and is not showing anything. Is there a way that I can make this work correctly? I have tried now many ways but not able to fix this.
Hopefully somebody has a awesome solution and I can make my girlfriend happy again that she can select music 
This is the old and deprecated documentation that is no longer maintained.
Better you forget these 
If you have problems with the current cards and the associated current documentation, the best thing to do is to make an issue on Github.
Another Week another Release 
Please note that there are also already two small hotfixes to the current release.
Ā· UI-Lovelace-Minimalist/UI (github.com) Ā· UI-Lovelace-Minimalist/UI (github.com)
Features
Code enhancements
unit_of_measurement if present cmintey
Bug Fixes
Translations
Documentation
Thank you so much for helping out to keep this UI awesomeAndyVRD, AritroSaha10, CM000n, LRvdLinden, Ned-Tom, Tommatheussen, Toudix, aehru, basbruss, bavo, bbo76, bruvv, checkerschaf, cmintey, cs42, dcoro, eliseo-juan, eraycetinay, freps, github-actions, kubiksamek, leon38, marcodallago, mazerte, miniminne, mstefany, r0binj, sildehoop, simonbirt, tivoo, ulic75, xPhantomNL and Eray Ćetinay
Wonderful. Can you share the code PM?
Hi, can you send me your code? I donāt mind if itās dirty I just want to see the parameters you used for some cards.
hi all,
I am working on custom top navigation bar.
with back ward forward navigation and choose the color etc.
it is working good, except I would like to add functionality to hide forward or backward buttons with a variable.
I need help to code;
UI code:
###### top bar
- type: "custom:button-card"
template: custom_top_bar
variables:
custom_top_bar_label: BEDROOM 1
custom_top_bar_icon: mdi:bed-double
custom_top_bar_color: 'rgba(var(--color-blue), 0.2)'
custom_top_bar_navigate_path_back: '/lovelace-myhome/home'
custom_top_bar_navigate_path_title: '/lovelace-myhome/011_bedroom_1_full'
custom_top_bar_navigate_path_next: '/lovelace-myhome/011_bedroom_1_full'
card code: (part)
---
### custom_top_bar ###
custom_top_bar:
variables:
- custom_top_bar_label: "your topbar name"
- custom_top_bar_icon: "your topbar icon"
- custom_top_bar_color: "your topbar color"
- custom_top_bar_navigate_path_back: "your topbar navigation path back"
- custom_top_bar_navigate_path_title: "your topbar navigation path title"
- custom_top_bar_navigate_path_next: "your topbar navigation path next"
styles:
grid:
- display: "flex"
- justify-content: "space-between"
card:
- background-color: "#ffffff7d"
- box-shadow: "none"
- padding: "6px"
- color: "rgba(0,0,0,0.8)"
- backdrop-filter: "blur(33px)"
- background-blend-mode: "overlay"
icon:
- color: "[[[ return variables.ulm_chip_navigate_icon_color; ]]]"
label:
- color: "[[[ return variables.ulm_chip_navigate_label_color; ]]]"
custom_fields:
##back button
back:
card:
type: 'custom:button-card'
template: chip_navigate
show_icon: true
icon: "mdi:arrow-left"
variables:
custom_top_bar_navigate_path_back: "your top bar back navigation path"
styles:
grid:
- justify-self: "start"
- grid-area: "back"
# card:
# - display: >
# [[[
# if (variables.custom_top_bar_navigate_path_back != 'none' ) {
# return "none";
# }else {
# return 'block';
# ]]]
tap_action:
action: "navigate"
navigation_path: "[[[ return variables.custom_top_bar_navigate_path_back; ]]]"
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