This “AirCondition Card” could be helpful: Custom-cards list - UI-Lovelace-Minimalist
But you would have to customize it (look here: Changing template - UI-Lovelace-Minimalist
I’m afraid this has already been asked before but I could not find it in the thread.
How can i make the display of the chip conditional?
And two additional questions:
- And is there any best practice for getting a nice desktop view (meaning one horizontal stack is really on row) other than using grid layout?
- how to format the temperature chip in a way that if the temp is below zero the temp-string will be displayed “blue”?
1 Like
Look for some inspirations here: https://github.com/CM000n/homeassistant/blob/d2463560bd7519f84190f9cdb6532415a77d4a10/lovelace-minimalist.yaml
2 Likes
thanks - ok so will have to use the grid-layout.
Hello!
I’m struggling with how to place the chips.
I’m currently have a number of chips (5 or 6), and I’m placing them with a horizontal-stack, but of course, it is only placing them in one row.
Do you know guys a way of placing the chips as in the example here? 
Thanks!
2 Likes
this could be interesting: GitHub - bramkragten/swipe-card: Card that allows you to swipe throught multiple cards for Home Assistant Lovelace
and here (another method): Lovelace: Swiper card
For layouting grids: https://grid.layoutit.com
Look for some inspirations here: homeassistant/lovelace-minimalist.yaml at d2463560bd7519f84190f9cdb6532415a77d4a10 · CM000n/homeassistant · GitHub
Well, I was checking at the config that you sent me, and it seems that they are not using the layout that I was mentioning, and the Slider card is not working as expected.
I’ll have to go through a different path i guess.
Thanks!
Start with a vertical stack
Then add one horizontal stack per row =]
I’m trying to figure out how to use a conditional card in order to only show buttons when they are needed. But i always get an error. Would be happy if anyone can help.
error:
code:
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: conditional
conditions:
- entity: switch.eg_kuche_steckdose_spulnische_rechts_espressomaschine
state: 'on'
card:
type: 'custom:button-card'
template: card_power_outlet
variables:
ulm_card_power_outlet_consumption_sensor: sensor.tagesstromverbrauch_espressomaschine
entity: group.espresso
name: Espressomaschine
- type: custom:button-card
template: edge
Flave
‘card:’ Should be on the same vertical line as ‘conditions:’. Otherwise it thinks your are adding the card as a condition.
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: conditional
conditions:
- entity: switch.eg_kuche_steckdose_spulnische_rechts_espressomaschine
state: 'on'
card:
type: 'custom:button-card'
template: card_power_outlet
variables:
ulm_card_power_outlet_consumption_sensor: sensor.tagesstromverbrauch_espressomaschine
entity: group.espresso
name: Espressomaschine
- type: custom:button-card
template: edge
2 Likes
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