Span over columns and rows in grid card

mirekmal · April 27, 2024, 8:37am

Well, I’ll try, but need to figure out how to make it… My full dashboard code is +35k characters, while forum allors for 32k characters post only… Perhaps I’ll need to think of Git to share the code.
EDIT: ok, so I created a new gists with necessary files:

gist.github.com

https://gist.github.com/mirekmal/e37703581daecef68afcf9d6920d77f5

dashboard.yaml

cards:
  - type: custom:vertical-stack-in-card
    view_layout:
      grid-area: router-v
      show:
        mediaquery: '(max-width: 1200px)'
    cards:
      - type: custom:text-divider-row
        text: ROUTER
      - type: markdown

This file has been truncated. show original

themes.yaml

Ubiquiti v1:

  #Color pallettes
  green1: "#3BCC64"
  green2: "#2AA74F"
  green3: "#217E3C"
  green4: "#155628"
  green5: "#0B2D16"
  green6: "#010502"

This file has been truncated. show original

dashboard.yaml contains full code for this dashboard and themes.yaml theme I used (I frequently refer in my config to custom color palette thefined in this file).
Some watchouts:

dashboard contains 2 variants based on mediaquery result; one for PC screen and one for mobile. Both varies by layout of grid.
there are some conditional cards for router bandwith monitoring. If main link is up then WAN and VPN cards are displayed. If link goes down and router switches to LTE backup, then corresponding LTE card is displayted instead.
obviously there is plenty custom sensors specific to my home network HW…

bsara · April 28, 2024, 4:44am

This is awesome! Thanks so much! It’s some great inspiration and gives me some ideas for things related to custom theming as well.