Articles
If you still have questions after consulting our articles, please post to our service and support forum.
Article List
Templating FuzzyMonkey.net Scripts
An explanation of our templating method.

v. 1.0 by Erin Spiceland

Table of Contents

Introduction
Explanation
Examples
Working Examples
Introduction
A quick google will probably return a list a mile long of people who offer scripts that do what you need done, but how many of those scripts hard-code in a simple, intuitive way for you to customize the look of that script to match your site? That's where we come in. FuzzyMonkey.net implements in all its scripts a simple way to plug each script into a common template, creating a fusion of the look you have created for your website with the functionality of our free scripts. This document exists to make it even easier for you to use that templating.
Explanation
You can think of all our scripts of simple modules that fit perfectly into your plan for your website. Basically, you create a normal HTML file that fits the rest of your webpages. You leave our scripts a placeholder to put the content that it generates. This way, you can even use the same template file any of our scripts and they will automatically match your site. You don't have to edit any of our code.

A common way to create a template is to take one of your existing webpages and remove the content and replace it with our special tag. Create an html page with the header, footer, or sidebar you want. You can specify background images too. Then, wherever you want the code from our script to be placed, put this tag:

<!-- content -->

Our scripts look for this tag and replace it with the html code that our scripts generate. The result is a great looking, balanced page in which our scripts fit into the theme of your site. The default template that comes with all of our scripts is usually just a blank page, with <html> and <body> tags. It is named "template.html." Here are some examples on how to create this html page to work with our scripts.
Examples
The example that comes with our scripts is usually just a blank html page named "template.html." Open it up, and you'll find the following html code. This code may vary from script to script.

<html>
<head>
</head>
<body>

<!-- content -->

</body>
</html>


You can turn this code into whatever you want! Here is another example:

<html>
<head>
<title>Katie's Website ..::.. Guestbook</title>
</head>
<body bgcolor=#ddddff>
<center><font face=verdana color=blue size=5>Welcome to Katie's Place!</font><br>
<font face=verdana color=blue size=3>Please sign my guestbook so I know
you were here.</font>

<!-- content -->

</center>
</body>
</html>

Here is an example with a header and footer.

<html>
<head>
<title>Katie's Website ..::.. Guestbook</title>
</head>
<body bgcolor=#ddddff>
<center><font face=verdana color=blue size=5>Welcome to Katie's Place!</font><br>
<font face=verdana color=blue size=3>Please sign my guestbook so I know
you were here.</font><br><br>

<!-- content -->

<br>
<font face=verdana color=blue size=2>..:: <a href=>Home</a> ::..:: <a href=>Pictures</a> ::..:: <a href=>Guestbook</a> ::..:: <a href=>Weblog</a> ::..:: <a href=>Links</a> ::..:: <a href=>Calender</a> ::..<br>
This site copyright 2003 Katie.</font>
</center>
</body>
</html>

Here is a more complex example. Notice in this example we have created a table that surrounds the <!-- content --> tag. This can often make your site look contained and organized.

<html>
<head>
<title>fuzzymonkey.net</title>
</head>
<body bgcolor=white>
<table width=99% bgcolor=#879ad3 cellpadding=1 cellspacing=0><tr><td>
<table width=100% bgcolor=white cellspacing=0 cellpadding=12 border=0>
<tr background="http://fuzzymonkey.net/background.jpg">
<td align=left valign=center>
<img src="http://fuzzymonkey.net/fuzzymonkeyshadowsmall.png">
</td>
<td align=left valign=center>
<a href="."><img src="http://fuzzymonkey.net/homeglow.png" border=0 alt="home"></a>
</td>
<td align=left valign=center>
<a href="http://fuzzymonkey.net/software/"><img src="http://fuzzymonkey.net/software.png" border=0 alt="software"></a>
</td>
<td align=left valign=center>
<a href="http://fuzzymonkey.net/webhosting/"><img src="http://fuzzymonkey.net/webhosting.png" border=0 alt="webhosting"></a>
</td>
<td align=left valign=center>
<a href="."><img src="http://fuzzymonkey.net/forum.png" border=0 alt="forum"></a>
</td>
<td align=left valign=center>
<a href="http://fuzzymonkey.net/cgi-bin/buckwheat.cgi"><img src="http://fuzzymonkey.net/contactus.png" border=0 alt="contact us"></a>
</td>
</tr>
<tr>
<td colspan=6>

<!-- content -->

<small>Created by the scripting wizards at fuzzymonkey.net</small>
</td>
</tr>
</table>
</td></tr></table>
<img src="http://fuzzymonkey.net/poweredbygimp.gif" border=0>
<img src="http://fuzzymonkey.net/poweredbymysql.gif" border=0>
<img src="http://fuzzymonkey.net/poweredbyvi.gif" border=0>
</body>
</html>

Our last example shows a sidebar. This is easily accomplished by creating a table in our template with two cells in one row. In the first cell, we put the html code for our sidebar. In the second cell, we put our <!-- content --> tag. That way, the output html of the script gets inserted into the second cell, and the script and the sidebar end up right next to each other. I have highlighted the two cell tags in green.

<html>
<head>
<title>fuzzymonkey.net</title>
<link rel="stylesheet" type="text/css" href="http://fuzzymonkey.net/style.css">
</head>
<body bgcolor=white style="font-family: Verdana;">
<table width=800 bgcolor=#879ad3 cellpadding=0 cellspacing=0 border=0><tr><td>
<table width=100% bgcolor=white cellspacing=0 cellpadding=0 border=0 background="http://www.yourserver.com/background.jpg">
<tr>
<td align=left valign=top colspan=1>
<a href="http://www.yourserver.com/"><img src="http://www.yourserver.com/small.png" border="0"></a>
</td>
<td align=left valign=top>
<a href="http://www.yourserver.com/"><img src="http://www.yourserver.com/ow.png" border=0 alt="home"></a>
</td>
<td align=left valign=top>
<a href="http://www.yourserver.com/"><img src="http://www.yourserver.com/software.png" border=0 alt="software"></a>
</td>
<td align=left valign=top>
<a href="http://www.yourserver.com/"><img src="http://www.yourserver.com/ing.png" border=0 alt="webhosting"></a>
</td>
<td align=left valign=top>
<a href="http://www.yourserver.com/"><img src="http://www.yourserver.com/orum.png" border=0 alt="articles"></a>
</td>
<td align=left valign=top>
<a href="http://www.yourserver.com/"><img src="http://www.yourserver.com/tus.png" border=0 alt="contact us"></a>
</td>
</tr>
</table>
<table width=100% bgcolor=white cellspacing=0 cellpadding=10 border=0><tr><td>
<table cellspacing=10 cellpadding=10 border=0>
<tr>
<td valign=top align="left">
<!-- BEGIN SIDE TABLE -->
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tr bgcolor="#879Ad4" background="http://www.yourserver.com/bar.jpg">
<td background="http://www.yourserver.com/ubar.jpg" align=left valign=top><img src="http://www.yourserver.com/left.gif"></td>
<td background="http://www.yourserver.com/menubar.jpg" align="center"><font color=white>Webhosting Packages</font></td>
<td background="http://www.yourserver.com/bar.jpg" align=right valign=top><img src="http://www.yourserver.com/right.gif"></td>
</tr>
<tr>
<td colspan="3">
<table bgcolor="#879Ad4" cellspacing="0" cellpadding="1" border="0"><tr><td>
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0"><tr><td>
<center><small><font color="#f77714"><b>FuzzyMonkey <a href="http://www.yourserver.com/">scripts</a> installed free!</b></font></small></center><br>
<a href="http://www.yourserver.com/"><img src="http://www.yourserver.com/100MB.jpg" border="0"></a><br>
<a href="http://www.yourserver.com/"><img src="http://www.yourserver.com/300MB.jpg" border="0"></a><br>
</font>
</td></tr></table>
</td></tr></table>
</td>
</tr>
</table>
<!-- END SIDE TABLE -->
</td>
<td width="99%" valign="top">

<!-- content -->

</td>
</tr>
</table>
</td></tr></table>
<small><font class=text>Created by the scripting wizards at fuzzymonkey.net</small>
</td></tr></table>
<img src="http://www.yourserver.com/poweredbygimp.gif" border=0>
<img src="http://www.yourserver.com/poweredbymysql.gif" border=0>
<img src="http://www.yourserver.com/poweredbyvi.gif" border=0>
</body></html>

Real Life Examples
Here are some real, live, working examples of external sites that use our scripts that have customized them to their own look.

Please note: these sites are real live sites. Please do not use them as a testing ground for comments, etc.

My Photo Gallery
Spiceland Family Photo Gallery
Scott Family Photo Gallery

My Blog
Spiceland Family Blog
Scott Family Blog

My Classifieds
Pasofinos.com Classifieds
FineThings4U.com Classifieds


As you can see, we really have made it easy to customize our scripts to fit your website. So now what? Head over to our scripts page and download some of our great scripts. Not only will they provide the dynamic content that your site needs, but they are so easily customizable that anyone can turn them into a great part of a great site! Email me with corrections, suggestions, etc.

FuzzyMonkey.net
spacer
Get Firefox! Home + Contact Us + Forum + Articles + Software
All Content © FuzzyMonkey 1998-2012.