Show Thread Enhancements - Rounded avatars, profile pictures and attachment thumbnails

Description:
Rounded Avatar & Image Effects allows you to add rounded corners (and also shading and shadow) to avatars and images on your forums. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+.

This modification is a nice addition to all of you, who want your forums to have a nice Web2.0 effect.

Installation:
1. Upload the attached corner.js to your clientscript directory

2. In your header template, find:

<!-- content table -->

and add this below

<script type="text/javascript" src="clientscript/corner.js"></script>

3. In your postbit_legacy template, find

<div class="smallfont">
                    &nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
                </div>

replace it with

                <div class="smallfont">
                    &nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]"  class="corner iradius10" alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
                </div>

Finished.

Note that you can alter the javascript classes to suit your needs. If you want a shadow in your avatars/profile pics you may add ishadowXX to the class, so it may become: class="corner iradius10 ishadow25".
It is very flexible and you can tweak it as much as you want.

v.1.01 added rounded effects for attachment thumbnails
v.1.0 Initial release

Credits for this modification go out to CVI Lab for the original javascript. I just made it to work for vBulletin

Enjoy,
Val.

[valdet]

Here are the additional changes for postbit template, memberprofile, memberlist and profile picture


In your postbit template, find

            <if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>

replace it with

            <if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" class="corner iradius10" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>

For rounded avatar in member profile, in MEMBERINFO template, find:

<td><img src="$userinfo[avatarurl]" $userinfo[avatarsize] alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" border="0" style="border:1px solid $stylevar[tborder_bgcolor]; border-top:none" /></td>

and replace it with

<td><img src="$userinfo[avatarurl]" $userinfo[avatarsize] class="corner iradius10" alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" /></td>

For rounded avatar in memberlist, in memberlist_resultsbit template, find this

    <if condition="$show['avatarcol'] AND exec_switch_bg()"><td class="$bgclass"><if condition="$show['avatar']"><img src="$avatarurl" border="0" $avwidth $avheight alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" hspace="4" vspace="4" /><else />&nbsp;</if></td></if>

replace it with:

<if condition="$show['avatarcol'] AND exec_switch_bg()"><td class="$bgclass"><if condition="$show['avatar']"><img src="$avatarurl" class="corner iradius10" $avwidth $avheight alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" /><else />&nbsp;</if></td></if>

For rounded display picture in member profile, in MEMBERINFO template find:

<img src="$userinfo[profilepicurl]" $userinfo[profilepicsize] alt="<phrase 1="$userinfo[username]">$vbphrase[xs_picture]</phrase>" border="0" style="border:1px solid $stylevar[tborder_bgcolor]; border-top:none" />

replace it with:

<img src="$userinfo[profilepicurl]" $userinfo[profilepicsize] class="corner iradius10" alt="<phrase 1="$userinfo[username]">$vbphrase[xs_picture]</phrase>" />

For rounded attachment thumbnails, in postbit_attachmentthumbnail template find this:

class="thumbnail"

as it is the only instance of a class in the template, and replace it with

class="thumbnail corner iradius10"

[Defkalion]

This is very nice, but it has one single problem. It destroys animated avatars.

Thanks.

[iogames]

Originally Posted by Defkalion

This is very nice, but it has one single problem. It destroys animated avatars.

Thanks.

you destroyed my illusions

[Forum Lover]

Ah!! It was almost great... any way to keep those gifs away from these action? I can't leave my animations.

[valdet]

I don't think this javascript works for animated gifs.

But hey someone might find it useful though.

[Defkalion]

Absolutely. I didn't mean to dishonor your work. This hack is very cool, I just don't have use for it, because I have animated gifs as avatars on my website.

[Forum Lover]

Originally Posted by valdet

I don't think this javascript works for animated gifs.

But hey someone might find it useful though.

Chill, sure its handy with jpeg.

[Brandon Sheley]

Nice, I think I'll add this to my forum

Thanks valdet

oh, just seen it's for 3.6, will this work in 3.7 ?

thanks

[erdiyilmaz]

i don't understand how i can shadow it