Christmas hats!

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 :wink: 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:

http://www.clipartkid.com/christmas-hat-cliparts/

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

3 Likes

@precessor

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;
  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. :sunglasses:

3 Likes

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

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.

2 Likes

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

2 Likes

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 …

5 Likes

Many thanks!
here my variant of png (with necessary borders)
santa_100
Looks like:
изображение

5 Likes

The theme component mentioned above by jtbayly completely stopped working on my site for some reason, I removed it and added this one here and it’s working great. My only question is do you know how to make the hat alternate sides, that’s one thing the theme component had it doing for every-other avatar. I know absolutely nothing about CSS other than how to post it lol. This is the code that one used

https://github.com/barryvan/discourse-christmas-hats/blob/master/desktop/desktop.scss

I’m assuming it has something to do with the "rotate’ lines but I’ve tried to add that after your working code in various combinations and no go

4 Likes