The discussion is about the “Header Glass” theme component, which adds a glassy, translucent background to the header. denvergeeks introduced the component, providing a Vimeo demo and GitHub repository link. Lilly expressed interest in the component, asking about settings and praising the shadowed icons. denvergeeks shared the CSS code for the shadowed icons and mentioned that there are no settings, but requests and PRs are welcome.
Lilly was inspired by the visual effect and considered creating a stained glass effect. She also forked the code and explored colored glass looks. denvergeeks shared a link to a CSS glass generator, and Lilly later added color and transparency settings to the component.
The discussion continued with Lilly expressing her preference for creating functional components over theme design. denvergeeks shared a philosophical perspective on site architecture and UI/UX design. Monikas provided feedback on the component, suggesting a switch for the shadow effect. denvergeeks responded, asking for clarification on the desired settings. Monikas shared screenshots of a website with a similar effect, and denvergeeks added a setting for the shadow on the bottom edge of the header.
 |
Summary | Adds a glassy, translucent background to the header |
 |
Preview | Vimeo Demo |
 |
Repository | https://github.com/denvergeeks/discourse-header-glass |
 |
Install Guide | How to install a theme or theme component |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
oh that’s cool. i like that and may use it on my forum. i have semi transparent headers but i like that glass effect. nicely done! 
does the component have any settings?
edit: i see now it doesn’t. i love the shadowed icons!
No settings, but requests and PRs are most welcome!!!
Ah the shadowed header icons… here’s all of the CSS…
.d-header {
background: rgb(147, 147, 147, 0.39) !important;
-webkit-backdrop-filter: blur(10px) !important;
-moz-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5) !important;
color: rgb(255 255 255) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.d-header-icons .d-icon,
.header-sidebar-toggle button .d-icon {
color: rgb(255 255 255) !important;
fill: rgb(255 255 255) !important;
filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.4)) !important;
}
i love this visual effect. curious about colored glass look.
i wanna make a stained glass effect now 
i’ve already forked the code lol
nice! thanks for the linky 
oh. my. god. 
now you’ve inspired me to start building a new theme for my forum. 
@Lilly I can hardly wait to see your creation! You Go Girl!!!
meh, theme design isn’t really my forte. i can make them , but i prefer the creativity of components and functional type solutions, especially for others who define a need.
Site Architecture, Navigation, UI / UX – it’s all functional art 
created to help people connect in the most satisfying ways.
Zoinks! forgot to post a link - I added color and transparency settings for kicks 
Zoinks! Thank you @Lilly! I’ve added your color and transparency settings, and also a setting for the drop shadow on the header icons.
I think it still looks good with shadows hopefully I can get a switch for it
Hello @Monikas thank you for the feedback but could you please elaborate on what exactly you’d ideally like in the settings?
Ah, yes. I have now added a setting for the shadow on the bottom edge of the header.
