[FEATURE_REQUEST] Choose status dot position

[alexdelprete]

Is your feature request related to a problem? If so, please describe.

The colored dot that presents the state of the service is on the upper right corner, next to the name of the service. With long titles it covers some letters.

Describe the solution you'd like

An option (global or for each service) to choose the position of the dot (lower-right, lower-left, etc.)

I'd love to help, but I'm not a developer. :)

Priority

Low (Nice-to-have)

Is this something you would be keen to implement

No response

[Lissy93]

You should be able to change this with CSS, if your unsure how I can send you a snippet when I get back to my PC this evening

[alexdelprete]

You're amazingly fast, there was no urgency. :)

I'll try to do it by myself, in case I will ask for your help, is there a single CSS file?

Is this the right place? Custom CSS.

[alexdelprete]

I guess I'll wait for your help...don't know what to look for. :(

No urgency at all...low-priority.

[Lissy93]

Yup, that's the correct place to put any custom CSS. But you can also put it in your config file, under appConfig --> customCss, which is probably better, as it'll definitely stay backed up.

Here are some CSS snippets which will force the status indicator into different positions:

• Top-Left: .indicator { left: 0; }
• Top-Right: .indicator { top: 0; right: 0; }
• Bottom-Left: .indicator { bottom: 0; left: 0; top: unset; }
• Bottom-Right: .indicator { bottom: 0; right: 0; top: unset; }

If you need to set different positions for just certain items it's a bit more complicated. You'll need to find the ID for that item (visible in the edit item menu), then you can target it specifically with: #link-1_1302_pihole .indicator { bottom: 0; right: 0; top: unset; } (replace with actual ID, keep the #). Although moving an item can cause it's ID to change.

And if you need to force-override a CSS property, you can use !important before the semi colon, but use sparingly or things can get messy.

[Lissy93]

In the future, I will consider adding this as a config option But have a few other things to get done first If/ when it gets done, I will update you here :)

Feel free to reach out if there's anything else

[alexdelprete]

Yup, that's the correct place to put any custom CSS. But you can also put it in your config file, under appConfig --> customCss, which is probably better, as it'll definitely stay backed up.

It didn't work when I edited the config file directly, don't know why. In the end, I used the integrated "Edit App Config" in Edit Mode:

I saved to disk and it updated the config file too. Refreshed and it worked beautifully:

Thank you Lissy, you're awesome, like Dashy. :)