Help with custom layout

[Himola]

Description

I am trying to position my services and I am having trouble with arranging them in the order i want.

I would like to have the calendar on the left side as it is now and all the other 4 services on the right side one under the other. I would also like to have the height of the calendar the same size the services on the right will have so 2 columns of the same height.

Thanks in advance for anyone who can help me!

homepage version

v0.9.3

Installation method

Source

Configuration

layout:
  DATA:
    style: row
    columns: 2
    header: false

Container Logs

No response

Browser Logs

No response

Troubleshooting

There is no working problem.

[glime-ai[bot]]

Thanks for posting a discussion about homepage here on GitHub. Homepage now uses a fancy new AI tool thanks to our friends at Glime, so the answer below is the AI bot's attempt to answer your question. If you feel it's sufficient you can mark the answer and close this post, otherwise feel free to leave it open of course!

Thanks for using Homepage! ❤️

---

Based on the information provided and the context from the documentation, it seems you want to create a custom layout where the calendar widget spans the height of two other service widgets placed to its right. To achieve this, you will need to configure your layout settings in the settings.yaml file to define the desired structure.

Here's a general approach you could take:

1. Define a group for your calendar widget with a style of column to ensure it takes up the full height on the left side.
2. Define another group for the services you want on the right side, with a style of row and columns: 1 to ensure they are stacked one under the other.
3. Make sure the total number of columns in the layout matches across both groups so that they align properly.

Here's an example configuration that might achieve the layout you're looking for:

layout:
  CalendarGroup:
    style: column
  ServicesGroup:
    style: row
    columns: 1

In this example, CalendarGroup is the name of the group where your calendar widget is located, and ServicesGroup contains the other four services you mentioned. You will need to adjust the group names to match the actual names you have defined in your services.yaml or bookmarks.yaml files.

Please note that the exact configuration might require some tweaking based on the specifics of your setup and the widgets you are using. Additionally, if the default layout options do not meet your needs, you may need to use custom CSS to achieve the exact layout you desire.

Remember to replace CalendarGroup and ServicesGroup with the actual names of your groups as defined in your configuration files.

If you encounter any issues or need further customization, you may need to refer to the documentation for advanced layout options or consider custom CSS styling.

This comment was generated by Glime.

[Himola]

OK, but I have no clue how or where to do that. Can you be more specific? Like step by step instruction bout where do i define groups and everything else? Also, I believe that if I separate the calendar and services into two different groups, the calendar integrations will not work anymore.

[dacagi]

I haven't tested what the AI said, but regarding how to work with groups.
You create your services inside groups, then reference them by the desired order in the layout settings. The exact name you use for the group inside services.yaml is the one you need to have in the layout definition, careful with that.

in services.yaml

- Media Services:
  - Jellyfin:
      href: http://jellyfin.url
      icon: /icons/jellyfin.png
- DNS & Network: # <= this is the group name
  - Adguard Home:
      href: http://adguard.url
      icon: /icons/adguard-home.png
  - SWAG Proxy:
      href: http://swag.url
      icon: /icons/swag.png

in settings.yaml

layout:
  DNS & Network: # <= referenced now in the layout
    tab: Home
    icon: mdi-lan
  Media Services:
    tab: Public
    icon: mdi-multimedia

So even though I had my media services first inside the settings.yaml, it's displayed the way I defined in the layout property.

Now the issue of having variable size columns and rows, that's a tough one I'm playing myself with. By default groups are displayed as columns I have noticed, unless you put style: row in the specific layout group object. If you use row style, then you can also use a columns: 5 element too. This creates rows with 100% screen width and up to 5 elements inside before wrapping to a new line.

layout:
  Tools:
    style: row
    columns: 5
    tab: AutoDiscover

I haven't been able to mix and match both styles together, but I think your desired layout is possible.

services.yml

- Calendar: # group
    - Calendar: # service
        widget:
            type: calendar

- Media Services: # group
    - Sonarr: # service 1
      ...
    - Radarr: # service 2
      ...

settings.yaml

layout:
  Calendar:
    header: false
    useEqualHeights: true
  Media Services:
    header: false
    useEqualHeights: true

Groups are shown as columns by default.

Since I haven't tested this myself I'd be thankful if you'd let me know the result :)