Forum Home Enhancements - Affiliate Box - Scrolling and Fading Affiliate Buttons

Keywords: affiliate, affiliates, partner, partners, scrolling box, fading images

Update: XHTML VALID NOW!
There are more template edits guys, sorry. This will fix xhtml errors.
For those that use TMS, you won't have any template edits.
Also, marquee has been removed due to the xhtml errors. If you don't care about being xhtml valid, I'll explain how to get your marquee back.

Features:
Adds an affiliate box in "What's Going On?"
Collapsible box
Images are faded and they light up when you scroll over them


Live Demo: LayeredGFX - Sorry, I've moved my affiliates to an affiliates page so live demo doesn't work.



Install instructions for TMS users:
Upload product
[optional] If you want the topsites to show, go into TMS > Affiliates and FORUMHOME: Add topsite box, set active: YES.


Install instructions for Non-TMS users:

Go to Styles & Templates > Style Manager > Edit Templates
Choose Forum Home Templates > Forumhome

Find:

<if condition="$show['birthdays']">
<!-- today's birthdays -->

Add above:

<!-- insert affiliate box -->

OPTIONAL: To add the topsites, add below <!-- insert affiliate box -->:

<!-- topsitebox -->

Choose headinclude template.
Find:

<!-- / CSS Stylesheet -->

Add above:

<style type="text/css">
.imgfade{filter:alpha(opacity=30); -moz-opacity:0.5;margin-left:3px}
.imgfull{filter:alpha(opacity=100); -moz-opacity:1;margin-left:3px}
</style>

You're done!



To add a site, go to Styles & Templates > Style Manager > Edit Templates > Affiliates and find affiliate_sites (topsite links are found in affiliate_topsite_sites). In there, you can add this code:

<a href="SITE LINK" target="_blank" ><img class="imgfade" onmouseover="this.className='imgfull'" onmouseout="this.className='imgfade'" src="IMAGE LINK" alt="ALT TEXT/DESCRIPTION/SITE TITLE HERE" border="0" /></a>

The affiliates phrase is affiliate_sites.
The topsite phase is topsites.


For those still interested in marquee, you can add this above your first affiliate/site/link:
<marquee width="100%" valign="center" direction="left" scrolldelay="2" scrollamount="1.5" onmouseover="this.stop()" onmouseout="this.start()">

And add this below your last affiliate/site/link:
</marquee>


Updates
July-16 2007 - Added products for affiliate + topsites and affiliate + topsites marquee as requested and as shown on my site.

v1.1 August-9 2007:
-Fixed xhtml problems
-Added TMS support
-Moved template out of forumhome
-Added more templates to make things easier
-Grouped the templates
-Cached the templates
-Removed marquee from being installed. Can add manually.

[l SKN l CHRIS]

much love

[TheWhite]

cool mod, just need to know how can i center the minibanners cause i don't like the empty space at the end

[Hornstar]

Thanks, this looks real nice, thanks for sharing, I might install this shortly.

[FreshFroot]

Interesting.. a cooler affliate box compared to a few others.. will have to try it out.

[TheWhite]

it looks great, i changed the size to make it look nicer and it's so simple to handle but i'd like to know is it board intensive using gifs instead of jpgs?

[RvG2]

the images are so small... i don't think so it will be add load to server.

[stigz]

hi i installed this great affiliates box but i was wondering how can i add 2 like you have on your forum? coz i want one for partners and one for topsites. also how can i changed the title of the box? from affiliates to topsite?

[AzzidReign]

Originally Posted by TheWhite

cool mod, just need to know how can i center the minibanners cause i don't like the empty space at the end

Go to the forumhome_affiliate_sites template. Find <div>, replace with <div align="center">

That should work Maybe you should get more affiliates lol j/p

Originally Posted by TheWhite

it looks great, i changed the size to make it look nicer and it's so simple to handle but i'd like to know is it board intensive using gifs instead of jpgs?

The images aren't really "board intensive", but if you have a large animated .gif file, then your users will probably see that the page loads rather slow compared to before.

Originally Posted by stigz

hi i installed this great affiliates box but i was wondering how can i add 2 like you have on your forum? coz i want one for partners and one for topsites. also how can i changed the title of the box? from affiliates to topsite?

I'll go ahead an add another product for this, but to do this manually, scroll to the very bottom and paste this code:

<!-- Begin Topsites -->
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_topsites')"><img id="collapseimg_forumhome_topsites" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_topsites].gif" alt="" border="0" /></a>
            Topsites - Vote for us!
           </td>
	</tr>
</tbody>

<tbody id="collapseobj_forumhome_topsites" style="$vbcollapse[collapseobj_forumhome_topsites]">
	<tr>
		<td class="alt2"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="" border="0" /></td>
		<td class="alt1" width="100%"><div class="smallfont">
 <style>
.imgfade{filter:alpha(opacity=30); -moz-opacity:0.5;margin-left:3px}
.imgfull{filter:alpha(opacity=100); -moz-opacity:1;margin-left:3px}
</style>
<div>
<!-- Begin Links -->

YOUR LINKS GO HERE - Check out the original topic on how to add sites.

<!-- End Links -->
</div></td>
</tr>
</tbody>
<!-- End Topsites -->

I've bolded the line if you'd like to edit the "title" of it. It's currently set to "Topsites - Vote for us!".

If you'd like a topsite to sign up to, here's mine: http://www.se7ensins.com/TopSites/


Thanks for all the wonderful comments guys! I appreciate it

[nyqnzguju]

nice one will try it today

[TheWhite]

Thanks man, this is a highly reccomended hack