Christmas Decoration Component 🎄

Adding a bit of festive flair to your forum – I present a Christmas decoration component! :christmas_tree:

This component includes three flairs:

  1. Christmas Lights
  2. Christmas Hats
  3. Christmas Decoration Image

Each flair can be individually enabled/disabled via theme settings. For Christmas Decoration Image there is also a setting to invert color for forum with Dark theme.

The Christmas lights were inspired from @Canapin’s ideas here.

Merry Christmas! :santa:

24 Likes

Very nice! One small thing - it doesn’t seem like the ‘enable decoration image’ is making any difference. I think it might need an if statement in the SCSS?

9 Likes

Thanks for bringing this in my notice! I’ve pushed a fix now. :slight_smile:

7 Likes

This is great, thanks. Much easier as a theme component than a theme.

The hats worked immediately but I had to fiddle around to get the lights to work - e.g. ticked the enable/disable boxes (though not sure that is what made it work) and restarted the iOS Hub app - but I guess that’s realistic for lights :slight_smile:

3 Likes

Glad you liked it! :slight_smile:

That is weird. I just checked installing the component (again) on theme-creator and it worked on first try. Let me know if the issue persists.

2 Likes

It’s all working now. Maybe it was something to do with caching - the avatars being updated sooner than the menu bar. “Caching” is a good catch-all excuse as I don’t understand it.

2 Likes

Hmm, perhaps mods could enable this component here on meta to make sure it is working…

1 Like

In my discourse, hat and light works fine, however the decoration image doesn’t shows. I have no idea why this will happen.

1 Like

If it helps, the decoration only shows up on desktop, on the top left and top right.

1 Like

Yes I know but there is nothing when I view in desktop.

1 Like

The decoration image shows up when the minimum screen width is 1450px. Are you viewing the site on a small monitor or a laptop?

1 Like

oh. I try that on my 2k display monitor so that works. Now I’m using my Lenovo Yoga Duet(kind of like Microsoft Surface) so that disappear. However is that possible to display it on small monitor or a laptop?

1 Like

It will be a shame that laptop user can’t see the bell…I love that. That stands for Christmas.

1 Like

You can fork the theme and tweak screen width settings.

1 Like

Cool! I will try that! Thanks for your help!

1 Like

If anyone have other components that shows up before the decorations, you could try to add this CSS to force lights to be first:


#main-container > * {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#main-container .lightrope {
  order: -1;
}

(this might break other integrations, so test thoroughly )

3 Likes