Sorry for abandoning this thread, installation instructions as follows:
Install button-card and layout-card either manually or through HACS and set your dashboard to YAML mode
For ease of navigation I link my YAML file to a directory of YAML files, one for each page, in a folder called views. Each button comes from a template in a folder called cards. So your main YAML file should look like this:
button_card_templates: !include_dir_merge_named cards/
title: Your Home Title
background: center / cover no-repeat fixed url('https://img.wallpapersafari.com/desktop/1920/1080/17/26/i2OY8K.jpg')
# replace with your own wallpaper URL as desired
views: !include_dir_list views/
From here, make your cards and views folders and then copy in the files from ha-themes/ios16theme at main · aegjoyce/ha-themes · GitHub to get started.
I’ve included a template for the Home panel and an example Living Room panel in this repository. You shouldn’t need to make changes to any of the card templates apart from navigate_home.yaml (change navigation_path to the url of your home panel) and area.yaml (change navigation_path to [[[ return "/[your dashboard name]/" + variables.path ]]])
Let’s look at the structure of each page:
title: Title
path: home
panel: true
visible: true
cards:
- type: vertical-stack
cards:
## TITLE ##
- type: 'custom:button-card'
template: navigate_home
tap_action:
action: none
hold_action:
action: none
show_name: false
show_icon: false
- type: 'custom:button-card'
name: Title
template: title
## SUMMARY BUTTONS ##
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fill, 120px)
grid-template-rows: repeat(auto-fill, 45px)
grid-gap: 10px
cards:
- entity: group.all_lights
type: 'custom:button-card'
template: group_summary
name: Lights
variables:
icon_color: gold
- entity: group.all_switches
type: 'custom:button-card'
template: group_summary
name: Switches
variables:
icon_color: lightgreen
- entity: group.all_media_players
type: 'custom:button-card'
template: group_summary
name: Media
variables:
status_text: Playing
filter_value: playing
- entity: group.all_water
type: 'custom:button-card'
template: group_summary
name: Water
variables:
icon_color: cornflowerblue
- entity: group.all_climate
type: 'custom:button-card'
template: group_summary
name: Climate
variables:
icon_color: paleturquoise
climate: true
- entity: group.all_persons
type: 'custom:button-card'
template: group_summary
name: People
variables:
icon_color: white
status_text: 'Home'
filter_value: 'home'
if_none: 'All Away'
## SECURITY ##
- type: 'custom:button-card'
name: Security
template: subtitle
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fill, 180px)
grid-template-rows: repeat(auto-fill, 130px)
grid-gap: 10px
cards:
- entity: alarm_control_panel.yale_smart_alarm
name: Alarm
type: 'custom:button-card'
template: alarm
- entity: camera.front_garden_camera
type: 'custom:button-card'
template: camera
- entity: camera.back_garden_camera
type: 'custom:button-card'
template: camera
- entity: camera.3d_printer_camera
type: 'custom:button-card'
template: camera
variables:
zoom: 140%
## AREAS ##
- type: 'custom:button-card'
name: Areas
template: subtitle
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fill, 180px)
grid-template-rows: repeat(auto-fill, 60px)
grid-gap: 10px
cards:
- type: 'custom:button-card'
template: area
name: Living Room
icon: mdi:sofa
variables:
path: living_room
- type: 'custom:button-card'
template: area
name: Kitchen
icon: mdi:silverware
variables:
path: kitchen
- type: 'custom:button-card'
template: area
name: Hall
icon: mdi:stairs
variables:
path: hall
- type: 'custom:button-card'
template: area
name: Bedroom
icon: mdi:bed-king-outline
variables:
path: bedroom
- type: 'custom:button-card'
template: area
name: Ensuite
icon: mdi:shower-head
variables:
path: ensuite
- type: 'custom:button-card'
template: area
name: Guest Bedroom
icon: mdi:bed-queen-outline
variables:
path: guest_bedroom
- type: 'custom:button-card'
template: area
name: Study
icon: mdi:desk
variables:
path: study
- type: 'custom:button-card'
template: area
name: Loft
icon: mdi:home-roof
variables:
path: loft
- type: 'custom:button-card'
template: area
name: Greenhouse
icon: mdi:greenhouse
variables:
path: greenhouse
- type: 'custom:button-card'
template: area
name: Outdoor
icon: mdi:flower
variables:
path: outdoor
## OTHER ##
- type: 'custom:button-card'
name: Other
template: subtitle
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fill, 180px)
grid-template-rows: repeat(auto-fill, 60px)
grid-gap: 10px
cards:
- type: 'custom:button-card'
template: area
name: Tasks
icon: mdi:clipboard-check-outline
variables:
path: tasks
- type: 'custom:button-card'
template: area
name: Settings
icon: mdi:cog
variables:
path: settings
## PADDING ##
- type: 'custom:button-card'
template: navigate_home
tap_action:
action: none
hold_action:
action: none
show_name: false
show_icon: false
Change titles and entity ids as desired. Move sections around as required but pay attention to indentation to avoid breaking things. Keep the padding section at the bottom to prevent buttons overlapping the bottom of the wallpaper. Change card templates as needed to find the one you need.
If all of this is totally alien to you I would brush up on YAML dashboards and look into how button-card works - there’s plenty of information available on the forum and externally. Happy to help with smaller technical issues on this thread. Good luck!