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:

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


(Dave Higgins) #6

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


(cpradio) #7

@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.


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

Haha

that looks kinda funny (and cool!)

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


(Dave Higgins) #9

Fantastic! Thanks for getting this working. :sunglasses:


#10

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
#11

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;

#12

Doesn’t the theme component already do this?


#13

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


#14

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


#15

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?


#16

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?


#17

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.


#18

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