Need help with custom CSS for transparency of tiles
hi everyone ! I just set up my dashboard but i'm struggling with custom css. I found this dashboard (1st pic) in a reddit post and would like to build something similar.
The OP gave this custom css. When I try it, only the navigation bar is affected but not the tiles (2nd pic). Does anyone could help me on this ?
/* Remove logo at the top left /
.dashboard-header-logo-image {
display: none
}
/ Blur categories and applications (change "10px" to your liking) /
.dashboard-gs-generic-item, .dashboard-gs-category {
background-color: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
}
/ Blur Navigation Panel (change "10px" to your liking) and add a transparent bottom outline /
.mantine-1h4f8n {
border: 0.0625rem solid rgb(217, 72, 15,0);
border-bottom: 0.0625rem solid rgb(217, 72, 15,0.25);
background-color: rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
}
/ Blur the background image /
.mantine-AppShell-body {
backdrop-filter: blur(10px);
}
/ Remove outline from categories /
.mantine-1ylzici[data-active] {
border: 0.0625rem solid rgba(37, 38, 43,0);
}
/ Remove the outline from widgets /
.mantine-14m2mri[data-with-border], .mantine-ubz967[data-with-border], .mantine-1eab5ax[data-with-border] {
border: 0.0625rem solid rgb(55, 58, 64,0);
}
/ Make outline of rss feed transparent and orange */
.mantine-qd40rq[data-with-border] {
border: 0.0625rem solid rgb(217, 72, 15,0.25);
}
Solution:Jump to solution
There is probably a style overwriting it. Use a more specific selector or if necessary use
!important...
13 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?
The comments were messed up
You've got to align .mantine-XXXXXXX with the actuals from the tiles you want to adjust.
Yes that as well
Thanks for your answers ! I tried that but i'm not sure if i'm doing it right. I found out that my right sidebar is mantine-1y22ac9. I changed my custom css but nothing changed
Solution
There is probably a style overwriting it. Use a more specific selector or if necessary use
!important
Yes thanks you very much ! Using !import did fix the problem
If anyone is interested in the final result. For this, I used this custom CSS (surely not the best, as I know nothing about CSS, but hey it works) :
https://pastebin.com/67wQgTKB
Pastebin
/* Blur Navigation Panel (change "10px" to your liking) and add a t...
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
Note that any mantine-XXXXXX will change it's random given code at every container restart.
I would suggest to find another way to address the classes.
For example, to target the widgets, apps and categories to remove their outline, use this instead:
This also removes the need to have 5 different pointers for the same task.
What I find strange is that the user that provided you the CSS actually used that for the background, not sure why not for the border as well.
For the Navigation menu, I am not sure what this refers to, but it feels like both the top header bar and the user dropdown menu could benefit from it, for which I would use the following:
someone else daily changes the fashboard xD
can anyone help me get rid of the outline of everything, the example posted above doenst seem to work for me
using this example which is futher great
Did you try the CSS I provided or the one at the beginning of the thread?