Santa-hat on avatar corners... or whatever you want
#1
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:
Code:
<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
Code:
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
.png   small_sh.png (Size: 3.57 KB / Downloads: 25) (uploaded in the MYBB_ROOT/images/ directory)

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

Code:
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"
   
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)