Header Glass

Theme component
1
:information_source: Summary Adds a glassy, translucent background to the header
:eyeglasses: Preview Vimeo Demo
:hammer_and_wrench: Repository https://github.com/denvergeeks/discourse-header-glass
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

15 Likes
2

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! :clap: :slight_smile:

does the component have any settings?

edit: i see now it doesn’t. i love the shadowed icons!

3

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;
}
3 Likes
4

i love this visual effect. curious about colored glass look.

i wanna make a stained glass effect now :joy:

1 Like
5

i’ve already forked the code lol

1 Like
6
2 Likes
7

nice! thanks for the linky :hugs:

1 Like
8

1 Like
9

oh. my. god. :heart_eyes_cat:

now you’ve inspired me to start building a new theme for my forum. :grin:

4 Likes
10

@Lilly I can hardly wait to see your creation! You Go Girl!!!

1 Like
11

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.

3 Likes
12

Site Architecture, Navigation, UI / UX – it’s all functional art :framed_picture: created to help people connect in the most satisfying ways.

5 Likes
13

Zoinks! forgot to post a link - I added color and transparency settings for kicks :upside_down_face:

4 Likes
14

Zoinks! Thank you @Lilly! I’ve added your color and transparency settings, and also a setting for the drop shadow on the header icons.

3 Likes
15

I think it still looks good with shadows hopefully I can get a switch for it

1 Like
16

Hello @Monikas thank you for the feedback but could you please elaborate on what exactly you’d ideally like in the settings?

2 Likes
17

The image shows a screenshot of a webpage with a cartoon girl's face and a search bar, likely related to a Chinese website or service. (Captioned by AI)
The image shows a screenshot of a webpage with a cartoon girl's face and a search bar, likely related to a Chinese website or service. (Captioned by AI)1572×140 49 KB

The image appears to be a screenshot from a Chinese social media platform, featuring a navigation bar at the top with blurry text and characters, accompanied by a search icon, a message icon, and a profile icon. (Captioned by AI)
The image appears to be a screenshot from a Chinese social media platform, featuring a navigation bar at the top with blurry text and characters, accompanied by a search icon, a message icon, and a profile icon. (Captioned by AI)1588×186 64.6 KB

18

Ah, yes. I have now added a setting for the shadow on the bottom edge of the header.

1 Like