How do I add a santa hat to avatars?

ineedhelp

Well-known member
Is it possible to add a santa's hat to the top right of member Avatars ?

If so, can someone tell me the code for it, thanks.
 
You could throw something in the extra.css. I'm using snow where your image could be a santas hat.

Code:
.messageUserBlock:before {
    background: url("@imagePath/xenforo/icons/avatar_snow.png") no-repeat scroll 0 0 transparent;
    content: " ";
    display: block;
    height: 25px;
    position: absolute;
    right: 0;
    top: -14px;
    width: 133px;
    z-index: 1;
}
Or you could use the new helper span that was recently introduced.
 
Be kind of nice if it was a tickable option in their settings to add a hat/snow to their avatar. That way the individual member has the choice.

</thinking big>
 
You could throw something in the extra.css. I'm using snow where your image could be a santas hat.

Code:
.messageUserBlock:before {
    background: url("@imagePath/xenforo/icons/avatar_snow.png") no-repeat scroll 0 0 transparent;
    content: " ";
    display: block;
    height: 25px;
    position: absolute;
    right: 0;
    top: -14px;
    width: 133px;
    z-index: 1;
}
Or you could use the new helper span that was recently introduced.
I copied this code and replaced the snow with a santa hat, it didnt display well at all.

Can you show me how well it displays for you, even with the snow or if u can add a hat and upload a pic please?
 
Here you go. not sure this is what you or people want. Preview below and also the code and image. upload the image into your overlay folder and throw the css into extra.css.

You could tinker further by adjusting thesize of the sanatas cap and moving the hat via the top: and left: css.

sanntahat_preview.webp


Code:
.messageUserBlock .helper {
    background: transparent url('@imagePath/xenforo/overlay/santa.png') no-repeat;
    display: block;
    height: 45px;
    left: 70px;
    position: absolute;
    top: -7px;
    width: 123px;
}
 

Attachments

  • santa.webp
    santa.webp
    1.6 KB · Views: 115
Oh i like them - can u send me the image for what you have please?

Sure, give me a couple of minutes to adjust some changes my userinfo block is a tad wider than the default. also, bare in mind, the snow is not part of the helper span but give me a couple of minutes to post both parts snow and balls.
 
To get the snow and christmas balls showing paste the following in your extra.css template. And upload both images in the /overlay folder.

xmas-ball-and-snow.webp


Code:
.messageUserBlock:before {
    background: url("@imagePath/xenforo/overlay/avatar_snow.png") no-repeat scroll 0 0 transparent;
    content: " ";
    display: block;
    height: 25px;
    margin-top: 4px;
    position: absolute;
    right: -4px;
    top: -14px;
    width: 133px;
    z-index: 1;
}
.messageUserBlock .helper {
    background: url("@imagePath/xenforo/overlay/xmasball.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 47px;
    left: 0;
    position: absolute;
    top: 0;
    width: 123px;
}
 

Attachments

  • xmasball.webp
    xmasball.webp
    1.7 KB · Views: 105
  • avatar_snow.webp
    avatar_snow.webp
    1.3 KB · Views: 113
To get the snow and christmas balls showing paste the following in your extra.css template. And upload both images in the /overlay folder.



Code:
.messageUserBlock:before {
    background: url("@imagepath/xenforo/overlay/avatar_snow.png") no-repeat scroll 0 0 transparent;
    content: " ";
    display: block;
    height: 25px;
    margin-top: 4px;
    position: absolute;
    right: -4px;
    top: -14px;
    width: 133px;
    z-index: 1;
}
.messageUserBlock .helper {
    background: url("@imagePath/xenforo/overlay/xmasball.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 47px;
    left: 0;
    position: absolute;
    top: 0;
    width: 123px;
}
I've done as described above, the bells show up but not the snow ?
 
Top Bottom