Hallo Zusammen,
Ist es möglich ein Abschnitt als Footer zu erstellen und wenn ja wie?
Meine Idee:
Ich möchte gern meine Navigation mit Karten anlegen
Diese soll aber fix im Footer sein
Daher meine Idee ein Abschnitt oder eine Raster-Card fix im Footer zu platzieren
Hat jemand eine Idee wie man das umsetzten könnte?
Danke im Voraus
Gruß
Marcel
habe mal von der navbar card gelesen - die soll so was können
Moin, ich habe bei mir ein Footermenu im Einsatz. Das ist dann immer unten fixiert und liegt über dem restlichen Inhalt. Funktioniert seit Beginn von HA einwandfrei. Ich habe das mit der bubble-card realisiert, würde aber auch mit anderen wie custom-button-card funktionieren.
type: custom:bubble-card
styles: |
.bubble-icon {
--mdc-icon-size: 30px !important;
height: 35px;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding-right: 10px;
color: var(--primary-color);
}
* {
font-size: 10px !important;
border: none !important;
border-radius: 0px !important;
background: rgba(0,0,0,0) !important;
}
card_type: horizontal-buttons-stack
auto_order: false
1_name: ""
1_icon: mdi:keyboard-backspace
1_link: /dashboard-test/home
2_link: /dashboard-test/heizung
2_icon: mdi:heating-coil
3_link: /dashboard-test/licht
3_icon: mdi:lamps
4_link: /dashboard-test/garten
4_icon: mdi:pool
5_link: /dashboard-test/wetter
5_icon: mdi:weather-partly-cloudy
6_link: /dashboard-test/solar
6_icon: mdi:home-lightning-bolt-outline
card_mod:
style: |
ha-card {
border: none !important;
border-radius: 0px !important;
background: none !important;
box-shadow: none !important;
padding: 0px;
z-index: 2;
position: fixed;
margin: 0 !important;
bottom: 0;
}
Wichtig sind diese Punkte im Card-Mod, dadurch wird das Menü entsprechend fixiert.
z-index: 2;
position: fixed;
margin: 0 !important;
bottom: 0;
legt sie sich dann über den Inhalt des Dashboard und verdeckt ihn? oder liegt sie direkt unterhalb und das Dashboard und alle seine Karten sind sichtbar?
Das Menü liegt immer oben drauf und kann das Dashboard dahinter verdecken. Scrollen bleibt aber erhalten und der Footer bleibt immer an der selben Stelle.
und wenn ich vermeiden möchte, dass Karten, die am unteren Rand des Dashboards sind, nicht verdeckt werden, sollte ich dann unten eine Dummy-Karte hinlegen, wo sich dann die Nav-Karte drüberlegt?
wie machst du das @jayjojayson ?
Wie gesagt der Scrolleffekt bleibt erhalten, du kannst ganz normal am Handy oder Tablet nach unten scrollen. Der Footer bleibt dabei immer über dem restlichen Inhalt. Ich weiß nicht wie ich es anders erklären kann.
Hier mal zwei Bilder vom Handy wegen dem Scrollen.
Danke Dir! 
ich denke, das ist das, was ich (und viele andere) suchen.
Wenn der gesamte Inhalt des Dashboards nach oben gescrollt ist, dann wird das untere Ende nicht durch die Navigation verdeckt. - Perfekt. 
Jetzt muss ich mich nur noch mit der bubble-card anfreunden, mein erster Versuch war nicht so begeisternd. war aber auch vor mehr als 1,5 Jahren.
Gerne, die Menüleiste habe ich aber auch schon vor gefüllten Ewigkeiten im Dashboard-Thema gezeigt. 
Schaue dir die bubble-card ruhig mal wieder an, die hat sich sehr gut entwickelt. Mit dem aktuellen Update 3.0 wurde sogar ein Module-Store integriert, wo man einfach per Klick verschiedenste Konfigurationen für Design und Co laden kann. Echt cool gemacht, kenne ich von keiner anderen Card.
Ansonsten kannst du das auch mit einer custom-button-card realisieren. Andere müssten auch funktionieren.
Zur Ergänzung: Ich habe mir auf die Art und Weise auch mein Seitenmenü für das Tablet gebaut. Kann per Tastendruck ein-/ausgeblendet werden (will ich ja nicht die ganze Zeit sehen). So komme ich dann auch auf meine Unterseiten und ein paar Einstellungen zum Dashboard selber (Topbar ausblenden, animierter Hintergrund).
type: conditional
conditions:
- condition: state
entity: input_boolean.button_sidebar_menu
state: "on"
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: repeat(1, 1fr)
grid-template-rows: repeat(3, auto)
cards:
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: #181e2a !important;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px
13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
border: none !important;
border-radius: 40px 0 0 40px !important;
width: 300px !important;
height:80%;
padding: 15px;
margin-top: 75px;
opacity: 1;
z-index: 2;
position: fixed;
top:0;
right:0;
}
cards:
- type: vertical-stack
cards:
- type: custom:button-card
color: transparent
icon: none
name: Hauptseiten
styles:
card:
- text-transform: uppercase;
- justify-content: middle
- align-self: middle
- margin: none
- height: 50px
- font-family: verdana
- color: var(--primary-color)
- background-color: transparent
- border-radius: 12px 12px 40px 12px
- border-style: none
- box-shadow: none
- type: horizontal-stack
cards:
- type: custom:button-card
color: transparent
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /dashboard-test/licht
styles:
card:
- background-color: "#354b5e"
- border-radius: 10px 10px 10px 10px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 25px
- height: 25px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: var(--primary-color)
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:heating-coil
tap_action:
action: navigate
navigation_path: /dashboard-test/heizung
styles:
card:
- background-color: "#354b5e"
- border-radius: 10px 10px 10px 10px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 25px
- height: 25px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: var(--primary-color)
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: horizontal-stack
cards:
- type: custom:button-card
color: transparent
icon: mdi:weather-partly-cloudy
tap_action:
action: navigate
navigation_path: /dashboard-test/wetter
styles:
card:
- background-color: "#354b5e"
- border-radius: 10px 10px 10px 10px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 25px
- height: 25px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: var(--primary-color)
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:home-lightning-bolt-outline
tap_action:
action: navigate
navigation_path: /dashboard-test/solar
styles:
card:
- background-color: "#354b5e"
- border-radius: 10px 10px 10px 10px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 25px
- height: 25px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: var(--primary-color)
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: vertical-stack
cards:
- type: custom:button-card
color: transparent
icon: none
name: Unterseiten
styles:
card:
- text-transform: uppercase;
- justify-content: middle
- align-self: middle
- margin: none
- height: 85px
- font-family: verdana
- color: grey
- background-color: transparent
- border-radius: 12px 12px 40px 12px
- border-style: none
- box-shadow: none
- type: horizontal-stack
cards:
- type: custom:button-card
color: transparent
icon: mdi:cog
tap_action:
action: navigate
navigation_path: /dashboard-test/einstellungen
styles:
card:
- background-color: "#404b5e"
- border-radius: 10px 10px 10px 10px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 25px
- height: 25px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: var(--secondary-text-color)
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:robot-mower
tap_action:
action: navigate
navigation_path: /dashboard-test/robter-steuerung
styles:
card:
- background-color: "#404b5e"
- border-radius: 10px 10px 10px 10px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 25px
- height: 25px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: var(--secondary-text-color)
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: horizontal-stack
cards:
- type: custom:button-card
color: transparent
icon: mdi:cctv
tap_action:
action: navigate
navigation_path: /dashboard-test/sicherheit
styles:
card:
- background-color: "#404b5e"
- border-radius: 10px 10px 10px 10px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 25px
- height: 25px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: var(--secondary-text-color)
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:pool
tap_action:
action: navigate
navigation_path: /dashboard-test/garten
styles:
card:
- background-color: "#404b5e"
- border-radius: 10px 10px 10px 10px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 25px
- height: 25px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: var(--secondary-text-color)
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: vertical-stack
cards:
- type: custom:button-card
color: transparent
name: Settings
icon: none
styles:
card:
- text-transform: uppercase;
- justify-content: middle
- align-self: middle
- margin: none
- height: 87px
- font-family: verdana
- color: var(--secondary-text-color)
- background-color: transparent
- border-radius: 12px 12px 40px 12px
- border-style: none
- box-shadow: none
- type: horizontal-stack
cards:
- type: custom:button-card
color: transparent
icon: mdi:menu
tap_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.kioskmode
styles:
card:
- background-color: "#1f2634"
- border-radius: 40px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 20px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: steelblue
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:webpack
tap_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.button_background_dashboard
styles:
card:
- background-color: "#1f2634"
- border-radius: 40px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 20px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: steelblue
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:menu-open
tap_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.button_sidebar_menu
styles:
card:
- background-color: "#1f2634"
- border-radius: 40px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 20px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: steelblue
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
border: none;
background: none;
border: none;
border-radius: 0px !important;
margin-top: 10px !important;
padding-bottom: 6px;
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
color: transparent
icon: mdi:hammer
tap_action:
action: navigate
navigation_path: /developer-tools/yaml
styles:
card:
- background-color: "#1f2634"
- border-radius: 40px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 23px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: steelblue
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:backup-restore
tap_action:
action: navigate
navigation_path: /config/backup/overview
styles:
card:
- background-color: "#1f2634"
- border-radius: 40px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 23px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: steelblue
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:cog
tap_action:
action: navigate
navigation_path: /config
styles:
card:
- background-color: "#1f2634"
- border-radius: 40px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 23px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: steelblue
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:devices
tap_action:
action: navigate
navigation_path: /config/integrations/dashboard
styles:
card:
- background-color: "#1f2634"
- border-radius: 40px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 23px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: steelblue
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
- type: custom:button-card
color: transparent
icon: mdi:robot
tap_action:
action: navigate
navigation_path: /config/automation/dashboard
styles:
card:
- background-color: "#1f2634"
- border-radius: 40px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px
7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 15px
- height: 23px
- color: white
- align-self: start
- text-align: start
- padding: 12px
- color: steelblue
img_cell:
- justify-content: middle
- align-self: middle
- margin: none
super - danke. da werde ich mal einen neuen Versuch starten.
und dann endlich ein Dashboard haben, dass auf Desktop, Tablet und Mobiltelefon nutzbar ist.
@jayjojayson
Vielen Dank das ist genau das was ich gesucht habe
Aber eine Frage habe ich noch
Kann man bei der „bubble-card“ die Bezeichnung statt rechts auch unter dem Icon drunter anzeigen lassen?
Danke im Voraus
Gruß
Marcel
Funktioniert sicherlich auch, aber habe jetzt kein Beispiel dafür. Soweit ich weiß gibt es auch keine „horizontale“ bubble-card. Die sind eigentlich immer vertikal angeordnet. Mit Card-Mod und der Klasse vom Text kann man diesen aber auch verschieben und darunter platzieren, da bin ich mir eigentlich sicher.