[REQ] Rounded avatars, profile pictures and attachment thumbnails
- Thread starter Mahdi
- Start date
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:
and add this below:
3. In your postbit_legacy template,
find:
replace it with:
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.
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:
PHP:
<!-- content table -->and add this below:
PHP:
<script type="text/javascript" src="clientscript/corner.js"></script>3. In your postbit_legacy template,
find:
PHP:
<div class="smallfont">
<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:
PHP:
<div class="smallfont">
<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.
Please bare in mind I am not a mind reader so if you need an additional post please state the fact when requesting!
(please do not take message as offence)
For Here are the additional changes for postbit template, memberprofile, memberlist and profile picture
In your postbit template, find
replace it with
For rounded avatar in member profile, in MEMBERINFO template, find:
and replace it with
For rounded avatar in memberlist, in memberlist_resultsbit template, find this
replace it with:
For rounded display picture in member profile, in MEMBERINFO template find:
replace it with:
For rounded attachment thumbnails, in postbit_attachmentthumbnail template find this:
as it is the only instance of a class in the template, and replace it with
(please do not take message as offence)
For Here are the additional changes for postbit template, memberprofile, memberlist and profile picture
In your postbit template, find
PHP:
<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
PHP:
<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:
PHP:
<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
PHP:
<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
PHP:
<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 /> </if></td></if>replace it with:
PHP:
<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 /> </if></td></if>For rounded display picture in member profile, in MEMBERINFO template find:
PHP:
<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:
PHP:
<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:
PHP:
class="thumbnail"as it is the only instance of a class in the template, and replace it with
PHP:
class="thumbnail corner iradius10"