Great results 
How did you create the Solar Panel card?
And could you share your tapbar? My one is always too bigā¦ If you like, you could also share your colors
Try grid-template-rows: auto, or play with this line as this is the issue I think. No issue for me using CM000nās solution.
thanks, Iāve tried every combination of grid-template-columns and grid-template-rows but it seems that it is something related to the grid-template-areas. as soon as i repeat an area name, things go wonky. for example, this is replacing some areas with . This is the code (excuse all the comment lines as i was trying everything i could think of):
grid-gap: 2px 2px
grid-template-columns: 1fr 1fr 1fr;
# grid-template-rows: 1fr 1fr 1fr;
# grid-template-columns: 33% 33% 33%
grid-template-rows: auto
# grid-template-columns: 33% 33% 33%;
# grid-template-rows: 33% 33% 33%;
# grid-template-columns: minmax(150px, 300px) minmax(150px, 300px) minmax(150px, 300px);
# grid-template-rows: minmax(100px, 200px) minmax(100px, 200px) minmax(100px, 200px);
grid-template-areas: |
" office . kitchen "
" bath closet . "
" living . dining "
and this is the result
Ok, so then i modify to span the column with this code (i just did office and not others):
grid-gap: 2px 2px
grid-template-columns: 1fr 1fr 1fr;
# grid-template-rows: 1fr 1fr 1fr;
# grid-template-columns: 33% 33% 33%
grid-template-rows: auto
# grid-template-columns: 33% 33% 33%;
# grid-template-rows: 33% 33% 33%;
# grid-template-columns: minmax(150px, 300px) minmax(150px, 300px) minmax(150px, 300px);
# grid-template-rows: minmax(100px, 200px) minmax(100px, 200px) minmax(100px, 200px);
grid-template-areas: |
" office office kitchen "
" bath closet . "
" living . dining "
and this is the result. the office block does span, but also expands the row. very strange. I must be missing one little thing to make them span correctly.
Iām also getting some weird stuff with the room cards being all different sizes.
Iām definitely no expert LOL! But the room card will force the aspect ratio
looking at the template code
aspect_ratio: "1/1"
so when ever you try to span it leads it being huge. You could try taking it out.
1 Like
And thank you!!! Because seeing your code, I finally had an example that showed me that I was nesting mine.
Finally, needs some fixing, but it spans as it should
type: custom:grid-layout
title: "Home"
path: "home"
layout:
#default
grid-gap: 1px 1px
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: auto
justify-items: left
grid-template-areas: |
" welcome welcome welcome welcome welcome welcome "
" . devices1 devices2 devices3 . . "
" person1 person2 . . . . "
" nav1 nav2 nav3 nav4 nav5 nav6 "
" nav7 nav8 nav9 . . . "
" list1 list2 list3 . . . "
" ble . . . . . "
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: 1px 1px
grid-template-columns: 1fr 1fr
grid-template-rows: auto
grid-template-areas: |
" welcome welcome "
" devices1 devices2 "
" devices3 devices3 "
" person1 person2 "
" nav1 nav2 "
" nav3 nav4 "
" nav5 nav6 "
" nav7 nav8 "
" nav9 . "
" list1 list1 "
" list2 list2 "
" list3 list3 "
" ble ble "
cards:
- type: "custom:button-card"
template: "card_esh_welcome"
triggers_update: "input_boolean.minimalist_dropdown"
variables:
ulm_card_esh_welcome_collapse: input_boolean.minimalist_dropdown
ulm_weather: "weather.mascot"
entity_1:
nav: "boolean"
icon: "mdi:gesture-tap-button"
name: "Boolean"
color: "blue"
entity_2:
nav: "media"
icon: "mdi:television-classic"
name: "Media"
color: "yellow"
entity_3:
nav: "network"
icon: "mdi:network"
name: Network Stats
color: "green"
entity_4:
nav: "workloads"
icon: "mdi:nas"
name: "Workloads"
color: "purple"
entity_5:
nav: "printer"
icon: "mdi:printer-3d-nozzle"
name: Printer
color: "red"
view_layout:
grid-column: welcome
If it helps someone
EDIT
But of course! My tablet is doing thisā¦ because screw you if you thought it was just going to work buddy!! 
1 Like
thatās definitively itā¦ exceptā¦ they are using that aspect ratio to control all the icons so it gets distorted when you modify it. guess i am going to have to make my own cards spanning two columns. It took me some time to figure out this layout and i think the cards are all based on grid as well, so it should not be as difficult (i hope)
Is it possible to activate a dynamic scene in the welcome card? I canāt seem to get it to work and pass the additional service_data (dynamic: true) through.
Also is there a way to use button entities? Or are only input_booleans supported?
Since this is a requirement:
button_card_templates: !include_dir_merge_named "custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
where do we put other button card templates (ex. ones that have nothing to do with UI Minimalist)?
I could create my own yaml file and store in it in a custom subdirectory in the folder above (ex. custom_components/ui_lovelace_minimalist/ui_minimalist/ulm_templates/personal/my_template1.yaml). Just dont know if thatās the recommendation.
Ideally weād be able to so something like this but it didnāt work:
button_card_templates ui: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
button_card_templates personal: !include "my_templates.yaml"
Put them in config/ui_lovelace_minimalist/custom_cards.
You can put there every template you want and it gets loaded in with that one required line.
Itās not adviced to alter things in the custom_components directory.
Edit: you can also add a yaml file in the custom_cards folder where you include all your other button_card_templates.
1 Like
Could you share your code, please?
Will be putting it up on GitHub this week. Wonāt be complete, but good enough to share.
I will warn you though, the code isnāt polished, Iām sure there will be many ways to make it more efficient 
3 Likes
Thanks. I am also new here and I try to inspire from other dashboards. Mine isnāt polished enough as yours and I bet over time - we would make it efficient.
Hi guys,
I would like to modify the ācustom_card_homeassistant_updatesā so that it disappears from the dashboard if no updates are available. Is it possible to have a card conditionally appearing?
Ok, hope this helps someone in the future
but using % fixed my issue of inconstant sizes, turning this:
Into this
Code
type: custom:grid-layout
title: "Home"
path: "home"
layout:
#default
grid-gap: 1px 1px
grid-template-columns: 16% 16% 16% 16% 16% 16%
grid-template-rows: auto
justify-items: "left"
grid-template-areas: |
" clock clock welcome welcome welcome welcome "
" devices1 devices2 devices3 person1 person2 . "
" nav1 nav2 nav3 nav4 nav5 nav6 "
" nav7 nav8 nav9 . . . "
" list1 list1 list2 list2 list3 list3 "
" ble . . . . . "
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: 1px 1px
grid-template-columns: 1fr 1fr
grid-template-rows: auto
grid-template-areas: |
" welcome welcome "
" devices1 devices2 "
" devices3 devices3 "
" person1 person2 "
" nav1 nav2 "
" nav3 nav4 "
" nav5 nav6 "
" nav7 nav8 "
" nav9 . "
" list1 list1 "
" list2 list2 "
" list3 list3 "
" ble ble "
" clock clock "
6 Likes
Hi All and special thanks to all the people that did cards for this Minimalist design as well as custom cards!
This is what I ended up with
This community is great!
BR
Nik
15 Likes
Nice man & can you share you code ?
which part do you want me to share?
I like your whole dashboard how it works & certainly the shared of popup shared I would like to have the code of & also the clock card I would like the code & of the whole dashboard is also allowed?
Hi,
Iām still ending come code cleaning (itās full of drafts etc) but i can share something
Clock Card (The input_boolean.menu_tablet is need to switch the 5 main icons on the Top), you can comment it:
- type: custom:button-card #Time
entity: sensor.time
layout: vertical
show_icon: false
show_name: false
show_state: true
show_label: true
label: "[[[ return states['sensor.pretty_date'].state; ]]]"
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.menu_tablet
styles:
card:
- background-color: transparent
- height: 100px
- box-shadow: none
state:
# - padding-top: 10%
- font-size: 290%
- font-weight: bold
- justify-self: center
label:
- justify-self: center
- font-size: 110%
this is the template code for the Label sensor:
- platform: template
sensors:
pretty_date:
friendly_name: Data di oggi
value_template: >-
{% set today = states("sensor.date") %}
{% set arr_week_days = ["Domenica", "LunedƬ", "MartedƬ", "MercoledƬ", "GiovedƬ", "VenerdƬ", "Sabato"] %}
{% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %}
{% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
{% set day = as_timestamp(today) | timestamp_custom('%d') %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
{% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
{{ arr_week_days[week_day] }}, {{ day }} {{ arr_months[month-1] }} {{ year }}
This is the code for the FirstFloor room card:
type: 'custom:button-card'
view_layout:
grid-area: firstfloor
template:
- card_room
- blue_no_state
name: Primo Piano
entity: sensor.1p_temperature_round
icon: mdi:sofa
label: |
[[[
var temp = states['sensor.1p_temperature_round'].state;
var humi = states['sensor.1p_humidity'].state;
return 'š”ļø' + " " + temp + 'Ā°C' + " " + 'š§' + " " + humi + '%';
]]]
tap_action:
!include popup/first_popup.yaml
variables:
label_use_temperature: false
label_use_brightness: false
entity_1:
entity_id: light.luci_1p
templates:
- yellow_on
tap_action:
action: none
entity_2:
entity_id: sensor.aqara_tvoc_soggiorno_level
icon: mdi:air-filter
templates:
- green_no_state
tap_action:
action: more-info
entity_3:
entity_id: climate.1p
templates:
- red_on
tap_action:
action: more-info
entity_4:
entity_id: climate.1p_air_conditioner
templates:
- blue_on_cool
tap_action:
action: more-info
entity_4_icon: mdi:air-conditioner
Popup for first floor:
action: fire-dom-event
browser_mod:
command: popup
title: 1P Recap
style:
!include /config/dashboards/template/popup_layout_template.yaml
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
!include /config/dashboards/template/popup_layout_setup.yaml
cards:
- !include /config/dashboards/1p/column1.yaml
- !include /config/dashboards/1p/column2.yaml
- !include /config/dashboards/1p/column3.yaml
Columns are just a vertical-stack with the entities you need. This is Colum2 for es
type: vertical-stack
view_layout:
grid-area: column2
cards:
- type: 'custom:button-card'
template: card_title
name: "Luci"
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_light
entity: light.faretti_cucina
variables:
ulm_card_light_enable_slider: true
ulm_card_light_enable_collapse: true
ulm_card_light_enable_color: true
ulm_card_light_name: Faretti
hold_action:
action: more-info
entity: group.faretti_cucina
- type: "custom:button-card"
template: card_light
entity: light.shelly_cucina
variables:
ulm_card_light_enable_color: true
ulm_card_light_name: Cucina
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_light
entity: light.ikea_fungo
variables:
ulm_card_light_enable_slider: true
ulm_card_light_enable_collapse: true
ulm_card_light_enable_color: true
ulm_card_light_name: Fungo
hold_action:
action: more-info
- type: "custom:button-card"
template: card_light
entity: light.shelly_soggiorno
variables:
ulm_card_light_enable_color: true
ulm_card_light_name: Divano
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_light
entity: light.shelly_bagno_pt
variables:
ulm_card_light_enable_color: true
ulm_card_light_name: Bagno
- type: "custom:button-card"
template: card_light
entity: light.shelly_lavanderia
variables:
ulm_card_light_enable_color: true
ulm_card_light_name: Lavanderia
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_light
entity: light.shelly_scala
variables:
ulm_card_light_enable_color: true
ulm_card_light_name: Scala
- type: "custom:button-card"
template: card_light
entity: light.shelly_antebagno
variables:
ulm_card_light_enable_color: true
ulm_card_light_name: Antebagno
- type: 'custom:button-card'
template: card_graph
variables:
ulm_card_graph_color: "var(--google-green)"
ulm_card_graph_name: Tvoc
ulm_card_graph_entity: sensor.aqara_tvoc_soggiorno_level
ulm_card_graph_type: fill
ulm_card_graph_hours: 48
BR
Nik
7 Likes