H

Homarr•15mo ago•

16 replies

Kalebini

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

There is probably a style overwriting it. Use a more specific selector or if necessary use
!important

Jump to solution