3.1 Step-by-Step Basic Template
Let start by creating a “standard” template, i.e. a general purpose Template for displaying HTML Content Items. Such a template is usually called HTML-standard.tpl.php.
Let’s look at the steps you need to go through to do this.
3.1.1 Step 1: Prepare your New Template Directory
You are probably using an installation of Tribiq CMS on which there is already at least one working Template directory.
Inside the main Tribiq CMS folder there will be a directory called templates.
Inside templates, you will find a folder called mysitename. Change into that folder. Inside it, create a folder called newtemplatefamily. (You can change this to another name if you prefer.). We are creating a "Template Family" which will hold our new templates.
3.1.2 Step 2: Create a new HTML page
Start your HTML editor, and create a new HTML page.
If your editor automatically puts in <html>, <body> or <head> tags, that’s fine while you are setting up the page initially and it may help your editor display a preview of the page. But soon you will need to remove these tags.
Let us pretend we want to have a paragraph of text on the page. We can use this piece of HTML:
<p>I want my content to appear here.</p>
Here is what your initial page might look like when you first create it, together with some comments which we’ve inserted to help you. In this example we’ll call it HTML-standard.html:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<body>
<!-- Remove everything above this line when making a Template -->
<p>I want my content to appear here.</p>
<!-- Remove everything below this line when making a Template -->
</body>
</html>
Save this HTML page in your working area. If you wish, you can preview the page to check how it looks in a browser view.
You should remove everything above the line "<!-- Remove everything above this line when making a Template -->" and everything below the line "<!-- Remove everything below this line when making a Template -->"
Now you’re ready to convert it to a Template. To do this, save a second copy of the file in your CMS’s templates directory, under templates/mysitename/newtemplatefamily. This time you should name the file HTML-standard.tpl.php.
The .tpl.php extension will make it visible to the CMS.
3.3 Step 3: Insert some Code Snippets
Warning: Index.php
Just like in HTML, we will want to reference files that are in the same directory as the template, such as images. However, because every page in the CMS is run from index.php, and not the template file itself, we must find the path back to our template family. Your includes and links must be relative to index.php.
A "code snippet" is a block of PHP code (typically one line, hence "snippet") that returns information or data from the CMS. One common code snippet allows you to display the Content of the Body Main area. To begin with, let us replace the static content area of your page (the <p> element) with a code snippet:
<?php
include "templateincludes/content_bodymain.inc.php";
?>
When we take our Template live, it will now use CMS generated content. This allows us to use one Template on multiple Content Items.
It is likely we will be referring to the Template Family location throughout our HTML and PHP. For example, we will want to refer to an images folder and an includes folder. Rather than defIne a long path every time, we at the very beginning of your template, insert:
<?php
$template_path = "templates/".SITENAME."/".$use_template_family;
?>
Now remove the beginning and ending tags, the ones outside of the two comment lines.
Now save your file again. You might want to try previewing it using your editor and/or web browser, just to check the layout. If you don’t have PHP installed on your local system, it’s likely that you will see these PHP snippets displayed on the screen just as you entered - don’t worry.
Just ensure that your editor does not remove your PHP snippets. It’s helpful at this stage to see how your editor handles and displays the snippets; if it is friendly towards PHP code this will help you later in the design process.
This time, in addition, save a second copy of it in templates/newsite/newtemplate/ and name it HTML-standard.tpl.php.
If you are working on a remote CMS installation, you may need to upload the files via FTP to get them into this directory. Your FTP client may look like this when displaying the correct destination of the file:
Your file should now look something like this:
HTML-standard.tpl.php
<!-- Remove everything above this line when making a Template -->
<?php
$template_path = "templates/".SITENAME."/".$use_template_family;
?>
<?php
include "templateincludes/content_bodymain.inc.php";
?>
<!-- Remove everything below this line when making a Template -->
Simple. In a moment, you’ll see what it does - how this template renders your content.
But first you need to tell your CMS about the new Template.
Let us now get the Template into the system.
Tip: Save File to FTP Site
Some editors can perform a File Save operation to an FTP server.
Programs like Bare Bones BBEdit and Nolobe Interarchy, which run on the OS X operating system, combine to allow you to open and save remote files almost as if they were on your hard disk.
This is handy for template development. Once you get used to the Template design process you will be able to save files to your CMS templates directory, wherever it is, and immediately review the design using your browser.
3.4 Step 4: Register the Template
Using your web browser, go to your CMS installation and log in as an Administrator. Navigate to the Admin area.
Click on the Templates tab and then Unregistered Templates. This page displays a list of .tpl.php files in folders beneath templates/mysitename.
You should see your new file newtemplatefamily/HTML-standard.tpl.php in the list.
Click on the Add symbol ( 
) to the right of the Template’s name to start the registration.
You should see a form like this:
Fill in the form, choosing a name by which you’d like to refer to your new Template (this is for internal use only), and choosing HTML for the Content Type.
Since we are just doing simple editing for now, turn on the checkbox for “Enable editing of main section” but no other checkboxes. Enter 300 pixels for the Editor Width. Leave the Custom Body Tag section blank.
Once you’ve done this, click Save to save the data. Your Template is now registered. It will appear in the Registered Templates screen.
3.5 Try out your new Template
Go to the visitor-facing side of your site (a quick way to do this is by clicking the Jump To selector in the top-right corner of all Admin pages).
Find a page which has already some HTML content. This could be your homepage, for example. If you downloaded Tribiq CMS Community, your homepage may look like this:
(If you’ve not got a page with any HTML content already, now is a good time to create one using an existing template from your installation. Add some sample content text; you could use the lorem ipsum text as a handy way of populating a page with sample content.)
Once you are previewing a page with some content, click on the 
Template Information icon in the toolbar.
You should see a further dialog window like this:
Select your new template called newtemplate/HTML-standard.tpl.php using the radio button, and press Save. On the following screen click Done; this should result in the window closing and the main window refreshing.
Your main window should now look something like this:
This is your new Template rendering main body content.
You can click on the Edit Content icon and you should see the WYSIWYG editor dialog. You should be able to make changes to your Item’s content and save it.
If this works for you, you’ve succeeded in creating your first Tribiq CMS Template!
3.6 Step 6: Improve your Simple Template
The sample page we tried above should have introduced you to the process of creating a template, but of course the example template had none of the usual things you’d expect to find on a web page, like images and styles.
Again, first do a little preparation: on your CMS installation, you will need to create directories for these things.
You should create subfolders beneath mysitename/newtemplatefamily as follows:
Styles
Warning: Inline Styles
Styling attributes such as width, border, background or font (and many more), you should do this via your template family CSS file. Don’t put styles inline within XHTML tags. Strucutre should be seperated from presentation, so you can easily make modifications in the future.
Your stylesheet should be saved in /styles and its name should be stylesheet.css.
To apply some styles, create a file as follows:
body {
font-family:Arial, Verdana, sans-serif;
font-size:0.8em;
background-color:#ffffff;
padding:0px;
margin:0px;
}
Save this file, then go to your browser and refresh that same draft page. The CMS will automatically load any CSS file called stylesheet.css, in the /styles folder.
Check that your page now looks like this:
The <body> content should now be rendered according to the stylesheet; in this example the application of a stylesheet should have resulted in the body content showing in Arial rather than your browser’s default font. (The stylesheet will in this case apply to both the content area and the surrounding parts of the page.)
Notice how the white spacing around the toolbar has also disappeared - this is because we set the padding and margin properties to "0px".
The template wrapper has taken care of the link to the stylesheet.css file, so there is no need to edit your HTML-standard.tpl.php template in order to make this work.
Now we’ll add an image to your template.
Images
You need to be careful to correctly set the paths to images, or they will not work.
Your page needs to end up with image tag HTML getting rendered like this:
<img src="templates/mysitename/newtemplatefamily/images/image.gif">
But this is would not be the right thing to put into your template, since the “newtemplate” part is hard-coded. If you decided to rename your template you would have to update all your templates. Bad idea.
So let’s make the <img> tag more intelligent. Your can use the CMS’s $template_path variable. Change your <img> tags to look like this:
<img src="<?php echo "$template_path";?>/images/image.gif">
Let’s look at how a simple logo might be inserted. We shall also make some div's to make our layout more manageable. We will create a "main_holder" div, to contain the elements of the page, and a "header" div, to contain our logo.
Update your HTML-standard.tpl.php with this code:
<?php
$template_path = "templates/".SITENAME."/".$use_template_family;
?>
<div id="main_holder">
<div id="header">
<img src="<?php echo $template_path;?>/images/logo.gif" alt="My Company Name" />
</div>
<?php
include "templateincludes/content_bodymain.inc.php";
?>
</div>
(We’ve removed those <!-- comment lines --> for clarity, you don’t need them.)
Also, upload an image called logo.jpg to the /images folder.
You can use the image I am going to use:
Add the following lines to styles/stylesheet.css:
#main_holder {
width:760px;
margin:0px auto;
height:100px;
background-color:#FFF;
}
#header {
width:760px;
margin:0px auto;
padding:10px 0px 10px 0px;
}
Once you’ve saved both the template file and the CSS file to your CMS server, refresh your browser. You should see something like this, combining image and styling:
If you get the same result, that’s great news. You have successfully implemented both images and CSS styles on your template.
If there is no image, but the text "My Company Name" this means that the image cannot be found at the path you specified. You need to check the image source.
Includes
Finally, let’s implement your own simple PHP include. Where you expect that a section of HTML will be common among several of your templates (e.g. a section with the masthead graphic, or a footer), then you should save it in an a separate “include” file.
An include file would be referenced like this:
<?php
include $template_path."/includes/footer.inc.php";
?>
The above example shows an include called footer.inc.php which resides in the includes folder.
Let's create a folder called /includes, containing a new file called footer.inc.php. We're just going to put a simple copyright message in our footer. footer.inc.php could contain the following code:
<div id="footer">
<p>Powered by <a href="http://tribiq.com" alt="Tribiq.com">Tribiq</a></p>
</div>
As you can see, we are using a snippet of PHP and a PHP variable $template_path to get the path right to the PHP file. If you don’t understand this code, don’t worry; like other code snippets, if you copy it faithfully into your template it should work.
Putting this into your main template file, you should now have a complete template like this:
<?php
$template_path = "templates/".SITENAME."/".$use_template_family;
?>
<div id="main_holder">
<div id="header">
<img src="templates/<?php echo $template_path;?>/images/logo.gif" alt="My Company Name" />
</div>
<?php
include "templateincludes/content_bodymain.inc.php";
?>
<?php
include $template_path."/includes/footer.inc.php";
?>
</div>
You should add some lines to your stylesheet as follows:
#footer {
clear:both;
margin:50px 0px 0px 0px;
padding-bottom:10px;
width:760px;
text-align:center;
font-size:0.85em;
}
Now refresh your browser; it should show a page like the following:
If you got this, congratulations. It means your images, includes and styles are all being correctly referenced. You fully understand the basics of Tribiq Templates.
If you got a PHP error like, Warning: include(templates/mytribiqsite/newtemplatefamily/includes/footer.inc.php) [function.include]: failed to open stream: No such file or directory, then you have not correctly linked or saved your PHP include.
You’re now ready to make your templates a little more realistic, by adding Navigation for example. Continue the Step by Step guide here.
Top of Page
