Christmas hats!

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개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

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

32개의 좋아요

Haha

that looks kinda funny (and cool!)

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

Fantastic! Thanks for getting this working. :smiling_face_with_sunglasses:

3개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

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

1개의 좋아요

음, 기존 CSS가 데스크톱 Topics에는 더 이상 작동하지 않는 것 같습니다. 하지만 업데이트가 있습니다:

$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;
}

이건 데스크톱과 모바일 모두에 적용되는 범용적인 방식이라 좋습니다.

하지만 아마도 패키징된 Theme Components 중 하나를 사용하시길 원하실 겁니다…

4개의 좋아요

감사합니다!
필요한 테두리를 추가한 제 PNG 변형 버전입니다.


다음과 같이 보입니다:
изображение

4개의 좋아요