Turbo Seek >> Documentation >> Template Tutorial

Turbo Seek Template Tutorial

1. Understanding How The Templates Work

The templates can be confusing, but it makes use of a simple concept. If you understand this concept you'll know exactly how it works.

1.1 The concept in a few short words

The templates that is used by Turbo Seek is just ordinary HTML files. The only exception is that the templates or HTML files has to contain variable words which Turbo Seek uses for pointers where it has to place data. You can basically open the HTML files with your favourite web editor or with what ever you prefer and edit away. The confusing thing is that some templates use other templates in combination with each other. More about this later in the tutorial. Just remember that the templates that your directory uses is normal HTML files for now. Setting up your templates will be covered step by step in this tutorial.

1.2 What is the variable words in the templates/HTML files

The variable words are enclosed by !! or %% characters. Examples of such variable words are:
%%date%% or %%pages%% etc...

These variable words are replaced by chunks of data supplied by Turbo Seek when users browse your directory & search engine. The location of the variables in the HTML template/file acts like a pointer where Turbo Seek substitutes the variable word with data. For example:
%%date%% is replaced by the date of a listing and %%pages%% are replaced by the number of pages that contains link listings, etc...

Note: It is imperative that most of these variable words are present in your templates. Without them your directory & search engine won't function correctly. Only remove variable words if you know what you are doing.

2. Customizing the Default Directory Template Plug-In

2.1 What is the purpose of the default directory Template Plug-In?

These templates or HTML files is used when displaying the contents of your directory.

You can customize these templates by going to the template manager in the control panel. Then click on 'Default Directory Template Plug-In' or you can just manually open the HTML files and edit away.

The HTML files used is called:
(These files are situated in the 'data' directory. The 'data' directory is explained in the installation instructions.)
defdir.html
tmplsearch.html
subdirs.html
directories1.html

All the files above are combined into one when displaying the contents of your directory. Another way of saying os to say that the above files are used in combination with each other to form one template that is used when displaying the contents of your directory. The combinations and details of these files will be explained a bit later.

Explanation of each HTML file or template used in the Default Directory Plug-In:

defdir.html (Directory Template - HTML Template Plug In)

This is the main template used when displaying the links/contents of your directory. tmplsearch.html (Link Listings) and subdirs.html (sub directory listings) are combined with this template. More about the combining later.

Click here for an example of how defdir.html could look like.

The specific tasks of variable words in defdir.html
%%pagetitle%%	This variable word in defdir.html usually has to be present. It is intended to display the title of the page. It is replaced by the current directory name when users browse your directory. Ensure that the word %%pagetitle%% is located between the <title> tags of your page. Example: <title>%%pagetitle%%</title> - You may also use this variable as many times as you like on the same page.

Do the excersise below and you'll get a good feel of how the variables work.

Step 1
Go to the template manager in the admin control panel. Then click on 'Default Directory Template Plug-in'. Copy and paste the HTML code of the 'Directory Template - HTML Template Plug In' into your web editor.You may also open defdir.html with your web editor if you don't want to copy and paste the HTML code from the template manager.

Step 2
For a good excersize it might be a good idea to place the %%pagetitle%% word somewhere on the page/template. This is just for example purposes. You may place %%pagetitle%% at the bottom of the page or anywhere you choose.

Step 3
Now that you have placed %%pagetitle%% somewhere on the page/template, copy and paste the HTML source code back into the template manager and click the save button. If you opened defdir.html with your web editor, just save defdir.html

Step 4
Go to the directory manager and click on any of the 'preview' links present. (If you don't have directories, then create a few) You will see that the word %%pagetitle%% is replaced by the title of the page.

The rest of the variable words in defdir.html
<!-- Hide %%metadescription%% // End Hide -->	This will be replaced by a meta tag for search engines. Please ensure that this variable/text appears exactly like above in the template. ( Somewhere between the HEAD tags of the page.)
%%addurl%%	%%addurl%% will be replaced by the 'Add Url' link. When users click 'Add Url' they will be able to add their URL to your directory. Example how %addurl% will look in your directory: Add Url
%%location%%	%%location%% will be replaced by the exact location where users are browsing your directory. Example how %%location%% will look like in your directory: Home > Entertainment > Celebrities
%%subdirectories%%	This is a special variable. It is replaced by the 'Sub Directories - HTML Template Plug In' or subdirs.html %%subdirectories%% acts like a pointer where the HTML code of the template 'Sub Directories' or 'subdirs.html' is replaced. In other words. %%subdirectories%% indicates where the HTML code of 'subdirs.html' is placed. You can edit the HTML code of subdirs.html in the template manager. More about this later. %%subdirectories%% has to be present in the 'Default Directory Template Plug-in'
%%searchresults%%	This is a special variable. It is replaced by link listings in your directory. The link listing HTML code is present in tmplsearch.html or in the template manager when you click 'Default Directory Template Plug-in' under 'Directory Links'. The %%searchresults%% acts like a pointer where link listings is placed when users browse your directory. You can edit the HTML code of the tmplsearch.html file or you can edit the HTML code in the Template Manager under 'Default Directory Template Plug-in' and the by going to 'Directory Links'. This variable has to be present in the 'Directory Template' plug in.
%%prevnext%%	This variable is replaced when there us multiple pages of link listings in your directory. Example of how %%prevnext%% will look like in your directory: << Previous Page \| Next Page >>
%%pages%%	This variable is replaced by the number of pages with links to these pages if there is multiple pages. Example of how %%pages%% will look like in your directory: Pages: 1 [2] 3 4
!!tseeksearch!!	This variable is replaced by the location of the Turbo Seek search script. It is used in combination with a form to enable users to search your directory.
!!livebuilt!!	This variable has to be present as a hidden value in the search box.
%%bannerslotX%%	This variable is used to define a banner in the template. X can be 1, 2, 3, 4 or 5. %%bannerslot1%% would for example be the first slot where you want to insert banners. %%bannerslot2%% would for example be the second slot where you want to insert banners. The %%bannerslotX%% variables are replaced by banners. See the documentation for more about the banner manager that comes with Turbo Seek.

tmplsearch.html - (Directory Links - HTML Template Plug In)

This template is used in conjunction with defdir.html (Directory Template - HTML Template Plug In)
It is substituted by the %%searchresults%% variable in defdir.html - In other words, %%searchresults%% is replaced by the HTML code of tmplsearch.html in defdir.html

The HTML code of tmplsearch.html is used for displaying each link in a directory. Click here for an example.

You can edit tmplsearch.html by opening it with your web editor or you can go to the template manager by clicking on Default Directory Template Plug-In. Then go to Directory Links.

Note that <html> and <body> tags for tmplsearch.html must not be present.

Click here for an example on how tmplsearch.html could look like

Variables used in tmplsearch.html
%%title_with_link%%	This variable is replaced by the link title of a link listing in your directory. Example of how %%title_with_link%% will look like in your link listings: My HomePage
%%description%%	This variable is replaced by the description of a link in your directory.
%%itemurl%%	This variable is replaced by the URL link of the link listing.
%%date%%	The date this link was added.
%%votes%%	Number of votes this link has received.
%%rating%%	The rating of this link.
%%hits%%	This amount of clicks this link has received.
%%rateit%%	The link that users can click to rate this link. Example of how %%rateit%% will look like in your link listings: Rate it
%%reviews%%	The link that users will click in order to rate the link. Example of how %%reviews%% will look like in your link listings: Review It

subdirs.html - Sub Directories - HTML Template Plug In

This template is used in conjunction with defdir.html (Directory Template - HTML Template Plug In)
It is substituted by the %%subdirectories%% variable in defdir.html - In other words, %%subdirectories%% is replaced by the HTML code of subdirs.html in defdir.html

The HTML code of subdirs.html is used for displaying sub categories/directories of the current category/directory when browsing the directory. Click here for an example.

You can edit subdirs.html by opening it with your web editor or you can go to the template manager by clicking on Default Directory Template Plug-In. Then go to Sub Directories - HTML Template Plug In.

Note that <html> and <body> tags for subdirs.html must not be present.

Click here for an example on how subdirs.html could look like

Variables used in subdirs.html
%%subdirs1%%	%%subdirs1%% is replaced by the subdirectories of the current category/directory.
%%subdirs2%%	%%subdirs2%% is replaced by the subdirectories of the current category/directory.

%%subdirs1%% and %%subdirs2%% is actually replaced by sub directory names of the current category.

directories1.html - (Sub Directory Link Style - HTML Template Plug In)

This template is used in combination with subdirs.html - Any HTML code for this template is optional. You can leave it blank. The function of this template is the actual style of each sub directory displayed. You can add a graphic next to each subdirectory in this template. The variable %%substyle%% which is used in this template is replaced by actual directory category names.

Click here for a visual example

Let's say you want to add a graphic next to each category displayed. Then the contents of directories1.html would look something like this:
<img src="http://www.someplace.com/smpdirl.gif"> %%substyle%%

3. Other Templates

The rest of the templates works in more or less the same manner as explained above. The moment you open (with your web editor) a template you should know or have a good idea where it is to be used.

Probably the easiest and best way to know exactly how the templates work is to experiment and play around with them. If something went wrong and your directory does'nt seem to be working anymore because of template problems, you can just go back to the default templates that came with the installation .zip archive. You can go back to the original templates by copying the template .html files from the .zip file into your 'data' directory. (Replacing the old files)

Your directory comes with pre-installed templates. Look carefully at these templates to get a good idea of how they work and what each variable word does. Once you know this, it should be easy to give your directory & search engine the exact look and feel you have in mind.