Trying to setup a wether dashboard, but I am having trouble getting things where I want them

Configuration Frontend
1

I have a 10" tablet(s) that I setup a dashboard in Hubitat along time ago. It has served me well. Now I want to do something similar to it in HA. I have tried just about all I can think of to get a similar layout and cannot seem to get it. I tried a dashboard with a section layout, a grid layout and I cannot seem to get the Clock card up on top and the multiple columns for multiple cards underneath. Here is a photo of what I have

PXL_20230508_164942945
PXL_20230508_1649429451920Ă—1211 140 KB

Can one of you wizards tell me how I can get this layout? I can get the cards on it, BTW I need to be able to use Card-Mod so I can change the font size and also the icon size if I can get that working as well. Just point me in the right direction and hopefully I will get it.

Thanks

2

I had no problem doing it… Am I missing something here?

Screenshot 2024-11-22 170641
Screenshot 2024-11-22 1706411900Ă—914 38.8 KB

Screenshot 2024-11-22 1706412
Screenshot 2024-11-22 17064121922Ă—911 12.9 KB

3

Below is the view YAML. Click on the pencil in the top right, then + to create a new view (tab). Then the 3 dots in the top right, and Edit in YAML. Delete everything in there (should be empty with only “type:” showing anyway. Then paste the YAML below:

type: sections
max_columns: 5
path: ""
sections:
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
  - type: grid
    cards:
      - type: heading
        heading: New section
badges:
  - type: custom:simple-clock-card
    use_military: true
    hide_seconds: true
    font_size: 10.0rem
    paddingLeft_size: 16px
    paddingRight_size: 16px
    paddingTop_size: 50px
    paddingBottom_size: 16px
    card_mod:
      style: |
        ha-card {
        text-align: centre !important;
        --ha-card-background: black !important;
        }
4

Thanks. That looks close. I’ll try it tonight. I’ll let you know how I do

Thanks again

5

It is coming along pretty well

image
image1733Ă—546 48.2 KB

It’s not as pretty with weather icons, I have yet to figure that out. But I’ll get there.
Thanks so much!

6

You can use custom:gap-card to space things out more to your liking.

Oh, and I tend to use vertical and horizontal stack cards too for placement helpers.

1 Like
7

I was wondering about the gaps, thanks for that tip.

8

You might also have a look at the topics with kiosk dashboards for inspiration.
There are some really nice ones which change interactively, depending on various scenario’s.

9

Thanks Nick I will check them out

10

I would suggest to rename the thread to reflect an actual goal.
Titles like “Help!”, “I am lost” etc are not clear.

11

Gotcha I will do that in the future

1 Like