great that did the trick
Is there a reason why i don’t get the pop-up? I have copied your code…
Have you installed browser_mod ?
Hi, i tried to install this theme by the UI method. I installed HACS and all repository. Then i generated the Code with the code generator but get an Error, when i try to safe it in the RAW Editor.
"ypeError: Expected a value of type Array<Object> for views but received undefined.
I have no idea, whats going wrong 
We will need some more information before we can help you.
Can you share the configuration you used?
####################
#
# UI-Lovelace-Minimalist CodeGenerator Installation
#
# Author: Paddy0174
#
####################
button_card_templates:
blue:
state:
- styles:
icon:
- color: 'rgba(var(--color-blue),1)'
label:
- color: 'rgba(var(--color-blue-text),1)'
name:
- color: 'rgba(var(--color-blue-text),1)'
img_cell:
- background-color: 'rgba(var(--color-blue), 0.2)'
card:
- background-color: 'rgba(var(--color-background-blue), var(--opacity-bg))'
value: 'on'
blue_no_state:
styles:
icon:
- color: 'rgba(var(--color-blue),1)'
label:
- color: 'rgba(var(--color-blue-text),1)'
name:
- color: 'rgba(var(--color-blue-text),1)'
img_cell:
- background-color: 'rgba(var(--color-blue), 0.2)'
card:
- background-color: 'rgba(var(--color-background-blue), var(--opacity-bg))'
card_battery:
template:
- icon_info_bg
tap_action:
action: more-info
variables:
ulm_card_battery_attribute:
icon: |
[[[
var icon = "mdi:help-circle-outline";
var battery = variables.ulm_card_battery_attribute !== null
? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute]
: states[entity.entity_id].state;
if (battery == 100) {
icon = "mdi:battery";
} else if (battery >= 90) {
icon = "mdi:battery-90";
} else if (battery >= 80) {
icon = "mdi:battery-80";
} else if (battery >= 70) {
icon = "mdi:battery-70";
} else if (battery >= 60) {
icon = "mdi:battery-60";
} else if (battery >= 50) {
icon = "mdi:battery-50";
} else if (battery >= 40) {
icon = "mdi:battery-40";
} else if (battery >= 30) {
icon = "mdi:battery-30";
} else if (battery >= 20) {
icon = "mdi:battery-20";
} else if (battery >= 10) {
icon = "mdi:battery-10";
} else {
icon = "mdi:battery-outline";
}
return icon;
]]]
label: |
[[[
var battery = variables.ulm_card_battery_attribute !== null
? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute]
: states[entity.entity_id].state;
return battery + "%";
]]]
name: |
[[[
return states[entity.entity_id].attributes.friendly_name;
]]]
styles:
icon:
- color: 'rgba(var(--color-theme),0.9)'
label:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
- filter: opacity(100%)
name:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
grid:
- grid-template-areas: '"i l" "i n"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card_binary_sensor:
template:
- icon_info_bg
- blue
name: "[[[ return entity.attributes.friendly_name != '' ? entity.attributes.friendly_name : entity.entity_id ]]]"
show_last_changed: true
card_binary_sensor_alert:
template:
- icon_info_alert
name: "[[[ return entity.attributes.friendly_name != '' ? entity.attributes.friendly_name : entity.entity_id ]]]"
show_last_changed: true
card_cover_with_buttons:
variables:
ulm_card_cover_with_buttons_name: "n/a"
triggers_update:
- "[[[ variables.ulm_card_cover_with_buttons_entity ]]]"
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'
template:
- icon_info
- ulm_language_variables
- cover
tap_action:
action: more-info
entity: '[[[ return variables.ulm_card_cover_with_buttons_entity ]]]'
name: '[[[ return variables.ulm_card_cover_with_buttons_name ]]]'
item2:
card:
type: 'custom:button-card'
template: list_items
custom_fields:
item1:
card:
type: 'custom:button-card'
template: widget_icon
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: '[[[ return variables.ulm_card_cover_with_buttons_entity ]]]'
icon: 'mdi:arrow-down'
item2:
card:
type: 'custom:button-card'
template: widget_icon
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: '[[[ return variables.ulm_card_cover_with_buttons_entity ]]]'
icon: 'mdi:pause'
item3:
card:
type: 'custom:button-card'
template: widget_icon
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: '[[[ return variables.ulm_card_cover_with_buttons_entity ]]]'
icon: 'mdi:arrow-up'
card_generic:
template:
- icon_info_bg
- ulm_language_variables
label: >
[[[
var unit = entity.attributes.unit_of_measurement != null ? ' ' + entity.attributes.unit_of_measurement : ''
if (entity.state == 'on') {
return variables.ulm_on;
} else if (entity.state == 'off') {
return variables.ulm_off;
} else if (entity.state == 'unavailable') {
return variables.ulm_unavailable;
} else if (entity.state == 'idle') {
return variables.ulm_idle;
} else if (entity.state == 'open') {
return variables.ulm_open;
} else if (entity.state == 'closed') {
return variables.ulm_closed;
} else {
return entity.state + unit;
}
]]]
styles:
icon:
- color: 'rgba(var(--color-theme),0.9)'
label:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
- filter: opacity(100%)
name:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
grid:
- grid-template-areas: '"i l" "i n"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card_generic_swap:
template:
- icon_info_bg
- ulm_language_variables
label: >
[[[
var unit = entity.attributes.unit_of_measurement != null ? ' ' + entity.attributes.unit_of_measurement : ''
if (entity.state == 'on') {
return variables.ulm_on;
} else if (entity.state == 'off') {
return variables.ulm_off;
} else if (entity.state == 'unavailable') {
return variables.ulm_unavailable;
} else if (entity.state == 'idle') {
return variables.ulm_idle;
} else if (entity.state == 'open') {
return variables.ulm_open;
} else if (entity.state == 'closed') {
return variables.ulm_closed;
} else {
return entity.state + unit;
}
]]]
styles:
icon:
- color: 'rgba(var(--color-theme),0.9)'
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
- filter: opacity(100%)
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card_graph:
variables:
ulm_card_graph_color: "var(--info-color)"
ulm_card_graph_name: "n/a"
triggers_update:
- "[[[ variables.ulm_card_graph_entity ]]]"
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 0px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- card_generic
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 12px
entity: '[[[ return variables.ulm_card_graph_entity ]]]'
name: '[[[ return variables.ulm_card_graph_name ]]]'
item2:
card:
type: 'custom:mini-graph-card'
entities:
- entity: '[[[ return variables.ulm_card_graph_entity ]]]'
line_color: '[[[ return variables.ulm_card_graph_color ]]]'
show:
name: false
icon: false
legend: false
state: false
style: |
ha-card {
box-shadow: none;
border-radius: var(--border-radius);
}
card_input_boolean:
template:
- icon_info_bg
- ulm_language_variables
- blue
name: "[[[ return entity.attributes.friendly_name != '' ? entity.attributes.friendly_name : entity.entity_id ]]]"
label: >
[[[
if (entity.state != 'unavailable'){
if (entity.state == 'on'){
return variables.ulm_on;
} else {
return variables.ulm_off;
}
} else {
return variables.ulm_unavailable;
}
]]]
card_light:
template:
- icon_info_bg
- yellow
- ulm_language_variables
tap_action:
action: toggle
hold_action:
action: more-info
label: >-
[[[
if (entity.state != 'unavailable'){
if (entity.state =='off'){
return variables.ulm_off;
} else if (entity.state == 'on'){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
} else {
return variables.ulm_on
}
}
} else {
return variables.ulm_unavailable;
}
]]]
card_light_slider:
template:
- ulm_language_variables
variables:
ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
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'
template:
- icon_info
- yellow_slider
entity: "[[[ return entity.entity_id ]]]"
label: >-
[[[
if (entity.state !='unavailable'){
if (entity.state =='off'){
return variables.ulm_off;
} else if (entity.state == 'on'){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
} else {
return variables.ulm_on
}
}
} else {
return variables.ulm_unavailable;
}
]]]
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
- padding: 0px
item2:
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
card_light_slider_collapse:
template:
- ulm_language_variables
variables:
ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
grid:
- row-gap: 12px
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- yellow_slider
entity: "[[[ return entity.entity_id ]]]"
label: >-
[[[
if (entity.state !='unavailable'){
if (entity.state =='off'){
return variables.ulm_off;
} else if (entity.state == 'on'){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
} else {
return variables.ulm_on
}
}
} else {
return variables.ulm_unavailable;
}
]]]
name: "[[[ return variables.ulm_card_light_slider_collapse_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
- padding: 0px
item2:
card:
type: conditional
conditions:
- entity: "[[[ return entity.entity_id ]]]"
state: 'on'
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
card_light_slider_horizontal:
template:
- ulm_language_variables
variables:
ulm_card_light_slider_horizontal_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- yellow_slider
entity: "[[[ return entity.entity_id ]]]"
label: >-
[[[
if (entity.state !='unavailable'){
if (entity.state =='off'){
return variables.ulm_off;
} else if (entity.state == 'on'){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
} else {
return variables.ulm_on
}
}
} else {
return variables.ulm_unavailable;
}
]]]
name: "[[[ return variables.ulm_card_light_slider_horizontal_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
- padding: 0px
item2:
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
card_media_player:
template:
- icon_info_bg
- ulm_language_variables
icon: |
[[[
var icon = 'mdi:speaker';
if(entity.attributes.app_name){
var app = entity.attributes.app_name.toLowerCase();
if(app == 'spotify'){
var icon = 'mdi:spotify';
} else if(app == 'google podcasts'){
var icon = 'mdi:google-podcast';
} else if(app == 'plex'){
var icon = 'mdi:plex';
} else if(app == 'soundcloud'){
var icon = 'mdi:soundcloud';
} else if(app == 'youtube music'){
var icon = 'mdi:youtube';
} else if (app == 'oto music'){
var icon = 'mdi:music-circle';
}
}
return icon;
]]]
label: |
[[[
if (entity.state == 'off'){
return variables.ulm_off;
} else {
return variables.ulm_on;
}
]]]
state:
- operator: template
value: "[[[ return entity.state != 'off' ]]]"
name: "[[[ return states[entity.entity_id].attributes.media_title; ]]]"
label: |
[[[
var label = variables.ulm_on;
if(states[entity.entity_id].attributes.media_album_name){
var label = states[entity.entity_id].attributes.media_album_name;
}
return label;
]]]
card_media_player_with_control:
template:
- icon_info_bg
- ulm_language_variables
icon: |
[[[
var icon = 'mdi:speaker';
if(entity.attributes.app_name){
var app = entity.attributes.app_name.toLowerCase();
if(app == 'spotify'){
var icon = 'mdi:spotify';
} else if(app == 'google podcasts'){
var icon = 'mdi:google-podcast';
} else if(app == 'plex'){
var icon = 'mdi:plex';
} else if(app == 'soundcloud'){
var icon = 'mdi:soundcloud';
} else if(app == 'youtube music'){
var icon = 'mdi:youtube';
} else if (app == 'oto music'){
var icon = 'mdi:music-circle';
}
}
return icon;
]]]
label: |
[[[
if (entity.state == 'off'){
return variables.ulm_off;
} else {
return variables.ulm_on;
}
]]]
state:
- operator: template
value: "[[[ return entity.state != 'off' ]]]"
name: "[[[ return states[entity.entity_id].attributes.media_title; ]]]"
label: |
[[[
var label = variables.ulm_on;
if(states[entity.entity_id].attributes.media_album_name){
var label = states[entity.entity_id].attributes.media_album_name;
}
return label;
]]]
styles:
label:
- color: white
- filter: opacity(100%)
img_cell:
- background-color: 'rgba(var(--color-theme),0.0)'
icon:
- color: white
name:
- color: white
styles:
label:
- opacity: '0.6'
icon:
- color: 'rgba(var(--color-theme),0.2)'
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
card:
- background-blend-mode: multiply
- background: "[[[ return states[entity.entity_id].attributes.entity_picture != null ? 'center / cover url(' + states[entity.entity_id].attributes.entity_picture + ') rgba(0, 0, 0, 0.15)' : '' ]]]"
card_media_player_with_controls:
variables:
ulm_card_media_player_with_controls_name: "No name set"
triggers_update:
- "[[[ ulm_card_media_player_with_controls_entity ]]]"
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'
template:
- ulm_language_variables
- card_media_player
tap_action:
action: more-info
entity: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'
name: '[[[ return variables.ulm_card_media_player_with_controls_name ]]]'
styles:
card:
- 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
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'
icon: 'mdi:skip-previous'
item2:
card:
type: 'custom:button-card'
template: widget_icon
entity: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'
icon: 'mdi:pause'
state:
- value: paused
icon: 'mdi:play'
- value: 'off'
icon: 'mdi:play'
item3:
card:
type: 'custom:button-card'
template: widget_icon
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: '[[[ return entity.ulm_card_media_player_with_controls_entity ]]]'
icon: 'mdi:skip-next'
card_navigate:
template:
- icon_only
- blue_no_state
tap_action:
action: navigate
navigation_path: "[[[ return variables.ulm_card_navigate_path; ]]]"
label: "[[[ return variables.ulm_card_navigate_title; ]]]"
icon: "[[[ return variables.ulm_card_navigate_icon; ]]]"
styles:
icon:
- color: 'rgba(var(--color-blue),0.7)'
label:
- align-self: center
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
- filter: opacity(100%)
img_cell:
- background-color: 'rgba(var(--color-blue), 0.2)'
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: min-content min-content
- grid-template-rows: min-content
card_person:
template: icon_info_bg
variables:
ulm_card_person_use_entity_picture: false
ulm_card_person_zone1: ''
ulm_card_person_zone2: ''
tap_action:
action: more-info
entity: "[[[ return variables.ulm_card_person_entity; ]]]"
show_label: true
show_name: true
label: "[[[ return states[variables.ulm_card_person_entity].state ]]]"
name: "[[[ return states[variables.ulm_card_person_entity].attributes.friendly_name ]]]"
entity: "[[[ return variables.ulm_card_person_entity; ]]]"
icon: 'mdi:face-man'
show_entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture ]]]"
entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture != false ? states[variables.ulm_card_person_entity].attributes.entity_picture : null ]]]"
styles:
icon:
- color: 'rgba(var(--color-theme),0.9)'
- width: >
[[[
if (variables.ulm_card_person_use_entity_picture != true){
return '20px';
} else {
return '42px';
}
]]]
- place-self: >
[[[
if (variables.ulm_card_person_use_entity_picture != true){
return 'center';
} else {
return 'stretch stretch';
}
]]]
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 38px
- top: 8px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: >
[[[
if (states[variables.ulm_card_person_entity].state != 'home'){
return "rgba(var(--color-green),1)";
} else {
return "rgba(var(--color-blue),1)";
}
]]]
custom_fields:
notification: >
[[[
if (states[variables.ulm_card_person_entity].state != 'home'){
if (states[variables.ulm_card_person_entity].state == variables.ulm_card_person_zone1){
var icon = states[variables.ulm_card_person_zone1].attributes.icon != null ? states[variables.ulm_card_person_zone1].attributes.icon : 'mdi:help-circle'
return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
} else if (states[variables.ulm_card_person_entity].state == variables.ulm_card_person_zone2){
var icon = states[variables.ulm_card_person_zone2].attributes.icon != null ? states[variables.ulm_card_person_zone2].attributes.icon : 'mdi:help-circle'
return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
} else {
return '<ha-icon icon="mdi:home-minus" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
}
} else {
return '<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
}
]]]
card_power_outlet:
template:
- icon_info_bg
- yellow
- ulm_language_variables
variables:
ulm_card_power_outlet_consumption_sensor:
label: |-
[[[
if (entity.state === "on" && variables.ulm_card_power_outlet_consumption_sensor !== null) {
return variables.ulm_on + " • " + states[variables.ulm_card_power_outlet_consumption_sensor].state + "W";
} else if (entity.state === "on") {
return variables.ulm_on;
} else if (entity.state === "off") {
return variables.ulm_off;
} else if (entity.state === "unavailable") {
return variables.ulm_unavailable;
} else {
return entity.state;
}
]]]
card_script:
template:
- icon_only
label: "[[[ return variables.ulm_card_script_title; ]]]"
icon: "[[[ return variables.ulm_card_script_icon; ]]]"
styles:
icon:
- color: 'rgba(var(--color-blue),0.7)'
label:
- align-self: center
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
- filter: opacity(100%)
img_cell:
- background-color: 'rgba(var(--color-blue), 0.2)'
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: min-content min-content
- grid-template-rows: min-content
card_title:
tap_action:
action: none
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: 12px
- margin-left: 24px
- margin-bottom: 0px
grid:
- grid-template-areas: '"n" "l"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: '1.5rem'
label:
- justify-self: start
- font-weight: bold
- font-size: '1rem'
- opacity: '0.4'
chip_back:
template: chips
tap_action:
action: navigate
navigation_path: "[[[ return variables.ulm_chip_back_path; ]]]"
show_icon: true
icon: 'mdi:arrow-left'
styles:
grid:
- grid-template-areas: '"i"'
chip_icon_double_state:
template: chips
triggers_update:
- "[[[ variables.ulm_chip_icon_double_state_entity_1 ]]]"
- "[[[ variables.ulm_chip_icon_double_state_entity_2 ]]]"
label: |
[[[
var icon = '❔';
if (variables.ulm_chip_icon_double_state_icon){
var icon = variables.ulm_chip_icon_double_state_icon;
}
var state1 = '';
if (states[variables.ulm_chip_icon_double_state_entity_1].state){
var state1 = states[variables.ulm_chip_icon_double_state_entity_1].state;
}
var state2 = '';
if (states[variables.ulm_chip_icon_double_state_entity_2].state){
var state2 = states[variables.ulm_chip_icon_double_state_entity_2].state;
}
return icon + ' ' + state1 + ' • ' + state2;
]]]
chip_icon_only:
template: chips
label: |
[[[
var icon = '❔';
if (variables.ulm_chip_icon_only){
var icon = variables.ulm_chip_icon_only;
}
return icon;
]]]
chip_icon_state:
template: chips
triggers_update:
- "[[[ variables.ulm_chip_icon_state_entity ]]]"
label: |
[[[
var icon = '❔';
if (variables.ulm_chip_icon_state_icon){
var icon = variables.ulm_chip_icon_state_icon;
}
var state = '';
if (states[variables.ulm_chip_icon_state_entity].state){
var state = states[variables.ulm_chip_icon_state_entity].state;
}
return icon + ' ' + state;
]]]
chip_power_consumption:
template:
- chips
- ulm_language_variables
triggers_update:
- "[[[ variables.ulm_chip_electric_consumption ]]]"
label: |
[[[
var amount = variables.ulm_chip_electric_price != '' ? true : false
if (amount){
return '⚡ ' + states[variables.ulm_chip_electric_price].state + variables.ulm_currency;
} else {
return '⚡ ' + states[variables.ulm_chip_electric_consumption].state;
}
]]]
chip_presence_detection:
template: chips
triggers_update:
- "[[[ variables.ulm_chip_presence_counter_residents ]]]"
- "[[[ variables.ulm_chip_presence_counter_guests ]]]"
label: |
[[[
var guests = states[variables.ulm_chip_presence_counter_guests].state ? ' / ' + states[variables.ulm_chip_presence_counter_guests].state : '';
return '🏠 ' + states[variables.ulm_chip_presence_counter_residents].state + guests;
]]]
chip_temperature:
template: chips
triggers_update:
- "[[[ variables.ulm_chip_temperature_weather ]]]"
- "[[[ variables.ulm_chip_temperature_outside ]]]"
- "[[[ variables.ulm_chip_temperature_inside ]]]"
label: |
[[[
var icon = '🌡️';
if (states[variables.ulm_chip_temperature_weather].state == 'clear-night'){
var icon = '🌙';
} else if(states[variables.ulm_chip_temperature_weather].state == 'cloudy'){
var icon = '☁️';
} else if(states[variables.ulm_chip_temperature_weather].state == 'exceptional'){
var icon = '🌞';
} else if(states[variables.ulm_chip_temperature_weather].state == 'fog'){
var icon = '🌫️';
} else if(states[variables.ulm_chip_temperature_weather].state == 'hail'){
var icon = '⛈️';
} else if(states[variables.ulm_chip_temperature_weather].state == 'lightning'){
var icon = '⚡';
} else if(states[variables.ulm_chip_temperature_weather].state == 'lightning-rainy'){
var icon = '⛈️';
} else if(states[variables.ulm_chip_temperature_weather].state == 'partlycloudy'){
var icon = '⛅';
} else if(states[variables.ulm_chip_temperature_weather].state == 'pouring'){
var icon = '🌧️';
} else if(states[variables.ulm_chip_temperature_weather].state == 'rainy'){
var icon = '💧';
} else if(states[variables.ulm_chip_temperature_weather].state == 'snowy'){
var icon = '❄️';
} else if(states[variables.ulm_chip_temperature_weather].state == 'snowy-rainy'){
var icon = '🌨️';
} else if(states[variables.ulm_chip_temperature_weather].state == 'sunny'){
var icon = '☀️';
} else if(states[variables.ulm_chip_temperature_weather].state == 'windy'){
var icon = '🌪️';
}
return icon + ' ' + states[variables.ulm_chip_temperature_outside].state + '° / ' + states[variables.ulm_chip_temperature_inside].state + '°' ;
]]]
chips:
tap_action:
action: more-info
show_icon: false
show_label: true
show_name: false
show_state: false
styles:
label:
- justify-self: center
- padding: 0px 6px
- font-weight: bold
- font-size: 14px
img_cell:
- width: 24px
grid:
- grid-template-areas: '"l"'
card:
- border-radius: 18px
- box-shadow: var(--box-shadow)
- height: 36px
- width: auto
- padding-left: 6px
- padding-right: 6px
size: 80%
cover:
tap_action:
action: more-info
icon: |
[[[
var icon = 'mdi:help-circle';
if (typeof states[entity.entity_id].attributes.current_position === 'undefined'){
if (states[entity.entity_id].state == 'closed'){
var icon = 'mdi:window-shutter';
} else
var icon = 'mdi:window-shutter-open';
} else {
if (states[entity.entity_id].attributes.current_position == 0){
var icon = 'mdi:window-shutter';
} else
var icon = 'mdi:window-shutter-open';
}
return icon ;
]]]
label: >-
[[[
var icon = 'mdi:help-circle';
if (typeof states[entity.entity_id].attributes.current_position === 'undefined'){
if (states[entity.entity_id].state == 'closed'){
return variables.ulm_closed;
} else
return variables.ulm_open;
} else {
if (states[entity.entity_id].attributes.current_position == 0){
return variables.ulm_closed;
} else {
return variables.ulm_open + ' • ' + (states[entity.entity_id].attributes.current_position) + '%' ;
}
}
return icon ;
]]]
state:
- operator: template
value: "[[[ return states[entity.entity_id].attributes.current_position != 0; ]]]"
styles:
icon:
- color: "rgba(var(--color-blue),1)"
img_cell:
- background-color: "rgba(var(--color-blue),0.2)"
edge:
styles:
card:
- width: 0px
icon:
color: var(--google-grey)
show_icon: true
show_label: false
show_name: false
state:
- styles:
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 24px
- top: -2px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
value: unavailable
styles:
icon:
- color: 'rgba(var(--color-theme),0.2)'
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i"'
- grid-template-columns: min-content
- grid-template-rows: min-content
card:
- border-radius: 21px
- box-shadow: none
- padding: 0px
custom_fields:
notification: >
[[[
if (entity.state =='unavailable'){
return '<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>'
}
]]]
size: 20px
yellow_slider:
state:
- styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
label:
- color: 'rgba(var(--color-yellow-text),1)'
name:
- color: 'rgba(var(--color-yellow-text),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow), 0.2)'
card:
- background-color: 'rgba(0,0,0,0)'
value: 'on'
icon_info_alert:
color: var(--google-grey)
show_icon: true
show_label: true
show_name: true
state:
- operator: template
value: "[[[ if (entity.state == 'unavailable' || entity.state == 'on'){ return true; } ]]]"
styles:
icon:
- color: 'rgba(var(--color-blue),1)'
label:
- color: 'rgba(var(--color-blue-text),1)'
name:
- color: 'rgba(var(--color-blue-text),1)'
img_cell:
- background-color: 'rgba(var(--color-blue), 0.2)'
card:
- background-color: 'rgba(var(--color-background-blue), var(--opacity-bg))'
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 38px
- top: 8px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
styles:
icon:
- color: 'rgba(var(--color-theme),0.2)'
label:
- justify-self: start
- align-self: start
- font-weight: bold
- 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: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
- 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: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
notification: >
[[[
if (entity.state =='unavailable' || entity.state == 'on'){
return '<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>'
}
]]]
size: 20px
icon_info_bg:
color: var(--google-grey)
show_icon: true
show_label: true
show_name: true
state:
- value: 'unavailable'
styles:
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 38px
- top: 8px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
styles:
icon:
- color: 'rgba(var(--color-theme),0.2)'
label:
- justify-self: start
- align-self: start
- font-weight: bold
- 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: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
- 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: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
notification: >
[[[
if (entity.state =='unavailable'){
return '<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>'
}
]]]
size: 20px
icon_info_line:
show_icon: true
show_label: true
show_name: false
styles:
icon:
- filter: opacity(40%)
label:
- padding: 2px
- justify-self: start
- align-self: center
- font-weight: bolder
- font-size: 12px
- margin-left: 0px
- filter: opacity(40%)
img_cell:
- place-self: center
- width: 14px
- height: 24px
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: max_content auto
- grid-template-rows: min-content
card:
- box-shadow: none
- padding: 0px
size: 100%
icon_only:
color: var(--google-grey)
show_icon: true
show_label: true
show_name: false
styles:
icon:
- color: 'rgba(var(--color-theme),0.2)'
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
size: 20px
list_items:
styles:
grid:
- grid-template-areas: '"item1 item2 item3"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
card:
- box-shadow: none
- padding: 0px
list_items_line:
styles:
grid:
- grid-template-areas: '"item1 item2 item3"'
- grid-template-columns: max-content max-content max-content
- grid-template-rows: min-content
- column-gap: 8px
card:
- box-shadow: none
- padding: 0px
widget_icon:
tap_action:
action: toggle
show_icon: true
show_name: false
styles:
grid:
- grid-template-areas: '"i"'
card:
- box-shadow: none
- padding: 0px
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 14px
- place-self: center
- height: 42px
icon:
- color: 'rgba(var(--color-theme),0.9)'
size: 20px
color: var(--google-grey)
yellow:
state:
- styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
label:
- color: 'rgba(var(--color-yellow-text),1)'
name:
- color: 'rgba(var(--color-yellow-text),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow), 0.2)'
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
value: 'on'
ulm_language_variables:
variables:
ulm_on: "an"
ulm_off: "aus"
ulm_open: "offen"
ulm_closed: "geschlossen"
ulm_unavailable: "nicht verfügbar"
ulm_standby: "standby"
ulm_idle: "im Leerlauf"
ulm_currency: "€"
It looks like you don’t have any cards included in your configuration, but only the templates for the cards.
If you want to show some cards (and have a starting point) you should check the box Add some example data to the code when generating the code.
To make things clear. The code generator does not generate a UI for you. It only sets you up the create the ui more easily.
See the instruction above the generator for more information 
Here you can generate the code you need to install this “theme” via
UI-mode.It bundles all necessary template data, language variables and custom-cards into one single block, so you can copy & paste it into your raw-config-editor.
Show instructions
- Select the language you want to use
- Select the custom-cards you want to install
- Select example data, if you want to have some example code added
- Click “Generate template code”
- The code will be generated and shows up in the textarea underneath the generate button
- Copy this code and paste it in your raw-config-editor
- See these instructions, if you don’t know where to paste this.
1 Like
I have these two memojis at the bottom of my overview dashboard. I wanted to make them go grey when the person was “not_home”. Tried this but it seems like it’s grey - no matter the state:
memoji-andre:
entity: person.andre
template: action_button_2
entity_picture: /local/img/andre.png
styles:
img_cell:
- box-shadow: none
state:
- value: 'not_home'
styles:
card:
- filter: opacity(80%)
icon:
- filter: grayscale(100%)
tap_action:
action: navigate
navigation_path: home
show_entity_picture: true
show_name: false
memoji-martine:
entity: person.martine
template: action_button_2
entity_picture: /local/img/martine1.png
styles:
img_cell:
- box-shadow: none
state:
- value: 'home'
styles:
card:
- filter: opacity(80%)
icon:
- filter: grayscale(100%)
tap_action:
action: navigate
navigation_path: home
show_entity_picture: true
At the moment both person are “not_home” that’s why I tried to set “Martine” to greyscale when “home” just to see if it would make her memoji show in color.
2 Likes
Myyyyyyyyyyy bad! Turns out Martine was home after all - and changing her state to “not_home” showed “home” in color 
The theme is not fullscreen per se. You either have to manually adjust the code for that or you can use an extension like Kiosk Mode.
1 Like
After playing around with this UI and reading through the forum, i was inspired by @clemalex’s 2 line button card and made one for my washing machine.
Note that this is a Samsung Washing Machine integrated in Home Assistant with SmartThings
Idle
Running
Remaining Time is calculated in a template:
template:
- sensor:
- unique_id: washer_remaining_time
name: 'Remaining Time'
state: >-
{% set rem_h = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-H', false) %}
{% set rem_m = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-M', false) %}
{% if int(rem_h) > 0.9 %} {{ rem_h }} hour(s) and {{ rem_m }} minute(s) {% else %} {{ rem_m }} minute(s) {% endif %}
The icons represtent the current job state in this order:
- weightSensing
- washing
- rinse
- spinning
- drying
I think this could also be implemented with other washing machines, as soon as they have the required attributes.
Also i have build a automation for a push notification , if anyone is interested 
Code:
Lovelace
- type: 'custom:button-card'
template: custom_washer_state_grid
variables:
ulm_custom_washer_grid_machine_state: switch.washer
ulm_custom_washer_grid_job_state: sensor.washer_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.washer_remaining_time
Templates
custom_washer_state_job_state_grid_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 'var(--border-radius)'
- pointer-events: none
- background-color: 'rgba(var(--color-theme), 0.05)'
- justify-items: center
grid:
- grid-template-areas: '"item1 item2 item3 item4 item5"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
- justify-items: center
img_cell:
- justify-items: center
custom_washer_state_grid_job_state_item_list_items:
show_icon: true
show_name: false
size: 20px
tap_action:
action: none
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 50%
- place-self: center
- height: 42px
- width: 42px
- pointer-events: auto
- background-color: transparent
grid:
- grid-template-areas: '"i"'
icon:
- color: var(--google-grey)
custom_washer_state_grid_state_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
custom_washer_state_grid:
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: custom_washer_state_grid_state_item_list
custom_fields:
item1:
card:
type: custom:button-card
template:
- icon_info
entity: '[[[ return variables.ulm_custom_washer_grid_machine_state ]]]'
icon: 'mdi:washing-machine'
name: Washing machine
tap_action:
action: more-info
label: 'not running'
state:
- value: 'on'
label: 'running'
styles:
icon:
- color: 'rgba(var(--color-blue), 1)'
img_cell:
- background-color: 'rgba(var(--color-background-blue), 0.2)'
item2:
card:
type: conditional
conditions:
- entity: '[[[ return variables.ulm_custom_washer_grid_machine_state ]]]'
state: 'on'
card:
type: custom:button-card
template:
- icon_info
entity: '[[[ return variables.ulm_custom_washer_grid_completion_timestamp ]]]'
icon: 'mdi:progress-clock'
tap_action:
action: none
label: '[[[ return states[variables.ulm_custom_washer_grid_completion_timestamp].state ]]]'
item2:
card:
type: custom:button-card
template: custom_washer_state_job_state_grid_item_list
custom_fields:
item1:
card:
type: custom:button-card
icon: mdi:scale
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: 'weightSensing'
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: 'white'
item2:
card:
type: custom:button-card
icon: mdi:waves
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: 'wash'
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: 'white'
item3:
card:
type: custom:button-card
icon: mdi:water
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: 'rinse'
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: 'white'
item4:
card:
type: custom:button-card
icon: mdi:fan
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: 'spin'
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: 'white'
item5:
card:
type: custom:button-card
icon: mdi:tumble-dryer
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: 'drying'
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: 'white'
Automation
id: '1637957448045'
alias: Notify Washing maschine job state
description: ''
trigger:
- platform: state
entity_id: sensor.washer_job_state
condition:
- condition: not
conditions:
- condition: state
entity_id: sensor.washer_job_state
state: none
action:
- service: notify.notify
data:
title: 🧺 Washing machine state changed
message: |-
{% if is_state("sensor.washer_job_state", "weightSensing") %}
Sensing load, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "wash") %}
Washing, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "rinse") %}
Rinsing, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "spin") %}
Spinning, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "drying") %}
Drying, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "finish") %}
Program finished, please empty the washing machine.
{% else %}
Unknown State, please check the washing machine!
{% endif %}
mode: single
Feel free to use/edit/implement this I would submit a pull request, but i’m not very familiar with github sadly.
30 Likes
It should be full-screen with the mobile-theme (with card-mod-root in the minimalist-mobile.yaml) , but somehow it broke in one stage: Theme: hide app-toolbar with card-mod issue · Issue #47 · UI-Lovelace-Minimalist/UI · GitHub
2 Likes
Has anyone heard from @paddy0174 ? I hope he is doing well. It’s been a while now (21 days 
) since he was last active on Giuthub
1 Like
I also check Github regularly to see if anything new is coming up. Unfortunately, there are no new updates from @paddy0174 at the moment.
Not sure if I’m an idiot, but I have been looking at this for the last 3 hours and cannot get it to work.
I tried everything, did the installation from scratch.
button-card is installed.
button_card_templates: !include_dir_merge_named minimalist-templates/
views:
- title: Minimalist
resources:
- url: /local/community/button-card/button-card.js
type: module
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: custom:button-card
template: title
name: Welcome to UI-Lovelace-Minimalist
- type: custom:button-card
template: edge
- title: Minimalist page 2
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: custom:button-card
template: title
name: UI-Lovelace-Minimalist second page
- type: custom:button-card
template: edge
Please help, about to cry of frustration
1 Like
Hey all!
Love this theme, been using it and adapting it to my setup since @tben originally posted it. Wanted to share a chip I added to my setup to display an Alarm state with a colored icon and State label. It’s two templates: one for the labels and colors of the alarm state (chips_alarm) and another for styling this into a chip with an icon next to the label (chips_ icon_label). I thought about keeping this as one template, but I think the icon and label template may be useful for other chip types too.
chips_ alarm
chips_alarm:
template:
- chips
- chips_icon_label
label: |
[[[
var alarm_label = 'unknown';
if (entity.state == 'armed_home'){
var alarm_label = 'Armed';
} else if(entity.state == 'disarmed'){
var alarm_label = 'Disarmed';
}
return alarm_label;
]]]
icon: |
[[[
var alarm_icon = 'mdi:shield-outline';
if (entity.state == 'armed_home'){
var alarm_icon = 'mdi:shield-lock';
} else if(entity.state == 'disarmed'){
var alarm_icon = 'mdi:shield';
}
return alarm_icon;
]]]
styles:
icon:
- color: |
[[[
var alarm_color = 'yellow';
if (entity.state == 'armed_home'){
var alarm_color = 'red';
} else if(entity.state == 'disarmed'){
var alarm_color = 'green';
}
return alarm_color;
]]]
chips_icon_label
chips_icon_label:
show_icon: true
show_name: false
show_label: true
size: 100%
styles:
card:
- box-shadow: var(--box-shadow)
- padding-top: 6px
- padding-button: 6px
- padding-left: 12px
- padding-right: 6px
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: max_content auto
- grid-template-rows: min-content
img_cell:
- place-self: center
- width: 14px
- height: 24px
label:
- justify-self: center
- font-weight: bold
- font-size: 12px
- margin-left: 0px
After adding these two templates, all you need to do is use the chips_alarm template and give it an entity in the alarm domain.
3 Likes
The error seems to suggest that lovelace can’t find the button-card custom element. Your posted code shows the resource for it is in the lovelace dashboard, but that’s not where it goes. It either goes in the resources part in the lovelace configuration menu (if using UI mode for lovelace) or in the configuration.yaml file (if using yaml mode for lovelace). Do you have a ui-lovelace.yaml file? If not, and you edit lovelace via UI or by going to raw editor in the UI, you should put it in the resources.
Also, I’m guessing from your resource url you didn’t install this through hacs, correct? You may want to check the url path, as after local you should go to the folder it’s in, so unless you have a community folder in your root, it won’t find it. If you did install via hacs, the url should be
/hacsfiles/button-card/button-card.js