vb.org Archive - Show Thread Enhancements - Glossy avatars,profile pictures and attachment thumbnails

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.6 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=192)

- - Show Thread Enhancements - Glossy avatars,profile pictures and attachment thumbnails (https://vborg.vbsupport.ru/showthread.php?t=171714)

Glossy avatars,profile pictures and attachment thumbnails

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:

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.

Quote:

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 CVI Lab for the original javascript. I just made it to work for vBulletin

Enjoy,
Val.

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

In your postbit template, find

Code:

            <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

Code:

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

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

Code:

<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

Code:

<td><img src="$userinfo[avatarurl]" $userinfo[avatarsize] class="glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow" alt="<phrase 1="$userinfo[username]">$vbphrase[xs_avatar]</phrase>" /></td>

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

Code:

    <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:

Code:

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

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

Code:

<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:

Code:

<img src="$userinfo[profilepicurl]" $userinfo[profilepicsize] class="cglossy ibgcolor00aa00 igradient00aaaa horizontal noshadow" alt="<phrase 1="$userinfo[username]">$vbphrase[xs_picture]</phrase>" />

For glossy attachment thumbnails, in postbit_attachmentthumbnail template find this:

Code:

class="thumbnail"

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

Code:

class="thumbnail glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow"

first post.. nice ... :) thanks

nice mod .... installed

Ps: does this work 3.7.x ????

works with animated gif?

Believe me... this are great but .GIF animated is a Tradition! :(

Looks cool... But I would have placed the javascript call line in the headinclude template where most vbulletin javascript calls reside. :)

Quote:

Originally Posted by syrus.xl (Post 1455078)

Looks cool... But I would have placed the javascript call line in the headinclude template where most vbulletin javascript calls reside. :)

It does not work if you place the javascript in headinclude (<head>...</head>), because this one needs to be included after the <body> tag..

Believe me I tried to place in headinclude and it won't display these effects.

Val. ;)

Quote:

Originally Posted by valdet (Post 1455087)

Yeah, I noticed... I tried that first!! :erm: Simple but entertaining modification though!

Nice work.
:)

will it work on bbcode images hosted on other sites?

Interesting mod, downloaded!

Quote:

Originally Posted by valdet (Post 1455087)

Hmm, works fine for me. Added to the bottom of the headerinclude, last line.

Once this is added, you can basically add it to any image. Find where the image is located in your template and add this right before the alt tag:
class="glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow"

Doesn't matter of the size, but colors will need to be edited to look good. ;)

One last note, I added this to 3.8.0. Forum version shouldn't be a concern with this simple script I don't think.

Works in firefox but not in IE7 for me here. Just noticed. Might be something on my end.

Tested on IE7, FF2, FF3, Opera 9.27, Opera 9.62, Safari 3.2 - works.
My recomendation, replace last two strings in js-file (setup window.onload event) with:

Code:

if (navigator.appName == "Microsoft Internet Explorer")

{

        window.attachEvent('onload', function() { addIEGlossy(); });

}

else

{

        window.addEventListener('load',function OnLoad() { addGlossy(); }, true);

}

And insert code:

Code:

if (isIE) { addIEGlossy(); } else { addGlossy(); }

in "clientscript/vbulletin_quick_edit.js" after

Code:

                else

                {

                        vB_QuickEditor.restore(vB_QuickEditor.ajax.fetch_data(fetch_tags(AJAX.responseXML, 'postbit')[0]), 'tableobj');

                        PostBit_Init(fetch_object('post' + vB_QuickEditor.postid), vB_QuickEditor.postid);

and in "clientscript/vbulletin_quick_reply.js" after

Code:

                                        PostBit_Init(postbit, postbits[i].getAttribute('postid'));

                                }

if you want to keep glossy-effect in "quick-edited" and "qucik-added" posts.

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (18)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (16)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01192 seconds Memory Usage 1,772KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (18)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (16)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: