[For 1.8] Santa-hat on avatar corners... or whatever you want

[Crazycat]

Hello,

Here is a small tutorial to add an image on the top-right corner of the avatars in the posts.

I did that for x-mas but you can use it for anything.

1. Template editing
Source: postbit_avatar
Add a span with a helper class:

<div class="author_avatar"><span class="helper"></span><a href="{$post['profilelink_plain']}"><img src="{$useravatar['image']}" alt="" {$useravatar['width_height']} /></a></div>

2. CSS file
Create a new CSS file, wich must be loaded after the existings. I called it xmas.css

div.author_avatar {
   position: relative;
   margin-top: 10px;
}
div.post.classic .helper {
   right: 40px;
   left: auto;
}
div.post .helper {
   background: url("images/small_sh.png") no-repeat transparent;
   display: block;
   left: 35px;
   right: auto;
   top: -10px;
   position: absolute;
   z-index: 5;
   width: 50px;
   height: 55px;
}

The sizes (top, left, right, width, height) must be changed depending on the picture you use.

The picture I used is     (uploaded in the MYBB_ROOT/images/ directory)

Nota
I've simplified the div.post.classic .helper style, but the complete one is:

div.post.classic .helper {
   background: url("images/small_sh.png") no-repeat transparent;
   display: block;
   left: auto;
   right: 40px;
   top: -10px;
   position: absolute;
   z-index: 5;
   width: 50px;
   height: 55px;
}

Result classic
   

Result "normal"
   

[iturdu]

This is a greate tutorial .

[Sgt Cheesepuffs]

Is there a way to do this with certain groups?

[Eldenroot]

Thank you, really useful

[fahim95]

@Sgt Cheesepuffs yes there is