Creating an affiliate page on your site

Posted 08-24-2009 at 09:54 PM by Mikey

Okay, so here is a little template edit/hack I designed/thought up, that will add an official looking affiliates page to your forum.

Firstly, you'll need to go to the AdminCP -> Styles & Templates -> YourSkin* -> Add New Template, we'll name it "custom_Affiliates" (note the custom_ and the capital "A", these are very important.)

In your new template, copypaste the contents of the "GENERIC_SHELL" template. Which is as follows:

HTML Code:

$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]" id="vbulletin_html">
<head>
$headinclude
<title>$vboptions[bbtitle] - Affiliates</title>
</head>
<body>
$header
$navbar

$HTML

$footer
</body>
</html>

Now, heres the cool part, see that $HTML, up there in the template? Thats what you want to change in your new template.

so, here goes, find:

HTML Code:

$HTML

and replace it with:

HTML Code:

<div class="spacer"></div>



<div class="spacer"></div>

<div align="center">

<table class="tborder" border="0" cellpadding="6" cellspacing="1" width="95%">
<tbody>
<tr>
		<td class="tcat" colspan="4">Affiliates</td>
	</tr>
</tbody>
<tbody>
<tr>


<center>
<td class="alt2" width="5%"><img title="Affiliates" src="images/Aff1.png" alt="Affiliates" border="0"></td>
<td class="alt1"><div class="smallfont">

<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>

</div></td>
<td class="alt2" width="5%"><img title="Affiliates" src="images/Aff2.png" alt="Affiliates" border="0"></td>
<td class="alt1"><div class="smallfont">

<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>
<a href="#" target="_blank" title="Your Link Here">Your Link Here</a>

</div></td>

	</tr>
</tbody>
</table>
<a href="http://parlancia.com"><div class="smallfont">Affiliates Page created by Mad Mikey</a></div>
</div>

Then, find two images of your own choosing, name them Aff1 and Aff2, (and make sure that they are *.png's) to http://yoursite.com/yourforumdir*/images (if you don't have a forum directory, upload to /images).

This should result in a page like this:

Image: http://i43.tinypic.com/2lxz76x.png

LIVE DEMO

Now, we add a link to it, where people can click it, so lets add a link to the navbar, shall we?

so, go to AdminCP -> Styles & Templates -> YourSkin* -> Navigation & Breadcrumb Templates -> navbar

find:

HTML Code:

<td class="vbmenu_control"><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></td>

Add below:

HTML Code:

<td class="vbmenu_control"><a href="misc.php?do=page&template=Affiliates"><abbr title="visit our affiliates today, click here!">Affiliates</abbr></a></td>

Now there should be a link on your navbar called "Affiliates" and when you hover your mouse over it, it will say in a little popup hoverbox thingy (yes, I know, that name is too awesome) "visit our affiliates today, click here!"... Feel free to customise that.

Just customise the template to your liking now, so, lets be sure, here is how the tag works:

Code:

HTTP://YOUR LINK GOES HERE.COM" target="_blank" title="THIS IS WHAT VISITORS WITHOUT IMAGES ENABLED WILL SEE">This is the link that people click to access your affiliates site.

So, your finished template will look like this:

HTML Code:

$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]" id="vbulletin_html">
<head>
$headinclude
<title>Affiliates - $vboptions[bbtitle]</title>
</head>
<body>
$header
$navbar

<div class="spacer"></div>

<div class="spacer"></div>

<div align="center">

<table class="tborder" border="0" cellpadding="6" cellspacing="1" width="95%">
<tbody>
<tr>
		<td class="tcat" colspan="4">Affiliates</td>
	</tr>
</tbody>
<tbody>
<tr>


<center>
<td class="alt2" width="5%"><img title="Affiliates" src="images/Aff1.jpg" alt="Affiliates" border="0" WIDTH="80" HEIGHT="80"></td>
<td class="alt1"><div class="smallfont">

<a href="index.php" target="_blank" title="Parlancia Forums">Parlancia Forums</a>
<a href="http://therogueforums.com" target="_blank" title="The Rogue Forums">The Rogue Forums</a>
<a href="http://gamelair.com" target="_blank" title="GameLair">Gamelair</a>
<a href="http://zeroboards.net" target="_blank" title="ZeroBoards">ZeroBoards</a>

</div></td>
<td class="alt2" width="5%"><img title="Affiliates" src="images/Aff2.jpg" alt="Affiliates" border="0" WIDTH="80" HEIGHT="80"></td>
<td class="alt1"><div class="smallfont">

<a href="http://s1.zetaboards.com/DeviousTyrantRP" target="_blank" title="Devious Tyrant RP">Devious Tyrant RP</a>
<a href="http://www.foxhound-clan.com/" target="_blank" title="Foxhound">Foxhound</a>
<a href="http://www.davidalphin.com" target="_blank" title="David Alphin Forums">David Alphin Graphics</a>
<a href="http://www.mindtwistforums.com/" target="_blank" title="Mind Twist Forums">Mind Twist Forums</a>

</div></td>

	</tr>
</tbody>
</table>

</div>
<a href="http://parlancia.com"><div class="smallfont">Affiliates Page created by Mad Mikey</a></div>

$footer
</body>
</html>

Woot, All finished! you can access your finished poage from this link: http://yoursite.com/yourforumdir/misc.php?do=page&template=Affiliates

And you're all done =D

Wow, long read.

Creating an affiliate page on your site

Comments