Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Glossy avatars,profile pictures and attachment thumbnails Details »
Glossy avatars,profile pictures and attachment thumbnails
Mod Version: 1.01, by valdet (Designer) valdet is offline
Developer Last Online: Jun 2020 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 3.6.8 Rating: (4 votes - 4.75 average) Installs: 16
Released: 29 Feb 2008 Last Update: 29 Feb 2008 Downloads: 151
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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and add this below

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



3.
In your postbit_legacy template, find

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

replace it with

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Enjoy,
Val.

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	glossy thread.PNG
Views:	579
Size:	84.7 KB
ID:	76497   Click image for larger version

Name:	glossy memberlist.PNG
Views:	568
Size:	123.7 KB
ID:	76498   Click image for larger version

Name:	glossy profile.jpg
Views:	449
Size:	17.5 KB
ID:	76499  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Show Thread Enhancements Rounded avatars, profile pictures and attachment thumbnails valdet vBulletin 3.6 Template Modifications 32 23 May 2009 13:44

Comments
  #2  
Old 29 Feb 2008, 11:57
valdet's Avatar
valdet valdet is offline
 
Join Date: Feb 2007
Real name: Valdet
Here are the additional changes for postbit template, memberprofile, memberlist and profile picture


In your postbit template, find

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

replace it with

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and replace it with

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

replace it with:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

replace it with:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

For glossy attachment thumbnails, in postbit_attachmentthumbnail template find this:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Last edited by valdet; 02 Mar 2008 at 18:45.
Reply With Quote
  #3  
Old 29 Feb 2008, 12:28
kiril_cvetkov's Avatar
kiril_cvetkov kiril_cvetkov is offline
 
Join Date: Jul 2007
Real name: Kiril Cvetkov
first post.. nice ... thanks
__________________
My modifications -> click here
[CENTER]
Reply With Quote
  #4  
Old 29 Feb 2008, 13:18
shadowevil shadowevil is offline
 
Join Date: Apr 2006
nice mod .... installed

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

Last edited by shadowevil; 29 Feb 2008 at 15:19.
Reply With Quote
  #5  
Old 29 Feb 2008, 14:07
Akademiks's Avatar
Akademiks Akademiks is offline
 
Join Date: Sep 2007
Real name: Fernando
works with animated gif?
Reply With Quote
  #6  
Old 01 Mar 2008, 00:48
iogames's Avatar
iogames iogames is offline
 
Join Date: Jan 2007
Real name: Josh Arcadia
Believe me... this are great but .GIF animated is a Tradition!
__________________
. █│║▌│█│║▌║│█║▌│║║█║
Reply With Quote
  #7  
Old 01 Mar 2008, 21:01
avsunforum avsunforum is offline
 
Join Date: Feb 2008
thanks
Reply With Quote
  #8  
Old 02 Mar 2008, 13:02
syrus.xl's Avatar
syrus.xl syrus.xl is offline
 
Join Date: Jun 2005
Looks cool... But I would have placed the javascript call line in the headinclude template where most vbulletin javascript calls reside.
Reply With Quote
  #9  
Old 02 Mar 2008, 13:31
valdet's Avatar
valdet valdet is offline
 
Join Date: Feb 2007
Real name: Valdet
Originally Posted by syrus.xl View Post
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.
Reply With Quote
  #10  
Old 02 Mar 2008, 13:48
syrus.xl's Avatar
syrus.xl syrus.xl is offline
 
Join Date: Jun 2005
Originally Posted by valdet View Post
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.
Yeah, I noticed... I tried that first!! Simple but entertaining modification though!

Nice work.
Reply With Quote
  #11  
Old 10 Jul 2008, 09:29
montsa007 montsa007 is offline
 
Join Date: Feb 2008
will it work on bbcode images hosted on other sites?
Reply With Quote
  #12  
Old 10 Dec 2008, 11:17
Mazinger's Avatar
Mazinger Mazinger is offline
 
Join Date: Nov 2006
Location: Egypt
Interesting mod, downloaded!
__________________
موقع اخبار مصر واخبار الرياضة والدولار في دليل مصر
Reply With Quote
  #13  
Old 10 Dec 2008, 14:08
Infopro Infopro is offline
 
Join Date: May 2003
Lightbulb

Originally Posted by valdet View Post
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.

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.
Reply With Quote
  #14  
Old 10 Dec 2008, 14:11
Infopro Infopro is offline
 
Join Date: May 2003
Works in firefox but not in IE7 for me here. Just noticed. Might be something on my end.
Reply With Quote
  #15  
Old 12 Dec 2008, 11:46
IoGhost IoGhost is offline
 
Join Date: Oct 2008
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:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 00:24.

Layout Options | Width: Wide Color: