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); }
No description
No description
Solution:
There is probably a style overwriting it. Use a more specific selector or if necessary use !important...
Jump to solution
13 Replies
Cakey Bot
Cakey Bot3w ago
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?
Meierschlumpf
Meierschlumpf3w ago
The comments were messed up
/* 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);
}
/* 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);
}
explosive parrot
You've got to align .mantine-XXXXXXX with the actuals from the tiles you want to adjust.
Meierschlumpf
Meierschlumpf3w ago
Yes that as well
Kalebini
KalebiniOP3w ago
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
No description
No description
Solution
akro
akro3w ago
There is probably a style overwriting it. Use a more specific selector or if necessary use !important
Kalebini
KalebiniOP3w ago
Yes thanks you very much ! Using !import did fix the problem
Kalebini
KalebiniOP3w ago
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.
No description
Serenaphic
Serenaphic3w ago
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:
.dashboard-gs-generic-item[data-with-border],
.dashboard-gs-category {
border: none;
}
.dashboard-gs-generic-item[data-with-border],
.dashboard-gs-category {
border: none;
}
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:
.mantine-Menu-dropdown,
.mantine-Header-root {
border: none;
border-bottom: 0.0625rem solid rgba(217, 72, 15,0.25);
background-color: rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
}
.mantine-Menu-dropdown,
.mantine-Header-root {
border: none;
border-bottom: 0.0625rem solid rgba(217, 72, 15,0.25);
background-color: rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
}
IIIdefconIII ︻デ═一
someone else daily changes the fashboard xD
No description
IIIdefconIII ︻デ═一
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
Serenaphic
Serenaphic2w ago
Did you try the CSS I provided or the one at the beginning of the thread?
Want results from more Discord servers?
Add your server