Christmas hats!

(Dave Higgins) #1

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

(cpradio) #2

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.

(Mark) #3

whoa now, let’s not forget about thanksgiving! lol

(Dave Higgins) #4

I’m in the UK. My wife’s Canadian; we had the True North’s :wink: Thanksgiving already!
Halloween, though…

(Dave Higgins) #5

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:

(Dave Higgins) #6

For Halloween, how about a pumpkin surprise if you hover over your own avatar for a second!

(cpradio) #7


Here you go (shout out to sama74 from SP who helped get this going)

  1. Upload this image to your Staff > Assets topic
  2. Go to Admin > Customize > CSS
#current-user div {
  position: relative;
#current-user div::after {
  position: absolute;
  content: '';
  display: block;
  left: -8px;
  width: 45px;
  height: 45px;
  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.

Indicating user experience/reputation on the avatar
Cakeday! Celebrating birthdays and anniversaries


that looks kinda funny (and cool!)

maybe a turkey hat for thanksgiving? ¯_(ツ)_/¯

(Dave Higgins) #9

Fantastic! Thanks for getting this working. :sunglasses:


You are a master @cpradio … you rocks dude.
Thanks very much! This tutorial must be moved to #howto category I think. :stuck_out_tongue:
Or maybe tagged as #css or maybe new tag #xmas ?

cc. @codinghorror

Christmas hats component

Thanks for this

You can also add to avatars within Topics, of course, adding (for Desktop):


.topic-avatar > a::after {
  position: absolute;
  content: '';
  display: block;
  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:

  left: -24px;


Doesn’t the theme component already do this?


Have you used it? Didn’t change them within Topic for me


I’m testing it. It appears to work in topics, yes, but not in mobile at all.


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?


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?


I think I confused things. To clarify, I’m referring to using the theme component linked above, that you can find over here:

I’m guessing that’s different code than this topic, and hence the differences.


got it yes, and thanks for the link :wink: