# 圣诞帽子！
**URL:** https://meta.discourse.org/t/christmas-hats/51846
**Category:** General
**Created:** [2016年十月21日 10:05 UTC](https://meta.discourse.org/t/christmas-hats/51846 "2016-10-21T10:05:21Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@precessor](https://meta.discourse.org/u/precessor)
#### Post date: [2016年十月21日 10:05 UTC](https://meta.discourse.org/t/christmas-hats/51846/1 "2016-10-21T10:05:21Z")
How about an “apply Christmas hat” option for Admins!
Could affect each user’s avatar in top-right of page only, or perhaps certain users by a list
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年十月21日 10:23 UTC](https://meta.discourse.org/t/christmas-hats/51846/2 "2016-10-21T10:23:07Z")
Fairly certain you can do this with a CSS customization. If you have a copy of the hat you can paste by itself, I can give it a shot later this morning.
---
### Author:  [@mmuyskens](https://meta.discourse.org/u/mmuyskens)
#### Post date: [2016年十月21日 10:26 UTC](https://meta.discourse.org/t/christmas-hats/51846/3 "2016-10-21T10:26:49Z")
whoa now, let’s not forget about thanksgiving! lol
---
### Author:  [@precessor](https://meta.discourse.org/u/precessor)
#### Post date: [2016年十月21日 10:29 UTC](https://meta.discourse.org/t/christmas-hats/51846/4 "2016-10-21T10:29:40Z")
I’m in the UK. My wife’s Canadian; we had the True North’s 😉 Thanksgiving already!
Halloween, though…
---
### Author:  [@precessor](https://meta.discourse.org/u/precessor)
#### Post date: [2016年十月21日 10:50 UTC](https://meta.discourse.org/t/christmas-hats/51846/5 "2016-10-21T10:50:41Z")
I chopped the one for my example out of someone’s website. I am not sure about the licensing for use of that image.
But here are a load of royalty-free vector images which look great:
> **[FASTPANEL](http://www.clipartsuggest.com/christmas-hat-cliparts/)**
---
### Author:  [@precessor](https://meta.discourse.org/u/precessor)
#### Post date: [2016年十月21日 11:14 UTC](https://meta.discourse.org/t/christmas-hats/51846/6 "2016-10-21T11:14:59Z")
For Halloween, how about a pumpkin surprise if you hover over your own avatar for a second!
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年十月21日 13:11 UTC](https://meta.discourse.org/t/christmas-hats/51846/7 "2016-10-21T13:11:40Z")
@precessor
Here you go (shout out to sama74 from SP who helped get this going)
1. Upload [this image](https://sandbox.cpradio.org/uploads/default/optimized/1X/bc7a8948b080c0ccb41a2aa8d20915e0aba5c8d2_1_446x500.png) to your Staff \> Assets topic
2. Go to Admin \> Customize \> CSS
```plaintext
#current-user div {
position: relative;
}
#current-user div::after {
position: absolute;
content: '';
display: block;
top:-16px;
left: -8px;
width: 45px;
height: 45px;
/* UPDATE THE URL BELOW */
background: url(url_of_christmas_hat_asset) no-repeat center;
background-size: contain;
}
```
Last but not least, make sure the customization is saved and enabled.
---
### Author:  [@HappyDolphin](https://meta.discourse.org/u/HappyDolphin)
#### Post date: [2016年十月21日 15:24 UTC](https://meta.discourse.org/t/christmas-hats/51846/8 "2016-10-21T15:24:51Z")
Haha
that looks kinda funny (and cool!)
maybe a turkey hat for thanksgiving? ¯\_(ツ)\_/¯
---
### Author:  [@precessor](https://meta.discourse.org/u/precessor)
#### Post date: [2016年十月23日 18:27 UTC](https://meta.discourse.org/t/christmas-hats/51846/9 "2016-10-23T18:27:22Z")
Fantastic! Thanks for getting this working. 😎
---
### Author:  [@SidV](https://meta.discourse.org/u/SidV)
#### Post date: [2016年十一月1日 15:02 UTC](https://meta.discourse.org/t/christmas-hats/51846/10 "2016-11-01T15:02:43Z")
> [@cpradio](#):
>
> Here you go
You are a master @cpradio … you rocks dude.
Thanks very much! This tutorial must be moved to #howto category I think. 😛
Or maybe tagged as #css or maybe new tag **#xmas**?
cc. @codinghorror
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2018年十二月19日 11:53 UTC](https://meta.discourse.org/t/christmas-hats/51846/11 "2018-12-19T11:53:08Z")
Thanks for this
You can also add to avatars within Topics, of course, adding (for Desktop):
```plaintext
$url_of_christmas_hat_asset:'my-url';
.topic-avatar > a::after {
position: absolute;
content: '';
display: block;
top:-14px;
left: -24px;
width: 80px;
height: 80px;
background: url($url_of_christmas_hat_asset) no-repeat center;
background-size: contain;
}
```
In my case I defined `$url_of_christmas_hat_asset:'my-url';` at top.
For mobile CSS, just use same but change:
```plaintext
top:-30px;
left: -24px;
```
---
### Author:  [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [2018年十二月19日 13:03 UTC](https://meta.discourse.org/t/christmas-hats/51846/12 "2018-12-19T13:03:45Z")
Doesn’t the theme component already do this?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2018年十二月19日 13:05 UTC](https://meta.discourse.org/t/christmas-hats/51846/13 "2018-12-19T13:05:29Z")
Have you used it? Didn’t change them within Topic for me
---
### Author:  [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [2018年十二月19日 13:06 UTC](https://meta.discourse.org/t/christmas-hats/51846/14 "2018-12-19T13:06:33Z")
I’m testing it. It appears to work in topics, yes, but not in mobile at all.
---
### Author:  [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [2018年十二月19日 13:09 UTC](https://meta.discourse.org/t/christmas-hats/51846/15 "2018-12-19T13:09:56Z")
Maybe I simply misunderstand what you’re talking about? Here’s a screenshot of what I think is “within a Topic” on my test site. Do I have the right place?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2018年十二月19日 13:26 UTC](https://meta.discourse.org/t/christmas-hats/51846/16 "2018-12-19T13:26:19Z")
YMMV, but there are no santa hats rendered for me within Topic view without my additional CSS under Default Theme, neither on mobile nor desktop.
The original CSS only adds a hat top right afaia (as shown in the screenshot provided)
Are you certain you don’t have additional customisations on top of those?
---
### Author:  [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [2018年十二月19日 13:56 UTC](https://meta.discourse.org/t/christmas-hats/51846/17 "2018-12-19T13:56:50Z")
I think I confused things. To clarify, I’m referring to using the theme component linked above, that you can find over here:
> [@Christmas hats component](https://meta.discourse.org/t/christmas-hats-component/74853/22):
>
> the common works good, but once i started changing the pictures, they didn’t fit right and desktop and mobile had to have different settings. but for the santa hats, common works great
I’m guessing that’s different code than this topic, and hence the differences.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2018年十二月19日 13:58 UTC](https://meta.discourse.org/t/christmas-hats/51846/18 "2018-12-19T13:58:14Z")
got it yes, and thanks for the link 😉
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2021年十二月15日 12:01 UTC](https://meta.discourse.org/t/christmas-hats/51846/19 "2021-12-15T12:01:45Z")
好的，看起来旧的 CSS 不再适用于桌面版 Topics 了，但这里有一个更新：
```plaintext
$url_of_christmas_hat_asset:'###my-hat-url###';
.post-avatar::after {
position: absolute;
content: '';
display: block;
top: -30px;
left: -24px;
width: 80px;
height: 80px;
background: url($url_of_christmas_hat_asset) no-repeat center;
background-size: contain;
}
```
这很好，因为现在桌面版和移动版都可以通用了。
但你可能想使用其中一个打包的主题组件……
---
### Author:  [@Ivan\_Rapekas](https://meta.discourse.org/u/Ivan_Rapekas)
#### Post date: [2021年十二月15日 16:54 UTC](https://meta.discourse.org/t/christmas-hats/51846/20 "2021-12-15T16:54:58Z")
非常感谢！
这是我的 PNG 变体（带有必要的边框）
看起来像：
[下一頁](https://meta.discourse.org/t/christmas-hats/51846.md?page=2)