Back to vBulletin 3.6 Template Modifications

Glossy avatars,profile pictures and attachment thumbnails
Mod Version: 1.01, by valdet

This modification is in the archives.
vB Version: 3.6.8 Rating: (4 votes - 4.75 average) Installs: 17
Released: 29 Feb 2008 Last Update: 29 Feb 2008 Downloads: 161
Not Supported Template Edits Additional Files  

Description:
Glossy Avatar & Image Effects allows you to add glossy 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 glossy.js to your clientscript directory

2. In your header template, find:
Code:
<!-- content table -->
and add this below
Code:
<script type="text/javascript" src="clientscript/glossy.js"></script>


3.
In your postbit_legacy template, find
Code:
<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
Code:
                <div class="smallfont">
                    &nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]"  class="glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow" 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.
vary the radius by adding iradius followed by the desired radius in percent of half of the smaller picture dimension:

Corner radius class "iradius25" - min=20 max=50 default=25vary the shadow by adding noshadow:

Noshadow class "noshadow" - default=falsevary the background by adding ibgcolor followed by the desired color as hex:

Background color class "ibgcolor" - min=000000 max=ffffff default=0vary the background by adding igradient followed by the desired color as hex:

Gradient color class "igradient" - min=000000 max=ffffff default=0vary the color gradient direction by adding horizontal:

Horizontal gradient class "horizontal" - default=false
It is very flexible and you can tweak it as much as you want.

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


Credits for this modification go out to http://www.netzgesta.de/glossy/ for the original javascript. I just made it to work for vBulletin

Enjoy,
Val.

Download

This modification is archived, downloads are still allowed.

File Type: %1$s glossy avatars.zip (3.5 KB, 168 downloads)

Screenshots

Click image for larger version
Name:	glossy thread.PNG
Views:	589
Size:	84.7 KB
ID:	76497   Click image for larger version
Name:	glossy memberlist.PNG
Views:	578
Size:	123.7 KB
ID:	76498   Click image for larger version
Name:	glossy profile.jpg
Views:	459
Size:	17.5 KB
ID:	76499  

Similar Mods

Show Thread Enhancements Rounded avatars, profile pictures and attachment thumbnails vBulletin 3.6 Template Modifications

vblts.ru supports vBulletin®, 2022-2024