Christmas hats component

Customization Theme component

AI-generated summary

The discussion revolves around a Christmas hats component for Discourse forums. barryvan introduced the component, which adds festive hats to user avatars. The component is available on GitHub and can be installed as a theme component.

Users have reported varying levels of success with the component, including issues with mobile compatibility. Jason3 shared a modified version of the component that works on mobile and allows users to choose from multiple hat designs.

Some users have requested additional features, such as the ability to upload custom images or target specific users or groups with the hats. puchal asked about uploading custom images, and anon48433008 provided a solution by changing the URL of the image.

Other issues reported include an undefined variable error in the admin panel and the hats not displaying correctly on certain themes. frold shared a solution to a similar error in a different theme component.

The discussion also touches on the topic of user opt-out options, with Sailsman63 requesting a way to opt out of the Christmas hats due to finding the holiday offensive.

Overall, the Christmas hats component is a fun and festive addition to Discourse forums, but may require some tweaking and customization to work correctly for all users.

1

As Christmas approaches, you may want to add a bit of festive flair to your forum. So I present a (very simple) Christmas hats theme:

image
image138×383 20.7 KB
image
image104×122 5.81 KB

A couple of notes:

  • This theme assumes list avatars are 25x25 with a 2px border all round; you may need to tweak some of the positioning in the CSS for your avatars.
  • It also assumes that thread avatars are 64x64 with a 2px border all round; again, tweak the positioning as you see fit.
  • To avoid excessive festiveness, not all avatars in lists will be bedecked with Christmas cheer, but once you open up a thread, everyone is part of the fun.

(Aside: it looks like I wasn’t the first to think of this!)

Enjoy!
:sunglasses: Preview Theme Creator navigate to the latest / top pages or visit a topic page
:link: Github Repo Discourse-Christmas-Hats
:hammer_and_wrench: Install Guide How to install a theme or theme component
「いいね！」 47
:santa: Santa, a Christmas theme for Discourse
Share your Discourse Christmas decorations!
Discourse snowing effect?
Holiday Theme Recommendations
2019: The Year in Review
2

how to “install” it?

3

:wink:

「いいね！」 5
4

Is it possible to add only hats to my current themes?

5

Yep! You can add it as a “theme component” to your existing themes. This is how I’m using it.

「いいね！」 4
6

Works like a charm, thank you!

「いいね！」 1
7

is it possible to put the hat on a especial user? or on users of a especial group?

「いいね！」 2
9

Is it still possible to use .dcstyle.json for components? If not we should get this fixed ASAP - Christmas hats all round!

「いいね！」 4
10

Yes, that’s still the format you get when you export a theme / component from the admin. There are two options to get this component up to date.

  1. directly edit the file to add the component flag.
  2. import the component, convert it, then export it again.

Either of those options will work to ensure that the component gets imported as a… well… component.

「いいね！」 4
11

this is a great component. i was wondering, is there a way to add turkey wings to the profile pictures for thanksgiving?

「いいね！」 2
12

Sure, just prepare a PNG or gif with transparency, upload it and alter the CSS so that it refers to your image.

「いいね！」 6
13

thank you for your help, my forums are loving all the Christmas themes and hat components.
thank you for the great component to work off of, its awesome

image
image162×242 21 KB

( is there anyway to add a gif instead of a pic? i would love to add flashing lights around profile pics )

「いいね！」 2
14

Sure, GIFs support transparency. If you can make it and align it then it should work fine AFAIK.

「いいね！」 6
15

it works absolutely perfect, thank you, my forums are filled with so much Holiday awesomeness, thank you

「いいね！」 5
16

Is anybody up for updating this to get it working on mobile?

17

this works on mobile on my site.
i’ve changed it so there are 4 different type of hats the users can choose from

it works great

make sure you have it installed under “mobile”

image
image694×179 7.93 KB

and heres the css code i use

.topic-avatar {
  position: relative;
}

.topic-avatar > a::after {
  content: "";
  background-image: url($elf);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: -68%;
  left: -27%;
  width: 130%;
  height: 100%;
}

.topic-post:nth-of-type(2n) .topic-avatar > a::after {
  transform: rotate(-5deg) translateX(-4px);
}

.topic-post:nth-of-type(5n) .topic-avatar > a::after {
  transform: rotate(5deg) translateX(4px);
}

.topic-post:nth-of-type(3n) .topic-avatar > a::after {
  transform: scaleX(-1) rotate(5deg) translateX(-8px);
}

.topic-list .posters > a.latest {
  position: relative;
}

.topic-list .posters > a.latest::after {
  content: "";
  background-image: url($elf);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: -14px;
  left: -5px;
  width: 32px;
  height: 24px;
}

.topic-list tr:nth-of-type(3n) .posters > a.latest::after {
  transform: scaleX(-1);
  left: 2px;
}
「いいね！」 4
18

Odd. I have just installed the component from the GitHub repo, enabled it in my theme, and Santa hats show up on Desktop but not on mobile for me.

Also, I tried viewing the demo with the same results.

Edit: I’m on iOS. Perhaps it’s device specific?

19

i’m on IOS. i think if you install from GitHub, it installs only on desktop, you need to copy and paste and add it under “mobile”

「いいね！」 2
20

Ideally someone could update the component to use Common instead of Desktop (so it applies to both automatically)

「いいね！」 1
21

Thanks for the help, I hadn’t read too carefully, and I’m not familiar with themes/components yet, so I was expecting it to “just work.” I’ll give it a shot with your instructions.

Yeah, that’d be nice. It’s a bit beyond my ability at the moment, I’m afraid, or I’d try to contribute back in that way.

「いいね！」 1