Christmas Decoration Component šŸŽ„

Theme component
1

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

Screenshot 2020-12-21 at 11.48.08 PM
Screenshot 2020-12-21 at 11.48.08 PM3814Ɨ1334 365 KB

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.

Screenshot 2020-12-21 at 11.46.41 PM
Screenshot 2020-12-21 at 11.46.41 PM3810Ɨ1044 256 KB

The Christmas lights were inspired from @Canapinā€™s ideas here.

Merry Christmas! :santa:
:sunglasses: Preview Preview on theme creator
:link: Github Repo discourse-christmas-decorations
:hammer_and_wrench: Install Guide How to install a theme or theme component
47 Likes
2

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
3

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

7 Likes
4

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
5

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
6

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
7

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

1 Like
12

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
13

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

1 Like
14

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

1 Like
15

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
16

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
17

It will be a shame that laptop user canā€™t see the bellā€¦I love that. That stands for Christmas.

1 Like
18

You can fork the theme and tweak screen width settings.

1 Like
19

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

1 Like
20

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 )

4 Likes
21

Can I change the colors of the lights?

2 Likes
22

Hat not showing in posts.

2 Likes
23

@meghna This is fantastic!

ā€œChristmas Decoration Imageā€ didnā€™t work for me.

Is there a way to change the light colors? Iā€™m playing with the CSS, but not having any luck.

1 Like
24

Looks like it will add a 2nd hat on the emoji (at top right user menu) when the user set a user-status

image

2 Likes