create_new_xbtit_template [Btiteam Wiki]

:-) Hello, this is a first hand guide to get you started in creating your very first Xbtit template. I'll try to keep this tutorial as short and simple as possible.

Tutorial sections

* Know the Xbtit template

* Modify the CSS

* Modify the HTML

* Know the Xbtit template

Xbtit has a complete separation between php code and html+css which is a great advantage for any designer to expand his/her potential.
If you explore the style folder in Xbtit there you will find all the goodies.

We have for each style 3 main things, the structure , the format and a folder to contain the style. The structure will be the files with “tpl” extensions and the format will be the files with the “css” extensions. The main structure template is located inside the folder called xbtit_default , all the other styles (mostly) use the templates in that folder.

:-? What do you mean by that?

Will, some people might like the current structure for the template and only want to change the colors along with the fonts. To do this you only need to modify the “css” file and the template will be pulled from the xbtit_default.

:-| So, if i want to modify the template “structure” do i have to copy all the “tpl” files to the new style folder?

If the modifications are a small amount of “tpl” files just copy the “tpl” files that you modified.

:-P Kool, so how do I start a new style?

In the style folder create a folder with the desired name, from the xbtit_default folder copy the following folders, files and any other “tpl” files you need to modify.

To add the style do so from the Admin Panel.

:-O What are the main “tpl” files?

Will, all the main “tpl” files has the word “main” in them and they are.
-main.tpl
-main.no_header_1_column.tpl
-main.no_columns.tpl
-main.left_column.tpl

If you want to create a border around the tracker make sure you add it to all of these pages.

* Modify the CSS

Modifying the css is pretty basic. One tool that i find useful is firebug (search for it in google), its a FireFox extension that could point you to the class or id name in the css files; this way you now what you need to edit right away

There are many free css editors you could use, google for them ;-)

* Modify the HTML

As I said before if you like the structure and only want to change the color, fonts, background, borders and size you could only modify the css, there is no need to modify the template.

The names of the templates are self explained, I only want to focus on the main templates that contains the site within them.

- “main.tpl” this is the main that has the 3 columns and the header.
- “main.no_columns.tpl” no columns , browsing torrents for example.
- “main.left_column.tpl” only the main and the left column.
- “main.no_header_1_column” just the main, no header no column.

these files are the container of the template in Xbtit.