Cosmetic/CSS help
Good morning! I'm trying to do some theme editing with CSS and can't quite figure it out. I was able to get the background color of the tiles (grid stack item) to change, but trying any of the other static variables from the documentation doesn't seem to do anything. I'm beyond new to CSS so it's likely a PEBKAC issue, but I'd appreciate any help. Below is an example of what I have in the Custom CSS section trying to test what static variables are associated with which visual element. Thanks!
18 Replies
Thank you for submitting a support request.
Depending on the volume of requests, our team should get in contact with you shortly.
⚠️ Please include the following details in your post or we may reject your request without further comment: - Log (See https://homarr.dev/docs/community/faq#how-do-i-open-the-console--log) - Operating system (Unraid, TrueNAS, Ubuntu, ...) - Exact Homarr version (eg. 0.15.0, not latest) - Configuration (eg. docker-compose, screenshot or similar. Use ``your-text`` to format) - Other relevant information (eg. your devices, your browser, ...)
❓ Frequently Asked Questions | Homarr documentation
Can I install Homarr on a Raspberry Pi?
Hey, don't worry too much about it, the current custom CSS environment is subpar and confusing.
Firstly, when sending code on discord, you can format it by adding this arround it:
(Remove the , just discord not understanding escape chars for some reason)
Regarding your issue, don't forget to add the dot at the beginning of the class styling:
without the dot it will target elements with that name instead of elements with the class parameter of that name. Element name is something like "div" or "p" that you can see on inspect element right after the opening "<"
Lastly, the docs is here to help but it's not really that great. One advice that is on there is to just use "inspect element" in your browser and just look for the thing you want to change. A lot of them will have a class containing "mantine-976fsdf" or something with a random string, those are nice to target a very precise element, but they reset and change if you restart your container.
ah interesting
If I look at the header bar for exemple, it tells me the class name is actually mantine-Header-root.
Frankly there should be another classname with it that you should be able to use (and tried to, so not your fault there) but it's not here for some reason
sweet, i'll play around. That worked for the header bar
Sidenote, the dashboard-app-shell does exist, but what you are doing here could be fulfilled by the background setting of your board instead. If you do want it to be a full color, your approach is right, but you need to use background instead of background-color
Also, just saw it, it's "background-color", not "background color". Always use dashes, no spaces
i just saw that too
There's a bit of learning to do with CSS, but it can be so powerful, it's worth it. Also a lot simpler to do that rather than having 1000 options to tinker with
this self-hosting journey has had a ridiculous amount of education
https://discord.com/channels/972958686051962910/1184395761136439376
I made a ton of CSS on my own board to have smooth looking sidebars.
i feel like i almost understand how the internet works
i'm just trying to make a stupid anime beach theme that's relaxing haha
You tell me, I learned Typescript solely because I started my own self-hosting journey
Background supports gifs btw
#🔥・show-off has one or 2 somewhere showcasing that
I don't even know what typescript is 😆
the coding language homarr is written in. Kinda like Javascript
I tried to change the font color and it only changed the color in one of the squares. I can't seem to find an overarching all fonts rule. Any tips? Here's what changed it in the first square:
blue borders look nice
lemme check
So, what you want to do is target any element that belongs to the "grid-stack-item-content" and then change the font color
I'll make a snippet
Most excellent, thanks!
also changed the border color element, simpler this way