✨ Add option for custom CSS to Customization Settings

[wieli99]

Category

Feature

Overview

Adds a textarea for sutom css to the Customize Settings Tab. The css is loaded in a <style> below

Issue Number

Related issue: #339

Screenshot

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated
homarr-docs	⬜️ Ignored (Inspect)		Aug 23, 2022 at 10:51PM (UTC)

[ajnart]

Very interesting! Can you give me an example of a custom css that could be used ?

[wieli99]

Here's my quick and dirty CSS for displaying the modules on mobile devices:

@media (max-width: 768px) {
.mantine-1f5eeeq[data-hidden] {
    display: block;

}
.mantine-ibbm6b {
flex-direction: column;
margin: auto;
}
}

[ajnart]

Interesting. Before I merge could you make a small markdown formatted text about how to set up the custom CSS field and where to find the class names to override ? I'll publish it in the docs
(Or you can fork the docs branch, add it yourself and link the PRs together)

[wieli99]

I'm not quite sure if I understand what you mean by setting up the custom CSS. It's just a textarea where one can write CSS code.

As for class names, I personally don't think something like that would be relevant for the docs, especially considering the names are not very expressive. E.g. the calendar module would be accessed by .mantine-811qx8:nth-child(<position>)
But that’s just basic CSS knowledge, and I think you would need that either way when writing custom CSS.

[ajnart]

I'm not quite sure if I understand what you mean by setting up the custom CSS. It's just a textarea where one can write CSS code.

As for class names, I personally don't think something like that would be relevant for the docs, especially considering the names are not very expressive. E.g. the calendar module would be accessed by .mantine-811qx8:nth-child(<position>) But that’s just basic CSS knowledge, and I think you would need that either way when writing custom CSS.

You're right. I'll review and merge

[JannesV]

PR Will need to be reworked to use i18n correctly btw. Also not a bad idea to display the css in mono type

[manuel-rw]

@wieli99 Can you implement translations, so we can review and merge this?

[wieli99]

Not sure if I did that right - would that work for you?

[manuel-rw]

No, I think there shouldn't be any changes besides yours. Maybe a rebase wasn't needed? - Sorry, my bad. Do we have to revert @ajnart ?

Edit: Maybe I'm just bad at re-basing? I'm still unsure whether a rebase was needed here. I thought that since this was opened before changes were made on dev branch, you'd need to rebase to get all changes from dev.

[ajnart]

Not sure if I did that right - would that work for you?

I think you made your original branch out of master so the rebase messed the order. You can:

• checkout dev
• branch out from dev (feature v2)
• cherry-pick your commits from your old branch to your new branch
• push new branch to old branch (overriding everything with -force)

[wieli99]

Hope that did the trick :)

[ajnart]

Hope that did the trick :)

it did :)

I still don't understand how you get the classes names tho, i wanted to try out the feature but couldn't get any significant changes

[wieli99]

Perfect :)

I just 'Inspect Element' the page and choose whatever class / element I want to change. For example
.mantine-AppShell-body { background-color: aliceblue; }
changes the background of the main body.

I sadly couldn't find any documentation on the classnames that mantine assigns, so there's probably no easier way unless you want to manually assign more expressive classnames / ids in the code.

[ajnart]

Alright thank you for this. Would you mind writing a small markdown guide on how to use the Custom CSS field ? So that I can add it to the docs. It will also be used in the future for tooltips