# Christmas hats component
**URL:** https://meta.discourse.org/t/christmas-hats-component/74853
**Category:** Theme component
**Created:** [November 27, 2017, 12:24am UTC](https://meta.discourse.org/t/christmas-hats-component/74853 "2017-11-27T00:24:53Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [November 27, 2017, 12:24am UTC](https://meta.discourse.org/t/christmas-hats-component/74853/1 "2017-11-27T00:24:53Z")
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:
 
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](https://meta.discourse.org/t/christmas-hats/51846/10)!)
Enjoy!
| | | |
| --- | --- | --- |
| 🕶 | **Preview** | [Theme Creator](https://theme-creator.discourse.org/theme/Johani/christmas-hats) navigate to the latest / top pages or visit a topic page |
| 🔗 | **Github Repo** | [Discourse-Christmas-Hats](https://github.com/barryvan/discourse-christmas-hats) |
| 🛠 | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
---
### Author:  [@Tumi](https://meta.discourse.org/u/Tumi)
#### Post date: [November 28, 2017, 5:50pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/2 "2017-11-28T17:50:49Z")
how to “install” it?
---
### Author:  [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [November 28, 2017, 11:34pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/3 "2017-11-28T23:34:38Z")
> [@Tumi](#):
>
> how to “install” it?
> [@Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…
😉
---
### Author:  [@Pawel\_Kosiorek](https://meta.discourse.org/u/Pawel_Kosiorek)
#### Post date: [December 6, 2017, 4:24pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/4 "2017-12-06T16:24:09Z")
Is it possible to add only hats to my current themes?
---
### Author:  [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [December 6, 2017, 9:48pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/5 "2017-12-06T21:48:34Z")
Yep! You can add it as a “theme component” to your existing themes. This is how I’m using it.
---
### Author:  [@Pawel\_Kosiorek](https://meta.discourse.org/u/Pawel_Kosiorek)
#### Post date: [December 7, 2017, 12:12pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/6 "2017-12-07T12:12:51Z")
Works like a charm, thank you!
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [August 26, 2018, 1:54pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/7 "2018-08-26T13:54:13Z")
is it possible to put the hat on a especial user? or on users of a especial group?
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [November 6, 2018, 12:52am UTC](https://meta.discourse.org/t/christmas-hats-component/74853/9 "2018-11-06T00:52:13Z")
Is it still possible to use .dcstyle.json for components? If not we should get this fixed ASAP - Christmas hats all round!
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [November 6, 2018, 9:19am UTC](https://meta.discourse.org/t/christmas-hats-component/74853/10 "2018-11-06T09:19:19Z")
> [@Stephen](#):
>
> Is it still possible to use .dcstyle.json for components?
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.
---
### Author:  [@Jason3](https://meta.discourse.org/u/Jason3)
#### Post date: [November 9, 2018, 8:45pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/11 "2018-11-09T20:45:09Z")
this is a great component. i was wondering, is there a way to add turkey wings to the profile pictures for thanksgiving?
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [November 9, 2018, 8:50pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/12 "2018-11-09T20:50:23Z")
Sure, just prepare a PNG or gif with transparency, upload it and alter the CSS so that it refers to your image.
---
### Author:  [@Jason3](https://meta.discourse.org/u/Jason3)
#### Post date: [December 15, 2018, 11:53pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/13 "2018-12-15T23:53:26Z")
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
( is there anyway to add a gif instead of a pic? i would love to add flashing lights around profile pics )
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [December 16, 2018, 2:09am UTC](https://meta.discourse.org/t/christmas-hats-component/74853/14 "2018-12-16T02:09:09Z")
Sure, GIFs support transparency. If you can make it and align it then it should work fine AFAIK.
---
### Author:  [@Jason3](https://meta.discourse.org/u/Jason3)
#### Post date: [December 16, 2018, 4:54am UTC](https://meta.discourse.org/t/christmas-hats-component/74853/15 "2018-12-16T04:54:05Z")
it works absolutely perfect, thank you, my forums are filled with so much Holiday awesomeness, thank you
---
### Author:  [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [December 19, 2018, 1:08pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/16 "2018-12-19T13:08:45Z")
Is anybody up for updating this to get it working on mobile?
---
### Author:  [@Jason3](https://meta.discourse.org/u/Jason3)
#### Post date: [December 19, 2018, 1:10pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/17 "2018-12-19T13:10:56Z")
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”
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;
}
```
---
### Author:  [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [December 19, 2018, 1:15pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/18 "2018-12-19T13:15:03Z")
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?
---
### Author:  [@Jason3](https://meta.discourse.org/u/Jason3)
#### Post date: [December 19, 2018, 1:16pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/19 "2018-12-19T13:16:13Z")
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”
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [December 19, 2018, 1:17pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/20 "2018-12-19T13:17:27Z")
Ideally someone could update the component to use Common instead of Desktop (so it applies to both automatically)
---
### Author:  [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [December 19, 2018, 1:19pm UTC](https://meta.discourse.org/t/christmas-hats-component/74853/21 "2018-12-19T13:19:53Z")
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.
> [@cpradio](#):
>
> Ideally someone could update the component to use Common instead of Desktop
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.
[Next page](https://meta.discourse.org/t/christmas-hats-component/74853.md?page=2)