Opacity change on mouseover buttons
Mod Version: 1.00, by TygerTyger
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:
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:
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:
New reply:
Go to first new post:
Go to last post:
Done!
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:
Code:
/* ***** Opacity 'fog' mouseover hack ***** */
.fog { opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4; }
a:hover .fog { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; }
Code:
/* ***** Opacity 'fog' inline mouseover hack ***** */
.inlineimgfog { vertical-align: middle; opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4; }
a:hover .inlineimgfog { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; }
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:
Code:
FORUMDISPLAY newthread.gif - Line 52 - fog newthread.gif - Line 135 - fog
Code:
SHOWTHREAD reply.gif - Line 25 - fog reply.gif - fog - Line 109 - fog
Code:
THREADBIT firstnew.gif - Line 20 - inlineimgfog firstnew.gif - Line 33 - inlineimgfog
Code:
SHOWTHREAD firstnew.gif - Line 40 - inlineimgfog
Code:
FORUMDISPLAY_ANNOUNCEMENT lastpost.gif - Line 5 - inlineimgfog
Code:
FORUMHOME_LASTPOSTBY lastpost.gif - Line 12 - inlineimgfog lastpost.gif - Line 18 - inlineimgfog
Download
This modification is archived and cannot be downloaded.
Screenshots