Editing Your Ranking Page HTML

Introduction

Before you begin, make sure your brain is in HTML mode. From here out, it is assumed that you understand HTML at the source level. If you don't know HTML very well but want a very custom look to your site, we recommend locating a professional HTML developer to assist you.

Editing the HTML for your ranking pages is done through the administrative script. Just select the Edit autorank.html function from the first drop down menu in the administrative interface.

Planning Your HTML Ahead

Before you even begin working on your HTML in the administrative interface, we highly recommend that you layout how you want your ranking page to look. This can be done with your normal method for creating HTML pages. Once you have a look that you are satisfied with, save the HTML so you can work with it later in the adminisrative interface.

Take a moment now to look over your HTML so you are sure you know how it works. The better you understand your HTML now, the easier it will be for you to set it up in the administrative script later.

The Header, Footer and Template Boxes

When you get to the HTML editing interface you will be presented with three large text boxes. They will be labeled Header, Template, and Footer. This is where you will place all of your HTML for the page you are working on. The first time you view this page, the default HTML that is included with the software will be displayed. You should look this over to get a general idea of how things work. Add a few test accounts to your toplist, then rerank the list so you can see how the HTML is written to the page. From there, you can begin making changes to give the ranking pages your own look.

Header

In this box you should enter all of the HTML that you want to use up until the listing of ranked sites begins. On a simple page this will usually include the title and body tags, and any HTML that you want to appear at the top of the page. Because the HTML is completely up to you, you can make it as simple or complex as you like.

Template

In this box you will enter the HTML for a single ranked site. This HTML will then be used for each of the accounts ranked on the selected page. This HTML will generally include the site title, description, number of hits, and a link to the site.

Footer

In this box you should enter all of the HTML that you want to use after the listing of ranked sites has ended. On a simple page this will usually include any HTML that you want to appear at the bottom of the page. Because the HTML is completely up to you, you can make it as simple or complex as you like.

The Template - In Depth

The template HTML is what will control how each of the ranked sites will look on your page, and this portion of your HTML will contain several template values. Template values can be recognized within HTML because they are surrounded by #%%# characters. For example, using #%TITLE%# in the template box will tell the software to replace #%TITLE%# with the site title for the account it is currently printing to the HTML file.

This section will explain each of the template values that you can use, and how you go about replacing your HTML with them so you get the correct display. We'll start out by explaining the available template values.

Value Replaced By
#%USERNAME%# The username of the account
#%TITLE%# The site's title
#%DESCRIPTION%# The site's description
#%CATEGORY%# The site's category
#%OUT_URL%# The outgoing URL to the site which does track hits
#%SITE_URL%# The outgoing URL to the site which does not track hits
#%HITS_IN%# Number of incoming hits since last in/out reset
#%HITS_OUT%# Number of outgoing hits since last in/out reset
#%TOTAL_IN%# Total number of hits in since the last total reset
#%TOTAL_OUT%# Total number of hits out since the last total reset
#%BANNER_HTML%# The site's banner
#%OVERALL_RANK%# The site's current rank
#%ROW_COLOR%# If using alternating row colors, the color to use

Now that each of the template values has been explained, we will give a simple example of how you can take your HTML and insert the template values in the correct locations. Say that you want your list of ranked sites to look like the following:

Rank Title and Description In/Out
1 Site Title
Description
152/189
2 Site Title
Description
118/124
3 Site Title
Description
99/102

What you need to do is look at your HTML and detemine what tags will generate one of those ranked sites. In our case, the HTML we have pulled out is:

<tr bgcolor="#ffffff"> <td align="center" width="60"> <font face="Verdana" Size="1"> 1 </font> </td> <td align="center" width="180"> <font face="Verdana" Size="1"> <a href="" class="orange">Site Title</a><br> Description </font> </td> <td align="center" width="60"> <font face="Verdana" Size="1"> 152/189 </font> </td> </tr> Now we can take this HTML and start plugging in the template values at the correct locations. The first thing we will do is replace the site title with the #%TITLE%# template value:
<tr bgcolor="#ffffff"> <td align="center" width="60"> <font face="Verdana" Size="1"> 1 </font> </td> <td align="center" width="180"> <font face="Verdana" Size="1"> <a href="" class="orange">#%TITLE%#</a><br> Description </font> </td> <td align="center" width="60"> <font face="Verdana" Size="1"> 152/189 </font> </td> </tr> Next, lets put in the site's overall rank, #%OVERALL_RANK%#
<tr bgcolor="#ffffff"> <td align="center" width="60"> <font face="Verdana" Size="1"> #%OVERALL_RANK%# </font> </td> <td align="center" width="180"> <font face="Verdana" Size="1"> <a href="" class="orange">#%TITLE%#</a><br> Description </font> </td> <td align="center" width="60"> <font face="Verdana" Size="1"> 152/189 </font> </td> </tr> Finally, we'll add the #%DESCRIPTION%# template value to insert the site description, #%OUT_URL%# for the URL to
the site, #%HITS_IN%# for the in hits, and #%HITS_OUT%# for the out hits.

<tr bgcolor="#ffffff"> <td align="center" width="60"> <font face="Verdana" Size="1"> #%OVERALL_RANK%# </font> </td> <td align="center" width="180"> <font face="Verdana" Size="1"> <a href="#%OURL%#" class="orange">#%TITLE%#</a><br> #%DESCRIPTION%# </font> </td> <td align="center" width="60"> <font face="Verdana" Size="1"> #%HITS_IN%#/#%HITS_OUT%# </font> </td> </tr> That's all there is to it, you've just created your first template. All of the HTML you need to use is listed on the lines directly above. It is important to note that you will only enter the HTML for a single ranked site in the template field.

Note that this is not all of the HTML you need to use to get this look. In order to get the table started out correctly, and finish it correctly, we need to have some HTML in the header and footer. In this example we would use the following code for the header.

<table align="center" border="0" cellpadding="0" cellspacing="0" width="300"> <tr> <td bgcolor="#000000"> <table align="center" border="0" cellpadding="2" cellspacing="1" width="300"> <tr bgcolor="#004080"> <td align="center" width="60"> <font face="Verdana,Arial" Size="1" color="#ffffff"> <b>Rank</b> </font> </td> <td align="center" width="180"> <font face="Verdana,Arial" Size="1" color="#ffffff"> <b>Title and Description</b> </font> </td> <td align="center" width="60"> <font face="Verdana,Arial" Size="1" color="#ffffff"> <b>In/Out</b> </font> </td> </tr> And this code for the footer:
</table> </td> </tr> </table>
Bringing the Header, Template, and Footer Together

Once you have a template figured out, it's time to bring all of your HTML together. This is where planning ahead will come in handy. There are things you need to consider here, such as when to open and close an HTML tag. For example, if you want all of your ranked sites listed in a 600 pixel wide table in the center of your page, you will need to start the table in your header and close out the table in your footer. Take a few minutes to think about how your HTML works, especially if you are using tables in your page.

If you're pretty sure you've got everything laid out how you want it, have your HTML seperated into header, template and footer, and have setup the template values, you're ready to insert into the administrative script. Just cut and paste the HTML you have created into the text boxes, and then save the HTML. You can then rerank the list and see how things look. Don't get too frustrated if you don't get it right away; getting your HTML just right can take some tweaking.