[Topic] Layout & Positioning Issues

[benphelps]

This issue will serve as a single point of discussion for anything related to layout or positioning issues, bugs, suggestions, etc.

[AmadeusGraves]

CUSTOM CSS [SUGGESTION] Apart from the .yml files that exist in the configuration folder, a css class could also be instantiated to allow editing of the page style. This way the developer will be more free from design issues like on certain wallpapers with certain colours, it is not possible to read the data displayed on the screen.

[Spiritreader]

It would be wonderful to be able to display a custom logo to the left of the resource monitoring information.

[ysarkain]

2 requests: 1) Adjustable width of page - on my 2560x1440 monitor it looks like its ~75% so there is lots of space on both sides. 2) Also would be cool if we could put the speedtest widget in the header bar area with the disk/cpu/etc. statistics.

[babeyrage]

Hi, could you please tell me how I can get this layout config?

I have the current layout settings in my yml file:

layout: Media: style: row columns: 4 Downloads: style: row columns: 1 Utilities: style: row columns: 1

I have tried a few different variations of the above, but nothing that will replicate the above picture :(

[iamernie]

Hi, could you please tell me how I can get this layout config?

I have the current layout settings in my yml file:

layout: Media: style: row columns: 4 Downloads: style: row columns: 1 Utilities: style: row columns: 1

I have tried a few different variations of the above, but nothing that will replicate the above picture :(

@babyrage Try this

layout:
  Media:
    style: row
    columns: 4
  Downloads:
    style: column
  Utilities:
    style: column

[dieideeistgut]

Regarding: CUSTOM CSS

Heya. Please don't over-complicate this one. I'd vote for a simple single-css-file-include via volume/bind. If there is no file, there will be nothing included.

[chuckiton]

Search bar doesn't extend to the boundary of the date/time info widget Contents of widgets.yaml:

- resources:
    label: System
    cpu: true
    memory: true
- resources:
    label: mSD Storage
    disk: /
- resources:
    label: Disk Storage
    disk: /mnt/storage
- search:
    provider: duckduckgo # google, duckduckgo, bing or custom
    target: _blank
    focus: true
# 1/23/22, 1:37 PM
- datetime:
    format:
        dateStyle: short
        timeStyle: short
        hour12: true```

[EnsuingRequiem]

Similar to how the number of columns can be defined when using style: row which causes wrapping once the number of columns is exceeded, a rows option should be available for style: column to allow for "wrapping" once the limit of rows is met. I would expect it to look like

layout:
  Management:
    style: column
    rows: 4
  Media:
    style: row
    columns: 4

Which (ascii-like) would look like

Media
┌─────────┐┌─────────┐┌─────────┐┌─────────┐
│         ││         ││         ││         │
│         ││         ││         ││         │
└─────────┘└─────────┘└─────────┘└─────────┘
┌─────────┐
│         │
│         │
└─────────┘
Management
┌─────────┐┌─────────┐
│         ││         │
│         ││         │
└─────────┘└─────────┘
┌─────────┐
│         │
│         │
└─────────┘
┌─────────┐
│         │
│         │
└─────────┘
┌─────────┐
│         │
│         │
└─────────┘

[Samurai1201]

Ive been using Homer (https://github.com/bastienwirtz/homer) previously. It has the option to define how many columns should be arranged next to each other.

You just had to set this option in the config yaml: columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12) and it would format the page accordingly.

I would really love to see this being implemented into hompage.

[frozendark01]

Hello, I don't know how react-next.js works, but is it possible to create a header like this? I think it is much more organized and aligned.

[brhahlen]

Just discovered this two days ago and liking it really much already. Especially the Docker integration with labels! Many kudos!

Probably on your list already (but couldn't find it mentioned specifically), but my main "gripe" right now is that I can't order things myself.

This not only goes for the different sections, which seem to order "randomly", but also for the items within the sections.

Thanks for all your hard work!

[Nonoss117]

@brhahlen you can find details about ordering in the wiki : https://github.com/benphelps/homepage/wiki/Service-Discovery/#caveats

[brhahlen]

@Nonoss117 Thanks! I've seen that and am aware of it. Just saying it would be great to be able to order it yourself. Maybe via a label or something, there must be some way to realize that :)

[Mivaro482]

Since one the recent versions, the bookmarks columns have no spacing - I just defined three columns of bookmarks and no further config. I'm on v0.4.18 btw.

[shamoon]

Since one the recent versions, the bookmarks columns have no spacing - I just defined three columns of bookmarks and no further config. I'm on v0.4.18 btw.

Yea I noted this too, I'll sort it out!

[shamoon]

Fixed the above =)

[gDansel]

Might be neat if an entry with associated widget enabled had the same height as two normal entries. You know, to keep things aligned nicely. Couple of pixels off at the moment.

[szczottie]

Ive been using Homer (https://github.com/bastienwirtz/homer) previously. It has the option to define how many columns should be arranged next to each other.

You just had to set this option in the config yaml: columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12) and it would format the page accordingly.

I would really love to see this being implemented into hompage.

Also looking for this.

[lsaadeh]

Can we have these float upward to avoid blank spaces? (Half screen mode)

[stephentoth]

There seems to be an issue with the greeting in the header.

- greeting:
    text_size: xl
    text: "The Vault"

- resources:
    cpu: true
    memory: true
    disk: /

- datetime:
    text_size: xl
    format:
      timeStyle: short
      hour12: false

- search:
    provider: duckduckgo
    target: _blank

[UmarAbdullah4]

I can fit it but I don't know how to contribute in this project

[JazzFisch]

I can fit it but I don't know how to contribute in this project

If you have ideas on how to improve the styling, you can either post examples, or go ahead and clone the repo and make a PR. Feel free to ask questions if you need help.

[Stuke00]

My layout keeps reverting back to columns even when my settings.yaml indicate rows. If I just open the file and resave it, it will revert back to rows. Here is my settings.yaml file (renamed to txt so I could upload). I've also attached 2 files showing the difference.

settings.txt

[Beguiled]

My layout keeps reverting back to columns even when my settings.yaml indicate rows. If I just open the file and resave it, it will revert back to rows. Here is my settings.yaml file (renamed to txt so I could upload). I've also attached 2 files showing the difference.

settings.txt

Same happened to me after an upgrade to a newer version. Try clearing your cache or force-refreshing it. One of those should clear it up.

[rursache]

Adjustable width of page - on my 2560x1440 monitor it looks like its ~75% so there is lots of space on both sides.

I would also like this. 5 columns instead of 4 would be nice

[ashanrath]

Also experiencing the same layout issues after the latest version. Favicon and background images also appear to have broken. Have attempted cache clearing, multiple PCs etc. No resolution at the moment.

[BigJazzz]

Two issuess:

1. I put time above resources in the yaml file, but it still shows on the right
2. It doesn't seem to adhere to the text size? I've tried changing it, but it just seems to be consistently one size

Is there something I'm missing?

widgets.yaml:

- datetime:
    locale: au
    text_size: 4x1
    format:
        timeStyle: short
        hour12: false
        dateStyle: short

- resources:
    cpu: true
    memory: true
    disk: /

[Beguiled]

4x1

I’m seeing 4x1 on your text_size definition. Try 4xl instead. You might have confused the l with a 1.

[BigJazzz]

@Beguiled that did the trick, thank you! And I did. Probably should've just copy/pasted to avoid that issue. -.-

[Beguiled]

Glad I could help! It’s easy to make that mistake - you’re not alone!

[BigJazzz]

It seems like the widgets section isn't orderable at all. I've just added weather to it, and it's at the end, despite being placed at the top of the file.

[eanmclaughlin]

@BigJazzz The header widgets are added here: https://github.com/benphelps/homepage/blob/147a165bbcc28bdb50b0f3842a717e4a4dd626c3/src/pages/index.jsx#L273-L284

Looks like there's a concept of "right-aligned" and "not right aligned"; the right-aligned ones are listed here: https://github.com/benphelps/homepage/blob/147a165bbcc28bdb50b0f3842a717e4a4dd626c3/src/pages/index.jsx#L39

I think ordering support for them would require adding a sort/weight/order field, and probably include fallback to the existing alignment-based setup if that new field isn't defined?

Edit: Or just based on order listed in the config file.

Edit edit: Probably both, actually - specify which side to align a widget on, then order them within the list of widgets aligned on that side. Can also imagine a reserved slot for the center.

[BigJazzz]

@eanmclaughlin Oooooh. Maybe I might have a play wtih this. Thanks for that!

[simeonrobinson]

Is it possible to explicitly specify two links be stacked next to a widget like in this image? Currently my services.yaml looks something like this:

 - Utilities:
  -  Pi-hole stats:

        icon: pihole.png
        href: xxxx
        widget:
            type: pihole
            url: xxxx
            key: xxxx
    - Unraid dashboard:

        icon: unraid.png
        href: xxxx
    - EdgeOS dashboard:

        icon: edgeos-light.png
        href: xxxx

and settings.yaml looks like this:

  Utilities:
    style: row
    columns: 2

producing this

[itsthejb]

On starting the Homepage container, the layout will be incorrect; it seems like the rows/columns settings aren't correctly used:

Notice the 3 columns. The configured layout is actually:

I can fix this issue once the container is running by doing a minor edit to any of the configs, letting the layout reload, and then undoing the change.

It would appear that the only problem is that the row/column settings aren't correctly set up on the initial load. Any changes after that are fine

Relevant config snippet:

layout:
  Media:
    icon: mdi-video
    style: row
    columns: 2
  Productivity:
    icon: mdi-briefcase
    style: row
    columns: 3
  Infrastructure:
    icon: mdi-hammer-wrench
    style: column

[Beguiled]

You’re the third person here recently to mention that, and I think you have produced the clearest picture of the scenario. I thought I had just refreshed and things worked again but I think you are right in that it requires a modification to the configs. This must have been introduced with a recent build.

[itsthejb]

Happy to help. I think the background image is also affected

[shamoon]

This is the same bug I tried to fix in #609 , unfortunately it would seem that didn’t really do it. It’s a bizarre one. I reopened #576

[ashanrath]

Happy to help. I think the background image is also affected

Confirmed, tried making a minor change to a config file after the container had started, layout issues fixed, background and favicon images also fixed. It's definitely something with the initial load. Guessing most of us associated it with the upgrade as that's when we last restarted the container.

[cinderblockgames]

My layout keeps reverting back to columns even when my settings.yaml indicate rows. If I just open the file and resave it, it will revert back to rows. Here is my settings.yaml file (renamed to txt so I could upload). I've also attached 2 files showing the difference.

settings.txt

Came here to report this as well. It keeps happening.

[joestump]

Any way to make these widgets line up? It's driven me a little nuts 😅

[Bovive]

My layout keeps reverting back to columns even when my settings.yaml indicate rows. If I just open the file and resave it, it will revert back to rows. Here is my settings.yaml file (renamed to txt so I could upload). I've also attached 2 files showing the difference. settings.txt

Came here to report this as well. It keeps happening.

Same here with a fresh install. Clicking the refresh button in the bottom right corner of homepage corrects it. If I reload the page (using the browser) it goes back to being wrong and I have to click that button again. I have tried opening on other computers, incognito mode, and clearing local storage; it is always the same.

[shamoon]

If it’s happening on refresh there’s an issue with your setup. The bug the other user described was fixed in the last version

[Robin-Sch]

I have 6 "groups" each one has style: column

So right now it orders like this: 1 2 3 4 5 5 6 6 (5 and 6 are twice as wide as 1 etc..)

is it possible to have it split in three? so like 1 2 3 4 5 6

[UmarAbdullah4]

Yes its possible

On Wed, Apr 12, 2023, 10:02 PM Robin @.***> wrote:

I have 6 "groups" each one has style: column

So right now it orders like this: 1 2 3 4 5 5 6 6 (5 and 6 are twice as wide as 1 etc..)

is it possible to have it split in three? so like 1 2 3 4 5 6

— Reply to this email directly, view it on GitHub https://github.com/benphelps/homepage/issues/235#issuecomment-1505619073, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXBEOR3PIYPKTJ4NJBJXUATXA3NYTANCNFSM6AAAAAAQRJULHA . You are receiving this because you commented.Message ID: @.***>

[Robin-Sch]

Yes its possible

how?

[UmarAbdullah4]

To achieve this, you'll need to modify the CSS for the columns. Here's an example CSS that should achieve the desired layout:

.column { width: 33.33%; float: left; }

.group1 { clear: left; }

.group2 { margin-left: 33.33%; }

.group3 { margin-left: 66.66%; }

In this CSS, the .column class sets each column to be 33.33% wide and float left. The .group1, .group2, and .group3 classes set the position of the columns within each group.

To use this CSS, you'll need to add the appropriate classes to each column. For example, the first three columns would have the class column group1, the next two would have the class column group2, and the last column would have the class column group3.

With this CSS and class setup, the columns should display in the order you described:

1 2 3 4 5 6

I hope this helps!

On Thu, 13 Apr 2023 at 21:26, Robin @.***> wrote:

Yes its possible

how?

— Reply to this email directly, view it on GitHub https://github.com/benphelps/homepage/issues/235#issuecomment-1507254024, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXBEOR62RHR6H2INAYX7JUTXBASM7ANCNFSM6AAAAAAQRJULHA . You are receiving this because you commented.Message ID: @.***>

[crispybegs]

Can we have these float upward to avoid blank spaces? (Half screen mode)

very much this. did you ever find a solution to it? those big gaps drive me crazy.

[Artnal]

Hi there,

I might be missing something, but is it possible to have columns in a row? What I would want Ideally would be:

 GroupA                           GroupB
┌───────────────────────────────┐┌─────────┐┌─────────┐┌─────────┐
│              A                ││    B    ││    B    ││    B    │
│                               ││         ││         ││         │
└───────────────────────────────┘└─────────┘└─────────┘└─────────┘
 GroupC                           GroupD
┌─────────┐┌─────────┐┌─────────┐┌───────────────────────────────┐
│    C    ││    C    ││    C    ││            D                  │
│         ││         ││         ││                               │
└─────────┘└─────────┘└─────────┘└───────────────────────────────┘
┌─────────┐┌─────────┐
│    C    ││    C    │
│         ││         │
└─────────┘└─────────┘

Thanks a lot!

[jinghua625]

I hope to customize each group of bookmarks, such as this layout where I want 4 groups per line and 2 lines to be comfortable.