Get 5 column layout

[Fernando-Checa]

Description

I'm new to homepage and I'd like to have 5 columns in my services.
Out of the box, it creates 4 columns like this

But as soon as I introduce the 'fivecolumns: true' in settings.yaml everything stops working as expected

If I introduce 'style: row' and 'columns: 5' it makes each group 5 columns but that is not what I need

How can I make it so each group is vertical and there are 5 groups in. a row?

Thanks in advance

homepage version

c0.9.11

Installation method

Docker

Configuration

No response

Container Logs

No response

Browser Logs

No response

Troubleshooting

[owennewo-dev]

They need to be set as style: column and columns: 1 to get all five next to each other.
This is what you need to put in your settings.yaml file. Make sure the names match up with the names of your groups in your services.yaml files.

  Homelab:
    style: column
    columns: 1
    header: false (optional, I like how it looks without the header)
  Domotica:
    style: column
    columns: 1
    header: false
  Media:
    style: column
    columns: 1
    header: false
  Apps:
    style: column
    columns: 1
    header: false
  Database:
    style: column
    columns: 1
    header: false

[Fernando-Checa]

This is what I get with your yaml.
Not what I was expecting from the 1 column setting...

[owennewo-dev]

Can you share all the code in your services.yaml and settings.yaml files?

[Fernando-Checa]

sure.. here it is:

headerStyle: boxedWidgets
disableCollapse: false
fivecolumns: true
#useEqualHeights: true

layout:  
    HOMELAB:
      style: column
      columns: 1
      header: false
    DOMOTICA:
      style: column
      columns: 1
      header: false
    MEDIA:
      style: column
      columns: 1
      header: false
    APPS:
      style: column
      columns: 1
      header: false
    DATABASE:
      style: column
      columns: 1
      header: false

---

- HOMELAB:
    - Proxmox:
        id: col-med
        href: https://proxmox.lab.es
        icon: proxmox.png
        description: datacenter
        siteMonitor: https://proxmox.lab.es
        widget:
            type: proxmox
            url: https://proxmox.lab.es
            username: {{HOMEPAGE_VAR_PROXMOX_USERNAME}}
            password: {{HOMEPAGE_VAR_PROXMOX_PASSWORD}}
    - TrueNAS Scale:
        id: col-med
        href: https://truenas.lab.es/
        icon: truenas-scale.png
        description: nas
        siteMonitor: https://truenas.lab.es/
        widget:
            type: truenas
            url: https://truenas.lab.es/
            key: {{HOMEPAGE_VAR_TRUENAS_KEY}}
            enablePools: false
    - Netdata:
        href: https://netdata.lab.es/spaces
        icon: netdata.png
        description: proxmox
        widget:
            type: netdata
            url: https://netdata.lab.es
    - Pi-Hole:
        href: https://pi-hole.lab.es/admin/
        icon: /icons/Pi-hole_Logo.png
        description: jupiter
        widget:
            type: pihole
            url: https://pi-hole.lab.es/admin
            version: 5 # required if running v6 or higher, defaults to 5
            key: {{HOMEPAGE_VAR_PIHOLE_KEY}}
    - Uptime Kuma:
        href: https://kuma.lab.es
        icon: /icons/kuma.svg
        description: jupiter
    - Portainer:
        id: col-small
        href: https://portainer.lab.es
        icon: portainer.png
        description: europa
    - Gitea:
        id: col-small
        href: https://gitea.lab.es/
        icon: gitea.png
    - SyncThing:
        id: col-small
        href: https://syncthing.lab.es/
        icon: syncthing.png
        description: truenas
    - FileBrowser:
        href: https://files.lab.es/
        icon: /icons/filebrowser.png
        description: truenas
    - Proxmox Backup Server:
        href: https://pbs.lab.es/
        icon: /icons/proxmox.png


    

- DOMOTICA:
    - My Second Service:
        href: http://localhost/
        description: Homepage is the best

- MEDIA:
    - Sonarr:
        icon: sonarr.png
        href: https://sonarr.lab.es/
        description: Series management
    - Radarr:
        icon: radarr.png
        href: https://radarr.lab.es/
        description: Movie management
    - Overseerr:
        href: https://overs.lab.es/
        icon: /icons/overseerr.svg
        description: Media Discovery
    - Plex:
        icon: plex.png
        href: https://plex.lab.es/
        description: Media Server
    - Transmission:
        href: https://transmission.lab.es/
        icon: transmission
    - AudioBookshelf:
        icon: /icons/book1.svg
        href: https://books.lab.es/
        description: audio books


- APPS:
    - My Second Service:
        href: http://localhost/
        description: Homepage is the best

- DATABASE:
    - InfluxDB:
        href: https://influx.lab.es/
        icon: influxdb.png
        description: inklux 2
          

[owennewo-dev]

I have been thinking all day and can't think of a solution, or a reason why it's broken. Have you had any luck?

Maybe it's the space between the end of one group and the start of another, it should only be one line. Although I am doubtful it would make a difference. Let me show you what I mean:

    - Proxmox Backup Server:
        href: https://pbs.lab.es/
        icon: /icons/proxmox.png


    

- DOMOTICA:
    - My Second Service:
        href: http://localhost/
        description: Homepage is the best

This should only be one line of space, like this:

    - Proxmox Backup Server:
        href: https://pbs.lab.es/
        icon: /icons/proxmox.png

- DOMOTICA:
    - My Second Service:
        href: http://localhost/
        description: Homepage is the best

🤷‍♂️I don't really know, sorry

[Fernando-Checa]

same result.. libre breaks should not matter much I think...

I will stick to row instead and use tabs to organize everything

Thank you so much for your help.

[owennewo-dev]

That's a bummer. I have no idea why it's not working.
Anyway, enjoy making your Homepage! I would like to experiment with tabs for my bookmarks, but I don't know if I can move the tabs to the bottom of the page.
Please share your page here once you are finished, or somewhat happy as these things are never finished :D

[Fernando-Checa]

you could do something like this is CSS:

#tabs {
    position: absolute;
    margin-bottom: 30px;
}

that would put the tabs at the bottom.. some more tweaking needed but it's a start

[owennewo-dev]

Thanks! I will experiment with it, I want it just above the bookmarks area. Because I have a LOT of bookmarks haha

[Fernando-Checa]

#tabs is an independent DIV so I guess you could place it anywhere..

[bambosd]

Hello !!
Is there any progress on getting 5 columns on the services section ?

I tried the fivecolumns: true and also layout configs but no success.