I have been playing with this (and looking through post) my head is not flat from banging against the wall. How can I make the slider go across the whole page?
I have the “foot foot” set but not matter what I have tried it will not slide across under the main section.
views:
- title: TabletHome
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: '-6px -6px'
grid-gap: '-10px -20px'
grid-template-rows: 78% 12%
grid-template-columns: 35% 65%
grid-template-areas: '"side main" "foot foot"'
cards:
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:clock-weather-card
entity: weather.openweatherdaily
title: null
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_days: 7
locale: en-US
time_format: 12
date_pattern: DDDD
hide_today_section: false
hide_forecast_section: false
hide_clock: false
hide_date: false
hourly_forecast: false
use_browser_time: true
view_layout:
grid:area: side
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:clock-weather-card
entity: weather.openweatherdaily
title: null
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_days: 7
locale: en-US
time_format: 12
date_pattern: DDDD
hide_today_section: false
hide_forecast_section: false
hide_clock: false
hide_date: false
hourly_forecast: false
use_browser_time: true
view_layout:
grid:area: main
- type: custom:layout-card
layout_type: custom:horizontal-layout
layout: {}
cards:
- type: custom:swipe-card
card_width: 160px
start_card: 5
parameters:
effect: cover slide
grabCursor: true
centeredSlides: true
slidesPerView: auto
cards:
- type: custom:mushroom-template-card
entity: []
primary: Guest WiFi
layout: vertical
icon: mdi:wifi
icon_color: red
card_mod:
style:
.: |
ha-card {
height: 160px !important;
width: 155px !important;
background: none;
box-shadow: none;
--card-primary-font-size: 15px;
--card-secondary-font-size: 10px;
--icon-size: 100px;
}
- type: custom:mushroom-template-card
entity: []
primary: Guest WiFi
layout: vertical
icon: mdi:wifi
icon_color: orange
card_mod:
style:
.: |
ha-card {
height: 160px !important;
width: 155px !important;
background: none;
box-shadow: none;
--card-primary-font-size: 15px;
--card-secondary-font-size: 10px;
--icon-size: 100px;
}
- type: custom:mushroom-template-card
entity: []
primary: Guest WiFi
layout: vertical
icon: mdi:wifi
icon_color: yellow
badge_color: blue
card_mod:
style:
.: |
ha-card {
height: 160px !important;
width: 155px !important;
background: none;
box-shadow: none;
--card-primary-font-size: 15px;
--card-secondary-font-size: 10px;
--icon-size: 100px;
}
- type: custom:mushroom-template-card
entity: []
primary: Guest WiFi
layout: vertical
icon: mdi:wifi
icon_color: green
card_mod:
style:
.: |
ha-card {
height: 160px !important;
width: 155px !important;
background: none;
box-shadow: none;
--card-primary-font-size: 15px;
--card-secondary-font-size: 10px;
--icon-size: 100px;
}
- type: custom:mushroom-template-card
entity: []
primary: Guest WiFi
layout: vertical
icon: mdi:wifi
icon_color: blue
card_mod:
style:
.: |
ha-card {
height: 160px !important;
width: 155px !important;
background: none;
box-shadow: none;
--card-primary-font-size: 15px;
--card-secondary-font-size: 10px;
--icon-size: 100px;
}
- type: custom:mushroom-template-card
entity: []
primary: Guest WiFi
layout: vertical
icon: mdi:wifi
icon_color: purple
card_mod:
style:
.: |
ha-card {
height: 160px !important;
width: 155px !important;
background: none;
box-shadow: none;
--card-primary-font-size: 15px;
--card-secondary-font-size: 10px;
--icon-size: 100px;
}
view_layout:
grid:area: foot
