How to Create a Template

First of all, you have to have a pretty good idea of how you'd like your icons to show up. For this tutorial, we'll suppose that I'm creating this three-column table with grey backgrounds for the number/title and icon cells.

Basic Table Format

Let's break down the basic format of the table for that template:

As you can see, the format is rather redundant. One row for the numbers, another for the icon image, and another to act as separator. The first three rows on the table above will be repeated for every three icons you wish to view.

Template Parts

Using that information, take note that a template for the icon template parser has three text fields -- a header, a footer, and a body.

The header goes at the head of the code; this is usually your table tag and other things that will come just before your batch of icons.

The footer goes at the foor of the code; here is where you'll probably want to close your table tags, or any of the tags you opened in the header area.

The body portion is the most important! This is the portion that will keep repeating for your icons -- for each, or for every mini-batch of icons.

The heading portion contains possible headers we might want for each batch of icons we're putting up (i.e., a multi-fandom icon post).

Using our three-column table example, the following now highlights the different parts of our template:

Header:
<table>

Heading:

	<tr>
		<td colspan="3"> Some heading </td>
	</tr>

Body:

	<tr>
		<td> 001 </td>
		<td> 002 </td>
		<td> 003 </td>
	</tr>
	<tr>
		<td> <img src="IMAGE1.jpg" /> </td>
		<td> <img src="IMAGE2.jpg" /> </td>
		<td> <img src="IMAGE3.jpg" /> </td>
	</tr>
	<tr>
		<td colspan="3"> </td>
	</tr>

Footer:
</table>

Pretty simple, isn't it?

Template Variables

The last part is substituting the proper variables into the template. This is so that the parser will know where to put the dynamic data you will be supplying -- which is your list of icons/images!

The rule is pretty simple: for each number, substitute one $$NUMBER_$$, and for every icon image, substitute one $$URL_$$. The blanks in the substitution is for the column numbers of each image -- from one and onward. For example:

Body:

	<tr>
		<td> $$NUMBER1$$ </td>
		<td> $$NUMBER2$$ </td>
		<td> $$NUMBER3$$ </td>
	</tr>
	<tr>
		<td> <img src="$$URL1$$" /> </td>
		<td> <img src="$$URL2$$" /> </td>
		<td> <img src="$$URL3$$" /> </td>
	</tr>
	<tr>
		<td colspan="3"> </td>
	</tr>

Mixing up these numbers is fine (but your images will be out of order!) but do not skip numbers! Don't go "1, 2, 4" -- your images or numbers might go missing!

There is a special rule, however, for the variables. If you're only showing ONE number/icon for each row/batch (i.e., you just want to list down the icons), do not put numbers at all! Just leave them as $$NUMBER$$ or $$URL$$.

For headings, it's pretty simple: Use $$HEADING$$:

Heading:

	<tr>
		<td colspan="3"> $$HEADING$$ </td>
	</tr>

I hope this short tutorial helps you create your own template. If you have a template of your own that you use regularly, feel free to send it over and I can include it to the list I already offer, with credits back to you. This way, you don't need to keep entering it when creating your icon table/list, and others can benefit from your HTML wizardry!