1. 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?

Discussion in 'Styling and Customization Questions' started by ineedhelp, Dec 4, 2011.

  1. ineedhelp

    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.
     
  2. Shelley

    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.
     
  3. ChemicalKicks

    ChemicalKicks Well-Known Member

    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.
     
  4. ineedhelp

    ineedhelp Well-Known Member

    What's a GIMP and how can i get it and use it - thanks?
     
  5. ChemicalKicks

    ChemicalKicks Well-Known Member

    :)

    http://www.gimp.org/

    There's loads of tutorials on how to use it, I certainly couldn't explain it because I'm just learning myself.
     
  6. Chimpie

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

    ineedhelp Well-Known Member

    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?
     
  8. Shelley

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

    Attached Files:

    Sunka, Alien, tijokurian2010 and 11 others like this.
  9. ineedhelp

    ineedhelp Well-Known Member

    Wow, thanks!

    It's Ideal!
     
  10. Shelley

    Shelley Well-Known Member

    I was going for a santas hat initially but settled for snow and christmas balls.

    christmas-balls.png
     
    Vicros, Lost, wickedstangs and 2 others like this.
  11. ineedhelp

    ineedhelp Well-Known Member

    Oh i like them - can u send me the image for what you have please?
     
  12. Dodgeboard

    Dodgeboard Well-Known Member

    Worked perfectly. Thanks Shelley!
     
  13. Shelley

    Shelley Well-Known Member

    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.
     
  14. ineedhelp

    ineedhelp Well-Known Member

    ^^^^^^^Thanks!
     
  15. Shelley

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

    Attached Files:

  16. ineedhelp

    ineedhelp Well-Known Member

    I've done as described above, the bells show up but not the snow ?
     
  17. Shelley

    Shelley Well-Known Member

    Capitalise the P in "@imagePath" see if that makes any difference i just corrected it in my post but unsure whether not capitalising it would have caused it not to show.
     
    Vicros likes this.
  18. ineedhelp

    ineedhelp Well-Known Member

    ^^^^^All done and looking good - thanks, it was the P :D
     
    Shelley likes this.
  19. Shelley

    Shelley Well-Known Member

    Here's another image for those preferring stripey balls (that just doesn't sound right). Image in the attachment and preview below.

    Adjust the background: to reflect the new title from this post.

    stripey-xmas-ball-preview.png

     

    Attached Files:

    tijokurian2010, Vicros, Lost and 3 others like this.
  20. ineedhelp

    ineedhelp Well-Known Member

    Do you do any other mods/add-ons?
     

Share This Page