[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.

[bughaver]

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.

[rstuke82]

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!