It is hard not to give up!
I have not been able to get this to work the way I want it.
I have a dashboard for the navigation, with the code below. That’s the one I want to have loaded on the left of all other dashboards. So I can make changes to the navigation in one spot, and have included in all others.
This is my code for the navigation pane
views:
- title: Home
theme: Caule Black Orange
type: custom:masonry-layout
badges: []
cards:
- type: grid
cards:
- type: custom:simple-clock-card
use_military: true
hide_seconds: false
font_size: 8rem
padding_size: 40px
- type: custom:weather-card
entity: weather.home_austin
number_of_forecasts: '6'
details: true
forecast: true
hourly_forecast: false
- type: markdown
content: >-
<li>
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good Morning{{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good Day{{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening{{'\U0001F44B\U0001F3FB'}}{% endif %} {{user}}
</li>
The **Markdown** card allows you to write any text. You can style
it **bold**, *italicized*, ~strikethrough~ etc. You can do images,
links, and more.
For more information see the [Markdown
Cheatsheet](https://commonmark.org/help).
I will be putting a summary here which is noteworthy, like any
lights on when no presence detected, etc...
- type: grid
cards:
- type: button
tap_action:
action: navigate
navigation_path: /home-controls/0
icon: mdi:home-outline
hold_action:
action: none
name: HOUSE
- type: button
tap_action:
action: toggle
icon: mdi:car-multiple
name: GALLERY
- type: button
tap_action:
action: toggle
name: GUEST-HOUSE
icon: mdi:home-account
- type: button
tap_action:
action: toggle
name: POOL
icon: mdi:pool
- type: button
tap_action:
action: toggle
name: GARAGE
icon: mdi:garage
- type: button
tap_action:
action: toggle
icon: mdi:train-car
name: CAR PORT
- type: button
tap_action:
action: toggle
name: FRONTYARD
icon: mdi:leaf
- type: button
tap_action:
action: toggle
name: BACKYARD
icon: mdi:leaf
square: true
columns: 4
- type: markdown
content: >-
The **Markdown** card allows you to write any text. You can style
it **bold**, *italicized*, ~strikethrough~ etc. You can do images,
links, and more.
For more information see the [Markdown
Cheatsheet](https://commonmark.org/help).
- type: grid
cards:
- type: button
tap_action:
action: navigate
navigation_path: ''
icon: mdi:lightbulb
show_state: true
- type: button
tap_action:
action: navigate
navigation_path: ''
icon: mdi:motion-sensor
show_state: true
- type: button
tap_action:
action: navigate
navigation_path: ''
icon: mdi:dip-switch
show_state: true
- type: button
tap_action:
action: navigate
navigation_path: ''
show_name: false
show_state: true
- type: button
tap_action:
action: navigate
navigation_path: ''
icon: mdi:view-carousel
- type: button
tap_action:
action: navigate
navigation_path: ''
icon: mdi:table-settings
- type: custom:fullscreen-card
columns: 1
square: false
I tested the navigation and I am now able to click on a button in the navigation dashboard, and it will take me to another dashboard. So far so good.
Here is another dashboard, blank.
views:
- title: Home
icon: mdi:home-outline
theme: Caule Black Orange
layout:
max_cols: 2
visible:
- user: xxxxxxxxxxxxxxxxxxxxxxxxxxxx
- user: xxxxxxxxxxxxxxxxxxxxxxxxxxxx
type: custom:grid-layout
badges: []
cards: []
title: Home Controls
My first question is how do I now include the navigation dashboard in this one. That’s my fist step, so I know I can load a dashboard into another one. The include is not working, unless I am putting it in the wrong spot in the above code, or with the wrong indentation.
Any pointers on this one?
I have been looking at the custom layout-card and from what I have read, it may work. I have read and read the threads on the community and the GitHub details, but I am not sure where to start. Nothing I tried worked for me so far.
@thomasloven has done a great job including the CSS, but I am not able to integrate into a new blank dashboard. I am not well versed in all of this, so it has been a steep learning experience. I can do the UI stuff, but when it comes to the pure coding, I can manage if I know where to go.
The github example on the card page seems to be what I want. The CSS looks like it is defining areas (main, side, footer, etc) where we can place cards. It is exactly what I am looking for. Just don’t know how to do it. I like the media query too so I can make changes depending on the display, so I can make it responsive. But again, can’t get it to work.
I am now at the point of just wanting to get someone’s template working which I can modify. A 2-pane responsive dashboard, with the left pane being an include of another dashboard. I don’t need any fancy CSS other than the grid design. I will play with colors when I have a good handle on the default one first.
I use the app on my phone, and will have a few tablets around the house. Don’t need to make it pretty for every hardware out there. And for the tablets, will most likely use kiosk. I have been reading a bit about that. To hide all side and top navigation and just have a full screen view of the dashboard only.
This may be complex for a newbie, but I have gotten here so far. All my hardware is running, I have the automation, entities, etc. I am just stuck at the end to make this look like a nice dashboard with an easy navigation. I am really stuck.
