Br3b
April 12, 2023, 2:12pm
4825
Hi there,
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(5, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
" sidebar . . . . . "
" sidebar home weiteres schlafzimmer badezimmer . "
" sidebar media wohnzimmer büro küche . "
" sidebar klima1 klima2 klima3 klima4 . "
" sidebar footer footer footer footer . "
D34DC3N73R
April 12, 2023, 6:18pm
4826
I noticed when I use repeat(4, 1fr) chrome dev tools shows an “invalid property” for grid-template.
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: 1.25fr repeat(4, 1fr) 0
grid-template-rows: 0 1fr 1fr 0.1fr
grid-template-areas: |
"sidebar . . . . ."
"sidebar family_room downstairs laundry living_room ."
"sidebar media upstairs cameras garage ."
"sidebar footer footer footer footer ."
But if I use 1fr 1fr 1fr 1fr I don’t get that error.
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr 0
grid-template-rows: 0 1fr 1fr 0.1fr
grid-template-areas: |
"sidebar . . . . ."
"sidebar family_room downstairs laundry living_room ."
"sidebar media upstairs cameras garage ."
"sidebar footer footer footer footer ."
I would try using fr units without repeat() for columns and rows and adapt from there.
Beautiful stuff! I’m taking my first dive into yaml dashboards trying to utilize your config. The first step I’m trying to do it change everything to english. I thought it would be as easy as replacing the words with the English translation(using SCS word replace function), however, everytime I do that it messes the whole dashboard up. Do you know what I’m missing? Thanks!
this looks wrong,
you have 5 rows in your template but only defined the size of 4
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
row 1 is height of 0
one of the last 2 lines in your template are wrong, remove the one that is not is use
" sidebar klima1 klima2 klima3 klima4 . "
" sidebar footer footer footer footer . "
1 Like
look in /button_card_templates/settings.yaml, I would start there.
settings:
variables:
entity_tablet: switch.galaxy_tab_a_screensaver
entity_browser_mod: media_player.browser_9c06ce87_d1cf313c
translate_unknown: Unknown
translate_idle: Idle
translate_home: Home
translate_not_home: Away
translate_available: Available
translate_no_updates: No Updates
translate_update_available: Update Available
translate_updates_available: Updates Available
Then I would look into css grid as that will need to be updated to English,
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar vardagsrum studio sovrum ."
"sidebar media övrigt hemma ."
"sidebar footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". vardagsrum sovrum ."
". studio övrigt ."
". media hemma ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(3, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . ."
"sidebar vardagsrum sovrum ."
"sidebar studio övrigt ."
"sidebar media hemma ."
"sidebar footer footer ."
"sidebar . . ."
#################################################
# #
# VARDAGSRUM #
# #
#################################################
- type: grid
title: Vardagsrum
view_layout:
grid-area: vardagsrum
columns: 2
cards:
- type: custom:button-card
entity: light.vardagsrum_group
name: Belysning
template:
- light
- icon_hue
- type: custom:button-card
entity: light.vardagsrum_horna
name: Hörnlampa
template:
- light
- icon_shade
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar living_room studio sovrum ."
"sidebar media övrigt hemma ."
"sidebar footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". living_room sovrum ."
". studio övrigt ."
". media hemma ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(3, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . ."
"sidebar living_room sovrum ."
"sidebar studio övrigt ."
"sidebar media hemma ."
"sidebar footer footer ."
"sidebar . . ."
#################################################
# #
# living room #
# #
#################################################
- type: grid
title: Living Room
view_layout:
grid-area: living_room
columns: 2
cards:
- type: custom:button-card
entity: light.vardagsrum_group
name: Belysning
template:
- light
- icon_hue
- type: custom:button-card
entity: light.vardagsrum_horna
name: Hörnlampa
template:
- light
- icon_shade
NOTE: title and the comment can have a space but grid-area must match with the value in the grid template and can not have spaces
VietNgoc
April 13, 2023, 11:41am
4830
https://imgur.com/a/7PXkARq
2 Likes
Thanks Mason. The translate settings was partly what I was missing.
Thanks so much for posting this. I am learning a ton as a get it working. One thing I’m having an issue with is the loader image. Did the file somehow not get downloaded, and if so, where can I find it/install it? Thanks!
maverik80
April 14, 2023, 5:56am
4834
hello guys I’ve been trying to solve this problem for quite a while, but with poor results. maybe someone you want can direct me on the right path… in practice I can’t fix the grid after I’ve increased the areas on the dashboard I am attaching the image and code, thanks a lot in advance to whoever will help me
button_card_templates: !include_dir_merge_named button_card_templates
kiosk_mode:
user_settings:
- users:
- home
hide_header: true
hide_sidebar: true
views:
- type: custom:grid-layout
title: Home
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(5, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . . ."
"sidebar soggiorno notte scene cucina ."
"sidebar media bagno casa sensori ."
"sidebar footer footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(6, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". soggiorno notte ."
". scene bagno ."
". sensori cucina ."
". media casa ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: (var(--custom-layout-card-padding)
grid-template-columns: 0 repeat(4, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar soggiorno notte cucina ."
"sidebar scene bagno sensori ."
"sidebar media casa . ."
"sidebar footer footer footer ."
cards:
#extra_styles fix, do not remove
#also warn if theme is not set
- type: custom:button-card
view_layout:
grid-area: 1 / 2 / 2 / 5
name: SET THEME TO "tablet" IN PROFILE
tap_action:
action: navigate
navigation_path: /profile
styles:
card:
- display: >
[[[
return hass.themes.theme === 'tablet'
? 'none'
: 'initial';
]]]
name:
- z-index: 1
- overflow: visible
- color: red
- font-weight: bolder
- font-size: xxx-large
- background: yellow
xADDRx
April 14, 2023, 7:44am
4835
Hi Guys,
I need your help please. I can’t even get started with this error message.
Can someone give me a tip here?
untested but might work, you should look at this link for details CSS Grid Layout
look at @Laffer code, you can find it via his profile, he has added a column
button_card_templates: !include_dir_merge_named button_card_templates
kiosk_mode:
user_settings:
- users:
- home
hide_header: true
hide_sidebar: true
views:
- type: custom:grid-layout
title: Home
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(5, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . . ."
"sidebar soggiorno notte scene cucina ."
"sidebar media bagno casa sensori ."
"sidebar footer footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(6, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". soggiorno notte ."
". scene bagno ."
". sensori cucina ."
". media casa ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: (var(--custom-layout-card-padding)
grid-template-columns: 0 repeat(3, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar soggiorno notte cucina ."
"sidebar scene bagno sensori ."
"sidebar media casa . ."
"sidebar footer footer footer ."
cards:
#extra_styles fix, do not remove
#also warn if theme is not set
- type: custom:button-card
view_layout:
grid-area: 1 / 2 / 2 / 5
name: SET THEME TO "tablet" IN PROFILE
tap_action:
action: navigate
navigation_path: /profile
styles:
card:
- display: >
[[[
return hass.themes.theme === 'tablet'
? 'none'
: 'initial';
]]]
name:
- z-index: 1
- overflow: visible
- color: red
- font-weight: bolder
- font-size: xxx-large
- background: yellow
I don’t think your issue is related to anything from @Mattias_Persson , it looks like the template is media_card_speaker I don’t know what that is.
The card looks to be a decluttering-card, that is also new to me
chezpaul2
April 14, 2023, 5:35pm
4839
I give up. This is what I got on my Galaxy tablet running Fully kiosk. After the update, I made the 2023.4 changes and the dashboard loads fine on my browsers after clearing the caches but it just won’t load on my tablet. I couldn’t find a clear cache option but they allow to clear cache after reload which I selected but it just won’t do the trick. Would anyone have any other thoughts?
Clear Cache (app) will solve the issue
chezpaul2
April 14, 2023, 9:31pm
4841
Yes I know… but how do you clear cache on Fully Kiosk browser. I don’t see it no where and it’s not on their web site either…Thanks
My bad, did not read your text. Im not running fully kiosk atm so wont be able to help out. Sorry!
1 Like
CDRX2
April 15, 2023, 1:13am
4843
The clear cache option in Fully Kiosk can be found in the Privacy Check option of the main menu.
chezpaul2
April 15, 2023, 2:09am
4844
Found it.
I had done it before but for some reason it worked this time. Pfiou. Thanks
1 Like
