• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How do I add a santa hat to avatars?

ineedhelp

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

ChemicalKicks

Well-known member
#3
There's no way to do it with a script, I asked my members if they would like their avatar jazzed up and used GIMP to add on the hats.
 

Chimpie

Well-known member
#6
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
#7
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
#8
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

Shelley

Well-known member
#13
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
#15
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

ineedhelp

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