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.
 

Shelley

Well-known member
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.
 

Chimpie

Well-known member
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>
 

ineedhelp

Well-known member
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?
 

Shelley

Well-known member
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.png


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.png
    santa.png
    5.3 KB · Views: 108

Shelley

Well-known member
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.
 

Shelley

Well-known member
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.png


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.png
    xmasball.png
    4.5 KB · Views: 98
  • avatar_snow.png
    avatar_snow.png
    4.2 KB · Views: 108

ineedhelp

Well-known member
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