Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Opacity change on mouseover buttons Details »
Opacity change on mouseover buttons
Mod Version: 1.00, by TygerTyger (Member) TygerTyger is offline
Developer Last Online: Jul 2012 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 3.5.0 Rating: (0 vote - 0 average) Installs: 9
Released: 09 Oct 2005 Last Update: Never Downloads: 9
Not Supported  

Name: Opacity change on mouseover buttons
Description: This will add a 'fade in/fade out' effect to buttons. Not an animation, strictly on/off effect.
Difficulty: Easy
Screenshot: Attached
Demo: http://www.forumwhatever.co.uk/forumdisplay.php?f=9

Why use it instead of an ordinary image mouseover? Well it does involve template changes unfortunately, but the biggest advantage is that it's a browser effect - aside from a few characters in your CSS it will use zero extra bandwidth over a static image. You can apply it to any button you want without having to create a new image, and it also means that you can universally change opacity levels per theme in a couple of seconds from one section of code without having to edit the image.

Opacity levels are controlled from the numbers in the code, you must change all three numbers to the same equivalent level so all browers display the effect the same. 1.0/100 is fully solid, down to 0.01/01 which is most opaque.


Instructions:
AdminCP > Style Manager > YourTheme > Go

Then in your Additional CSS Definitions add the following:


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

If you want to use the effect on inline images such as the 'Go to last post' image, you'll also need to add this:

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

The reason for this is that inline images already have a class assigned and we can't add another, so we combine the class definitions into one - inlineimagefog. For images without an existing class, use fog.

All you have to do is locate the image code in the template that you want to add the effect to, and either add class="fog" or change class="inlineimg" to class="inlineimgfog" where appropriate inside the img tag.

I applied the effect in the demo to last post, first new post, new reply and new thread buttons. The locations for template changes for these are below. You may of course use it on any hyperlinked image you wish.


New thread:

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

New reply:

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

Go to first new post:

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


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

Go to last post:

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


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

Done!

Download Now

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

Screenshots

Click image for larger version

Name:	opacitymouseover.png
Views:	485
Size:	4.5 KB
ID:	35510  

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
Change Forum Cell Colour on Mouseover ZombieAndy vBulletin 3.6 Template Modifications 48 31 Jan 2008 07:08
Change Opacity of Avatar SuperFly vBulletin 3.6 Template Modifications 17 16 Feb 2007 13:10

Comments
  #2  
Old 09 Oct 2005, 16:23
TygerTyger TygerTyger is offline
 
Join Date: Aug 2005
A note on the code:

Due to Internet Explorer and older versions of Mozilla using proprietary opacity code (Yes, Mozilla fanboys must hold their hands up too this time) this will break your CSS W3C compliance. It won't make any difference to the functioning of your page, you just won't be able to say it's compliant.

This is not necessarily the best version of image opacity code, but it is the most compatible. It will work in all current major browsers except Opera (lagging behind somewhat, but when they catch up you should be ready) and should degrade gracefully to around NN4 and IE4 (but don't hold me to it.) although it does mean you can only use it on hyperlinked images. There are other ways of doing this, but you'll lose the effect in some browsers, most notably IE which has the most trouble.

If anyone comes up with more widely compatible CSS I'll update to include it.
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 23:59.

Layout Options | Width: Wide Color: