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. HTML coding is not a service we provide, and the tech support staff can only provide limited assistance in getting your HTML to look how you want it - this is why HTML knowledge is listed as a requirement when you purchase the software.

Editing the HTML for your ranking pages is done through the administrative script. As you can see from the screenshot below, select the "Edit Ranking Page HTML" function to get started with editing your pages. On the next page that comes up you will be able to select the page who's HTML you want to load.

HTML


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, Filler and Template Boxes

When you get to the HTML editing interface you will be presented with four large text boxes. They will be labeled Header, Template, Filler, 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.

Filler

In this box you should enter the HTML that you want to appear if there are empty ranks that you want to fill with links to the account addition page. If you have selected to do so, the software will fill in the empty ranks with this HTML. As with the template, this HTML should be for a single empty rank.

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 #%SITE_TITLE%# in the template box will tell the software to replace #%SITE_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
#%SITE_TITLE%# The site's title
#%DESCRIPTION%# The site's description
#%CATEGORY%# The site's category
#%CATEGORY_URL%# Full URL to the cagtegory ranking page for this site
#%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
#%ICONS%# Icons for the site
#%FIELD_1%# User defined field 1 for the site
#%FIELD_2%# User defined field 2 for the site
#%FIELD_3%# User defined field 3 for the site
#%PREV_ORANK%# The site's overall rank at the time of the last in/out reset
#%PREV_CRANK%# The site's category rank at the time of the last in/out reset
#%PREV_IN%# The incoming hits the site had sent at the time of the last in/out reset
#%PREV_OUT%# The outgoing hits the site had sent at the time of the last in/out reset
#%PREV_SORT%# The previous sort value for the site at the time of the last in/out reset
#%SORT_VALUE%# The value for this account which was used during the sorting the members
#%CURRENT_IN%# Number of incoming hits since last in/out reset
#%CURRENT_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
#%IN_PER_DAY%# The average hits in per day since the last total reset
#%IN_PER_WEEK%# The average hits in per week since the last total reset
#%IN_PER_MONTH%# The average hits in per month since the last total reset
#%OUT_PER_DAY%# The average hits out per day since the last total reset
#%OUT_PER_WEEK%# The average hits out per week since the last total reset
#%OUT_PER_MONTH%# The average hits out per month since the last total reset
#%NEW_ICON%# The new icon if the site is new
#%BANNER_HTML%# The complete HTML containing the site's banner
#%MOVEMENT%# The movement in the rankings of the site since the last in/out reset
#%FONT_SIZE%# The font size to use for the site
#%OVERALL_RANK%# The site's current overall rank
#%CATEGORY_RANK%# The site's current category rank
#%ROW_COLOR%# If using alternating row colors, the color to use
#%NUM_RATINGS%# The total number of ratings the site has gotten
#%PERCENT%# The percentage rating of the site
#%HALF%# The site's rating to the nearest half number
#%RATING%# The site's average rating
#%COMMENT_URL%# The URL where surfers can go to view the site's comments
#%RATE_URL%# The URL where surfers can go to rate the site and add comments

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 #%SITE_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">#%SITE_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">#%SITE_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, #%CURRENT_IN%# for the in hits, and #%CURRENT_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">#%SITE_TITLE%#</a><br> #%DESCRIPTION%# </font> </td> <td align="center" width="60"> <font face="Verdana" Size="1"> #%CURRENT_IN%#/#%CURRENT_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="#aaaaaa"> <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.

To see example HTML and instructions for setting up custom pages, visit the templates section of the owners lounge. Many times having a look at some examples will get you pointed in the right direction.