About css
Hello everyone, I would like to achieve the effect of making the entire page's application and category boxes transparent or with a frosted glass texture. How should I set the CSS for this? This is how I've set it up, but it's not working. Could you please provide me with a successful code reference to look at?
/* 设置背景图片 /
body {
background-image: url("https://img.ptdream.net/o/ptdream-img/2023/08/28/64ec101ea6993.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
/ 可选：如果需要更多的背景样式，可以在这里添加其他属性 /
}
.tile {
position: relative; / 使::before伪元素相对于.tile元素定位 /
overflow: hidden; / 隐藏伪元素超出.tile边界的部分 /
}
.tile::before {
content: "";
position: absolute; / 绝对定位，覆盖.tile元素 /
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://img.ptdream.net/o/ptdream-img/2023/08/28/64ec101ea6993.png");
background-size: cover; / 覆盖整个.tile元素 /
backdrop-filter: blur(10px); / 使用模糊效果 /
opacity: 0.7; / 背景图片透明度 /
z-index: -1; / 将伪元素放在.tile元素底下 */
}
4 Replies
✨ Custom CSS | Homarr Docs
To further customize your dashboard, you can add your own CSS rules to Homarr. This can be used to change virtually any aspect of the dashboard, from the color of the background to the size of the font.
Thank you for providing the information; it has been very helpful to me. I don't have any knowledge about programming, and I've been having trouble making the header border, tiles, and boxes transparent like frosted glass while using CSS. Could you please advise me on how to solve this? If possible, could you provide me with your CSS code as a reference? I would greatly appreciate it!
The page explains how you can find the appropriate CSS selectors you have to use:
https://homarr.dev/docs/customizations/custom-css#finding-the-class-names-of-elements
There are a few static class names as well. You should prioritise static class names if possible for multiple reasons (explained further on the documentation).
Making a glass effect can be very hard. Custom CSS is really something for advanced users and we don't write the CSS for you. The idea is, that you write your own according to your desires.
Using existing posts on Stackoverflow you might be able to create such effect. But this is already at the border of programming.
I hope you understand. Can I help you with any other questions or specific problems?
✨ Custom CSS | Homarr Docs
To further customize your dashboard, you can add your own CSS rules to Homarr. This can be used to change virtually any aspect of the dashboard, from the color of the background to the size of the font.