Can someone explain me how I can get a second ui-minimalist theme to work?
I want a second one for my tablet dashboard in the hallway.
1 Like
This page should provide you with the basic instructions to create a second dashboard: Customizing - UI Lovelace Minimalist
Hello,
Very nice!
Can you share your code please 
āāā
Sorry to bother you again. but after putting the three include yaml files they all appear in top of each other. Donāt know that is that Iām doing wrong. I have removed the body of the three include file and only left the tile of each include file. This is what I get:
. I cant get them to display properly. Thank you for your time and help.
Hey!
try to check the grid area column if is correct
type: vertical-stack
view_layout:
grid-area: column1
When configuring the Popup iām referring to column1, 2 and 3 and the code above is mandatary or you get something similar to your error.
Based on my experience the error you got is because of layout order in the grid area
BR
Hey,
The layout of that card was customized by me, itās a simple vertical layout of buttons and helpers.
For the announce message I took inspiration from this topic.
Iāve tailored the configuration for my needs. Anyway is very simple 
BR
Thanks mate 
What are other peopleās tablet layout?
This is what I got, but Iām not super happy with it
Hey!
Can you be so kind to share the code for this card?
BR
Nik
I added arming and vacation states to the header text. Previously, it would just display ādisarmedā while arming or on vacation mode. Updated template code is below.
---
custom_alarm:
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:
- "icon_info"
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
tap_action:
action: more-info
label: '[[[ return states[variables.ulm_custom_alarm_grid_state].state ]]]'
styles:
card:
- background-color: 'rgba(0,0,0,0)'
state:
- value: 'disarmed'
label: 'Disarmed'
icon: "mdi:shield-off"
styles:
icon:
- color: 'rgba(var(--color-green), 1)'
img_cell:
- background-color: 'rgba(var(--color-green-bg), 1.0)'
- value: 'armed_away'
label: 'Armed'
icon: "mdi:shield-lock"
styles:
icon:
- color: 'rgba(var(--color-red), 1)'
img_cell:
- background-color: 'rgba(var(--color-red-bg), 1.0)'
- value: 'armed_vacation'
label: 'Vacation'
icon: "mdi:shield-airplane"
styles:
icon:
- color: 'rgba(var(--color-purple), 1)'
img_cell:
- background-color: 'rgba(var(--color-purple-bg), 1.0)'
- value: 'arming'
label: 'Arming'
icon: "mdi:shield"
styles:
icon:
- color: 'rgba(var(--color-yellow), 1)'
img_cell:
- background-color: 'rgba(var(--color-yellow-bg), 1.0)'
- value: 'armed_home'
label: 'Home'
icon: "mdi:shield-home"
styles:
icon:
- color: 'rgba(var(--color-green), 1)'
img_cell:
- background-color: 'rgba(var(--color-green-bg), 1.0)'
item2:
card:
type: custom:button-card
template: custom_alarm_state_grid_item_list
custom_fields:
disarm:
card:
type: custom:button-card
icon: mdi:shield-off
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'disarmed'
icon: "mdi:shield-off"
styles:
icon:
- color: 'var(--google-green)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: 'var(--border-radius-bar)'
tap_action:
action: call-service
service: alarm_control_panel.alarm_disarm
service_data:
entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
haptic: success
away:
card:
type: custom:button-card
icon: mdi:shield-lock
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_away'
icon: "mdi:shield-lock"
styles:
icon:
- color: 'var(--google-red)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '14px'
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_away
service_data:
entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
haptic: success
home:
card:
type: custom:button-card
icon: mdi:shield-home
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_home'
icon: "mdi:shield-home"
styles:
icon:
- color: 'var(--google-green)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '14px'
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_home
service_data:
entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
haptic: success
custom_alarm_state_grid_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 'var(--border-radius-bar)'
- pointer-events: none
- background-color: 'rgba(var(--color-theme), 0.05)'
- justify-items: center
grid:
- grid-template-areas: "'disarm away home'"
- grid-template-columns: "1fr 1fr 1fr"
- grid-template-rows: "min-content"
- column-gap: 9px
- justify-items: center
img_cell:
- justify-items: center
custom_alarm_state_grid_job_state_item_list_items:
show_icon: true
show_name: false
size: 24px
tap_action:
action: none
styles:
card:
- box-shadow: none
- padding: 2px
- border-radius: 'var(--border-radius)'
- place-self: center
- height: 40px
- width: 80px
- pointer-events: auto
- background-color: transparent
grid:
- grid-template-areas: '"i"'
icon:
- color: var(--google-grey)
UPDATE: I stepped away from it and came back, then realized that the issue was in my use of the variables within the custom card. Issue is resolved.
Iām trying to put together a card for waste collection but canāt get it working. The card isnāt displaying at all. In Chrome Developer tools, hereās the error that I see:
ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'attributes') in 'var label;
const dateToday = new Date();
var dateCardboard = new Date();
if (variables.entit...'
at Je.eval (eval at _evalTemplate (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9295), <anonymous>:8:44)
at Je._evalTemplate (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9379)
at Je._getTemplateOrValue (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9964)
at :8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9857
at Array.forEach (<anonymous>)
at Je._getTemplateOrValue (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9834)
at Je._objectEvalTemplate (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:425:9673)
at :8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:433:360
at Array.forEach (<anonymous>)
at Je._buildCustomFields (:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:433:292)
Hereās what I have in my dashboard:
- type: custom:button-card
template: custom_card_tj335_garbage_schedule
variables:
entity_cardboard:
entity: "sensor.cardboard_collection"
icon: "mdi:trash-can-outline"
icon_color: "blue"
name: "Cardboard"
bg_color: "blue"
Hereās my custom card:
---
custom_card_tj335_garbage_schedule:
show_icon: false
show_name: false
show_label: false
styles:
card:
- border-radius: "20px"
- box-shadow: "var(--box-shadow)"
- padding: "0px"
grid:
- grid-template-areas: "'item1'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content"
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- "icon_info"
- "custom_card_tj335_garbage_item"
entity: "[[[ return variables.entity_cardboard.entity ]]]"
icon: "[[[ return variables.entity_cardboard.icon ]]]"
name: "[[[ return variables.entity_cardboard.name ]]]"
variables:
color_icon: "[[[ return variables.entity_cardboard.icon_color ]]]"
color_bg: "[[[ return variables.entity_cardboard.bg_color ]]]"
label: >
[[[
var label;
const dateToday = new Date();
var dateCardboard = new Date();
if (variables.entity_cardboard) {
if (states[variables.entity_cardboard].attributes.days == '0') {
label = 'Today';
} else if (states[variables.entity_cardboard].attributes.days == '1') {
label = 'Tomorrow';
} else {
label = states[variables.entity_cardboard].attributes.days + ' days';
}
dateCardboard.setDate(dateToday.getDate() + Number(states[variables.entity_cardboard].attributes.days));
return label + ' - ' + dateCardboard.toLocaleDateString('en-US', { weekday: 'long' }) + ', ' + dateCardboard.toLocaleDateString('en-US', { month: 'short' }) + ' ' + dateCardboard.toLocaleDateString('en-US', { day: '2-digit' });
} else {
return 'Not Available';
}
]]]
styles:
card:
- padding: "12px"
custom_card_tj335_garbage_item:
styles:
icon:
- color: >
[[[
var color = [variables.color_icon];
if(color == "yellow"){
var color = "rgba(var(--color-yellow),1)";
} else if(color == "blue"){
var color = "rgba(var(--color-blue),1)";
} else if(color == "purple"){
var color = "rgba(var(--color-purple),1)";
} else if(color == "green"){
var color = "rgba(var(--color-green),1)";
} else if(color == "red"){
var color = "rgba(var(--color-red),1)";
} else {
var color = "rgba(var(--color-theme),0.20)";
}
return color;
]]]
label:
- font-weight: "bold"
- font-size: "1.0em"
state:
- styles:
operator: template
Confirmed I have the same issue and getting the same error
It is this card
1 Like
Works fine for me, but I canāt seem to find the updated template code that is referenced in the documentation. Just the original one.
Have uploaded all my files here:
I havenāt uploaded custom cards available from the Minimalist repository, only cards I have made myself. Have also added the theme file I use. Iām sure there is stuff missing but hopefully gives everyone a good idea of how its set up. Still much to clean up though!
Everything hangs off ui-lovelace.yaml so start there
9 Likes
Sweet man thanks, have nothing to do at work anyway 
You guys know if there is a way to use different color thresholds for the graph-card?
- type: 'custom:button-card'
template: card_graph
variables:
ulm_card_graph_color: "var(--google-blue)"
ulm_card_graph_name: Temperature
ulm_card_graph_entity: sensor.temperature
ulm_card_graph_type: fill
ulm_card_graph_hours: 24
color_thresholds:
- value: 0
color: "#ff0000"
- value: 12
color: "#ffff00"
- value: 18
color: "#00ff00"
- value: 25
color: "#0000ff"
Just so you knowā¦ the above does not work. It s just my wish that it would work.
1 Like
I think the original card_graph does indeed not support different colors, but perhaps custom_card_damix48_power_details can help you out? You may need to edit the template code a bit to your liking though.
1 Like
That worked
1 Like
Hello,
I love your dashboard. Iām trying to set it up for me.
on the other hand, what is ālovelace/custom_header/custom_header2.yamlā in ui-lovelace.yaml?
Thanks