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
7 Likes
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.
5 Likes
whoa now, let’s not forget about thanksgiving! lol
I’m in the UK. My wife’s Canadian; we had the True North’s 
Thanksgiving already!
Halloween, though…
2 Likes
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:
For Halloween, how about a pumpkin surprise if you hover over your own avatar for a second!
3 Likes
Here you go (shout out to sama74 from SP who helped get this going)
- Upload this image to your Staff > Assets topic
- Go to Admin > Customize > CSS
#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.
31 Likes
Haha
that looks kinda funny (and cool!)
maybe a turkey hat for thanksgiving? ¯_(ツ)_/¯
Fantastic! Thanks for getting this working. 
3 Likes
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
2 Likes
Thanks for this
You can also add to avatars within Topics, of course, adding (for Desktop):
$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:
top:-30px;
left: -24px;
1 Like
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.
1 Like
got it yes, and thanks for the link
1 Like
Well, looks like the old CSS doesn’t work for desktop Topics anymore, but here’s an update:
$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;
}
Which is nice, because this is now generic for Desktop & Mobile
But you probably want to use one of the packaged Theme Components …
4 Likes
Many thanks!
here my variant of png (with necessary borders)
Looks like:
4 Likes