[Template] Simple Affiliates Table

[pawl]

Been meaning to post this for a couple of days, finally got round to it. The template below will add a (fairly simple, yet still functional) affiliates table to the bottom of your homepage.

---

Start by heading into your CSS sheet - Admin Panel -> Themes -> Colours & Styles -> Style Sheet

Add this at the very bottom of the sheet;

/* Affiliates Table */
@aff_inner_border: 1px solid @container_inner_border_color;
.aff .content > table > tbody > tr > td { border: @aff_inner_border; border-right-width: 0px; border-bottom-width: 0px; }
.aff .content > table { width: 100%; table-layout: auto; }
.aff .affbanner { padding: 10px; }
.aff .affminibanner { padding: 10px; width: 88px; }
.aff .afflink { padding: 0px 47px 0px 0px; font-size: 80%; text-align: right; }
.aff .marquee img { padding-right: 10px; }



Now, head to your home template - Admin Panel -> Themes -> Layout Templates -> Home

Add this to the very bottom;

<div class="container aff">
<div class="title-bar"><h2>Our Affilliates</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td class="affbanner">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="6" direction="left" width="100%" height="100%" align="center">
<div class="marquee">
<a href="URL TO FORUM" alt="FORUM NAME" target="blank"><img src="MINIBANNER URL" /></a>
<a href="URL TO FORUM" alt="FORUM NAME" target="blank"><img src="MINIBANNER URL" /></a>
<a href="URL TO FORUM" alt="FORUM NAME" target="blank"><img src="MINIBANNER URL" /></a>
</div>
</marquee>
</td>
<td class="affminibanner last">
<img src="URL TO YOUR MINI BANNER" alt="SITE NAME" />
</td>
</tr>
<tr class="last">
<td colspan="2" class="afflink">
<a href="LINK TO YOUR AFFILIATE BOARD/THREAD" target="_blank">Affiliate with YOUR SITE NAME</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

The modifications required are nice and easy;
For each minibanner you want to add, you'll need to edit in the URL to the forum, the forum name and the URL to their minibanner.
You can add in as many of these lines as necessary.

You will also need to edit in your own details; the URL to your minibanner, your site name (there are two of these!) and the link to your affiliate info[/url].
Clicking the minibanner WILL NOT copy the banner code. Maybe in an update, once I work out how to do it. =P


That's it for now though. It's nothing special, but it works. =]

[aRMY83]

Hello Paul...

This is a real nice Affiliate Table which I have over at my second v5 betazone site  and was just wondering if another Affiliate Table could offer direction="left" and direction="right" marquee for the affbanner URL's and the affminibanner would be placed in the center?

[pawl]

You mean a table where your minibanner is in the middle of the row, and there's two lines of affiliate's minibanners moving in opposite directions on both sides of it?

[Former Member]

Hi Paul
I wonder if you could edit the colour yellow to another colour
It's very hard to read as it so bright on the page reading

Steve

[aRMY83]

Jan 5, 2013 16:43:31 GMT -8 pawl said:

You mean a table where your minibanner is in the middle of the row, and there's two lines of affiliate's minibanners moving in opposite directions on both sides of it?

Hello Paul...

That's correct and would really appreciate it.

[pawl]

That better @xsteveuk ? =]

Shouldn't be too hard aRMY83, leave it with me. =]

[pawl]

aRMY83 - try these instead for me, should do what you want. =]

/* Affiliates Table */
@aff_inner_border: 1px solid @container_inner_border_color;
.aff .content > table > tbody > tr > td { border: @aff_inner_border; border-right-width: 0px; border-bottom-width: 0px; }
.aff .content > table { width: 100%; table-layout: auto; }
.aff .affbanner { padding: 10px; }
.aff .affminibanner { padding: 10px; width: 88px; }
.aff .afflink { padding: 0px; font-size: 80%; text-align: center; }
.aff .marquee img { padding-right: 5px; padding-left: 5px; }


<div class="container aff">
<div class="title-bar"><h2>Our Affiliates</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td class="affbanner">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="6" direction="right" width="100%" height="100%" align="center">
<div class="marquee">
<a href="URL TO FORUM" alt="FORUM NAME" target="blank"><img src="MINIBANNER URL" /></a>
<a href="URL TO FORUM" alt="FORUM NAME" target="blank"><img src="MINIBANNER URL" /></a>
<a href="URL TO FORUM" alt="FORUM NAME" target="blank"><img src="MINIBANNER URL" /></a>
</div>
</marquee>
</td>
<td class="affminibanner">
<img src="URL TO YOUR MINI BANNER" alt="SITE NAME" />
</td>
<td class="affbanner last">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="6" direction="left" width="100%" height="100%" align="center">
<div class="marquee">
<a href="URL TO FORUM" alt="FORUM NAME" target="blank"><img src="MINIBANNER URL" /></a>
<a href="URL TO FORUM" alt="FORUM NAME" target="blank"><img src="MINIBANNER URL" /></a>
<a href="URL TO FORUM" alt="FORUM NAME" target="blank"><img src="MINIBANNER URL" /></a>
</div>
</marquee>
</td>
</tr>
<tr class="last">
<td colspan="3" class="afflink">
<a href="LINK TO YOUR AFFILIATE BOARD/THREAD" target="_blank">Affiliate with YOUR SITE NAME</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

[aRMY83]

Thanks Paul and do to the time here, will give it a go tomorrow.

[Former Member]

That's much better thank you - Paul   It was hard to read the bright yellow text

Steve

[aRMY83]

Hello again Paul...

Placed the new mod and seems that it is not quite there, or I may have did something wrong.


This is what I have:

<div class="container aff">
   <div class="title-bar"><h2><center>Our Affiliates</center></h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td class="affbanner">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="6" direction="right" width="100%" height="100%" align="center">
<div class="marquee">
<a href="http://socal.proboards.com" alt="
Socal Codes & Graphics" target="blank"><img src="http://img707.imageshack.us/img707/6857/socalbr2.gif" /></a>
<a href="http://socal.proboards.com" alt="
Socal Codes & Graphics" target="blank"><img src="http://img707.imageshack.us/img707/6857/socalbr2.gif" /></a>
<a href="http://socal.proboards.com" alt="
Socal Codes & Graphics" target="blank"><img src="http://img707.imageshack.us/img707/6857/socalbr2.gif" /></a>
</div>
</marquee>
</td>
<td class="affminibanner">
<img src="http://i1043./b436/army83_2010/aRMY83Staff3.gif" alt="aRMY83 and Staff" />
</td>
<td class="affbanner last">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="6" direction="left" width="100%" height="100%" align="center">
<div class="marquee">
<a href="http://socal.proboards.com" alt="
Socal Codes & Graphics" target="blank"><img src="http://img707.imageshack.us/img707/6857/socalbr2.gif" /></a>
<a href="http://socal.proboards.com" alt="
Socal Codes & Graphics" target="blank"><img src="http://img707.imageshack.us/img707/6857/socalbr2.gif" /></a>
<a href="http://socal.proboards.com" alt="
Socal Codes & Graphics" target="blank"><img src="http://img707.imageshack.us/img707/6857/socalbr2.gif" /></a>
</div>
</marquee>
</td>
</tr>
<tr class="last">
<td colspan="3" class="afflink">
<a href="http://army83two.freemessageboards.com/thread/1888/affiliate-army83-staff?scrollTo=11399&page=1" target="_blank">Affiliate with US</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

and as you can see here:

second v5 betazone test site

the minibanner is not centered.

EDIT: Just realized that it works just fine in IE9 but not centering in Firefox v17. Also, the right side (IE9) affiliate banners appears (marquee) sooner than the left side banners.

[pawl]

Also centered in Chrome. Will turn my other laptop on in a minute and have a look for Fx.

As for the two marquees starting in different places, I think I know why it's doing it, but to be honest I'm now sure how I'd fix it. Will do a bit of searching, unless somebody else knows a way.

[aRMY83]

Hello Paul...

It may be that I only have three affbanners (right and left) marquee'ing and I'm going to add seven more for each side and see if that is the cause.

Back in a few...

[aRMY83]

That is not the problem and it is really out of wack:

army83two.freemessageboards.com/

Will leave it like that until you get a chance to figure out, if possible, to what may be wrong or just a minor mod.

Again, thanks Paul for everything...

[pawl]

I think it will still product the same effect, to be honest. Can't hurt to try though.

Having a look now in Fx - your minibanner starts out centered, and then when the marquee loads (on a slow connection, it's taking a second or two to start, after the page loads) the div moves to the left, which is very odd indeed.

Still not sure how to fix the scrolling difference though - got an idea or two though, leave it with me. =]

[aRMY83]

Hello Paul...

I must admit once more, when I said "out of wack", that was using FF v17 and not IE9 and now viewing it in IE9, it seems to look okay on this end. Just a tad delay, but not that noticeable.

Will leave the 'idea or two' to you.