A template is a html file with special tags. When a surfer visits a blog the thumblogger system reads the template and replaces the special tags with usefull content like your blog posts and the box content.
You can recognize those special tags, they have the following format: [tag]. Some tags can contain other tag and those tags can contain other tags again, this way a structure appears. Most of the time this structure is easy to understand and logical.
Lets take a look at the tag structure for a Box. A box is like we all know a box (hence the name) with a title and content:
[box_begin]
<b>[box_title]</b>
[box_body]<BR>
[box_end]
Lets say you have 3 boxes then this will show as followed on your blog:
Box1
My box1 content
Box2
My box2 content
Box3
My box3 content
As you can see the [box_begin] and [box_end] tags are totally gone, tags that start with "_begin" and "_end" always define a template, in this case a Box template, [post_begin] defines the a (blog) Post template and [link_begin] defines a Link template.
The Box template can contain 2 tags:
| Tag | Description |
| [box_title] | this tag will be replaced with the title of the box |
| [box_body] | this tag will be replaced with the body of the box |
When you have more then one box the thumblogger system will just copy the box template and use it for every blog on your box (like the above example shows).
Now lets take a look at a very simple but complete functional blog template.
<html>
<body>
<table width=700><tr><td width=500>
[sticky]
<h2>Blog posts</h2>
[post_begin]
<a href="[post_link]">[post_title]</a><BR>
[post_text]<BR>
Posted in <a href="[cat_link]">[post_cat_name]</a> on [post_date] |
<a href="[comment_link]">[comment_str]</a><BR>
<hr>
[commentpart_begin]
<h2>Comments</h2>
[comment_begin]
[comment_author] commented at [comment_date]:<BR>
<b>[comment_subject]</b><BR>
[comment_text]
<hr>
[comment_end]
<h2>Post a Comment</h2>
[reply_form]
[commentpart_end]
[post_end]
[downy]
</td><td width="200">
[box_begin]
<b>[box_title]</b>
[box_body]
<hr>
[box_end]
</td></tr></table>
</body>
</html>
Try copying and pasting the above template in your blog (go to "Looks" section > "Full HTML template" tab and paste the template in the big field and press the Save Changes button) now preview your blog. If everything went fine you will see a ugly white blog that displays your blog posts on the left side and your boxes on the right side.
Lets take a closer look at the template:
<html>
<body>
<table width=700><tr><td width=500>
[sticky]
<h2>Blog posts</h2>
[post_begin]
<a href="[post_link]">[post_title]</a><BR>
[post_text]<BR>
Posted in <a href="[cat_link]">[post_cat_name]</a> on [post_date] |
<a href="[comment_link]">[comment_str]</a><BR>
<hr>
...
The first lines define the usual start of a html page. The [sticky] tag will be replaced with the text in the Sticky feature ( Options section > Sticky tab). Now we're at the [post_begin] tag, this tag defines the start of the Post template, the Post template ends at the [post_end] tag (which isn't yet visible). As you can see the Post template can contain many tags:
| Tag | Description |
| [post_link] | this will be replaced with a url that points to the page that displays the comments and the add comment form. |
| [post_title] | this will be replaced with the title/subject of the blog post. |
| [post_text] | the actual text/message of the blog post. |
| [cat_link] | a link that points to a category page that displays all the blog posts in the category. |
| [post_cat_name] | the category in which the blog post was posted. |
| [post_date] | the date on which the blog post was posted. |
| [comment_link] | a link that points to the page that displays the comments and the add comment form (just like the [post_link] tag). |
| [comment_str] | a short text that displays the number of posted comments for this blog post ("Add you own comment, currently 3 comment(s)"). |
At thumblogger a blog can display page with all blog posts and a page which displays one blog post including the posted comments and the add comment form. The page that displays all blog post is called "List Page", the other page is called "Detail Page".
Lets continue:
...
[commentpart_begin]
<h2>Comments</h2>
[comment_begin]
[comment_author] commented at [comment_date]:<BR>
<b>[comment_subject]</b><BR>
[comment_text]
<hr>
[comment_end]
<h2>Post a Comment</h2>
[reply_form]
[commentpart_end]
[post_end]
[downy]
...
The template between [commentpart_begin] and [commentpart_end] tags is only used on the Detail Page, this is done because only on the Detail Page the comments and add comment form is showed. The CommentPart template can consist of 2 tags:
| Tag | Description |
| [reply_form] | this tag will be replaced with a form to add a new comment. |
| [comment_begin] to [comment_end] | all tags between those tags represent the Comment Template. |
The Comment template lives in the CommentPart template and can contain comment related tags:
| Tag | Description |
| [comment_author] | the name of the person who posted the comment. |
| [comment_date] | the date when the comment was posted |
| [comment_subject] | the subject/title of the comment |
| [comment_text] | the actual text of the comment. |
As you can see it is all very logical. But wait i'm not finished there is that pesky [post_end] tag, this one defines the end of the Post template. So you can say that the Post template contains the CommentPart template and the CommentPart contains the Comment template.
There is one tag left [downy], this tag is replaced with the text in the Downy feature (Options section > Sticky tab, scroll down).
Hold on, we are almost there!
...
</td><td width="200">
[box_begin]
<b>[box_title]</b>
[box_body]
<hr>
[box_end]
</td></tr></table>
</body>
</html>
The Box template starts at [box_begin] and ends at [box_end]. The Box template can contain 2 tags (hmm, i'm repeating myself):
| Tag | Description |
| [box_title] | the title of the box |
| [box_body] | the contents of the box. |
That's it! You now know all the tags and how to use them. My advice is to go out and play with them, add a color arround the box title. Try adding a cool image header, try changing the font, make the post subject larger. Use CSS or use normal HTML tags, it's your choice, freedom everywhere!
A couple links to get started with CSS:
http://www.w3schools.com/css/
http://www.w3schools.com/css/css_examples.asp
http://www.w3schools.com/css/css_intro.asp