The template feature will allow you to have your list look EXACTLY
how you want it to. All you have to do is make up a sample list, replace some
of the HTML with script values, and it will look just like you had it laid out
in your HTML editor.
The only downfall of this template is that it is somewhat complicated. You need
to read this file thoroughly and make sure you understand it all before you attempt
to edit the template. If you have any doubts about it, please use the normal list layout
as it is much easier to set up.
As far as we know, this is the only "Top Sites" script to implement this feature.
It may take some getting used to, but once you've got it down it can be an extremely
powerful tool to integrate the list into your web site.
The first thing you should do is, in an HTML editor, create a list
with one or two entries exactly how you want it to appear. Go ahead
and place some banners in (if you are using them), because the number of
banners to show is still controlled by the script variable.
So, if you want the list to look like this:
1. Site 1 Title |hits in| |hits out| - Description of site 1
2. Site 2 Title |hits in| |hits out| - Description of site 2
Then you would use the following HTML:
<font size="-2">
1. <a href="http://www.site1.com">Site 1 Title</a> <font color="Teal">|hits in| |hits out|</font> - Description of site 1<br>
2. <a href="http://www.site2.com">Site 2 Title</a> <font color="Teal">|hits in| |hits out|</font> - Description of site 2<br>
</font>
Now that you've got your layout, you need to replace some of the HTML
you created with values that the script can understand.
Here are the values the script understands and what they mean:
SCRIPT VALUE | WHAT IT IS |
#%RANK%# | The site's current rank |
#%FONT_SIZE%# | The font size to use, from setup.cgi Must be located in a font tag! |
#%BANNER%# | The site's banner, linked to the site's URL |
#%TITLE%# | The site's title, linked to the site's URL |
#%IN%# | The number of hits sent BY the site |
#%OUT%# | The number of hits sent TO the site |
#%DESCRIPTION%# | The description of the site |
The #%BANNER%# value ALWAYS has a <br> tag immediatly after it.
This is set by the script and cannot be changed through the template.
So, if you had a <br> tag after the banner in your HTML layout
it can be removed because it is automatically placed there by the script.
The #%BANNER%# value is ALWAYS linked to the site's URL. This is set by
the script and cannot be changed through the template.
The #%TITLE%# value is ALWAYS linked to the site's URL. This is set by
the script and cannot be changed through the template.
Now that all the values have been explained, lets see how to stick them into your HTML.
Lets start off with the rank value, using the sample HTML list we created above.
Here's how it looked above:
1. <a href="http://www.site1.com">Site 1 Title</a> <font color="Teal">|hits in| |hits out|</font> - Description of site 1<br>
And here's how it looks when we replace the numbered rank with the script value:
#%RANK%#. <a href="http://www.site1.com">Site 1 Title</a> <font color="Teal">|hits in| |hits out|</font> - Description of site 1<br>
Now we'll stick in the Site's Title, which is automatically linked to the site's URL.
#%RANK%#. #%TITLE%# <font color="Teal">|hits in| |hits out|</font> - Description of site 1<br>
That's all there is to it. Just look through your HTML, find the script value that
matches the HTML, and replace it. Now you just have to go through the remaining HTML
and do the replacements.
Here's what the HTML will look like when it's finished:
#%RANK%#. #%TITLE%# <font color="Teal">|#%IN%#| |#%OUT%#|</font> - #%DESCRIPTION%#<br>
REMEMBER that the #%TITLE%# value also contains the site's url, so
the site's Title and URL are replaced with one script value.
REMEMBER that the #%BANNER%# value also contains the site's url, so
the site's Banner and URL are replaced with one script value.
REMEMBER that the #%BANNER%# value also contains a <br>
immediatly following the closing </a> tag for the banner's link.
Now, what if you don't want to show the out hits, or the rank. Simple, just remove
the #%RANK%# and #%OUT%# and they're gone. So, if you don't want to show something
just remove it's script value from the template and it will not appear.
To finish everything up, copy the HTML you created and paste it into the "NEW TEMPLATE HTML"
field in the form. Click the button in the table and that will set your current template.
Now reload the main admin page, and choose to Re-Rank the list. You need to have
a few members, or test members in order to check your layout. Then you can visit
your html page to see what it looks like. Hopefully you've got it just how
you wanted it, but if not just keep playing with it until you do.
Please remember that the template option can be easily turned off, so if you're having
too much trouble with it please use the normal table layout.
Here are a few quick tips to help you with your HTML Layout.
Using tables with the template feature
When you're using tables with the template feature, there are a few things
that you need to consider when setting your header/footer files, advertisements,
and your HTML template.
First of all, each ranked site is most likely going to take one table row, or <tr>
HTML tag. So, in order for this to work you will need to have the opening <table>
tag in the header file, and the closing </table> tag in the footer file. You
will need to have your HTML template begin with a <tr> and end with a </tr>.
Next, if you have any advertisements, you will either have to make it a table row with
a colspan set to the required number, or close the table and start a new table after the
advertisement. Either one will work. Remember though that if you are not using the
template feature then the script handles all the table properties.
Test your layout!!
Before you begin promoting your top list, add a few test members, send a few hits through
and then use the Re-Rank function in the admin script to create the page. You can then
point your browser to the top list page to make sure it looks ok.