This tutorial will aid you in the creation of simple Joomla!
templates
without the use of web page creation software such as Dreamweaver and
FrontPage. All templates will be created in xhtml
transitional
format. If you do not have any prior html or css knowledge
you may
have some difficulty with this tutorial. I recommend www.w3schools.com
for help with any
questions as
this is not a html or css tutorial. Also this tutorial is for
templates to be used with Joomla! 1.0 and
above only.
One thing to note about this tutorial is that I use images to show you
the code. I do this so you will have to type it
out. In
having you do it this way you learn faster by typing the code yourself
rather than just simply copying and pasting.
Examples
There are two example templates included in the zip file that you can
download here.
The first example (default_template.zip) is an empty template for you
to start with. The
second example (finished_template.zip) is a very simple template with
both the index.php file
and the template_css.css file commented heavily so that you can refer
to them both for help. This will be the end result of this
tutorial.
PSPAD
You can use text pad as your editor of choice. I would
recommend,
however, that for the purpose of this tutorial you should download
PSPad.
This is what I will
be using throughout this tutorial.
Getting Started
Before we can get started you need to have PSPad installed.
If not, do so from the link above.
If you already have it installed open the tutorial_index.php and the
tutorial_css.css file that was included with this document.
Once
opened proceed to Understanding a Template.
Understanding a Template
First thing that needs to be understood is how a basic template is
layed out. The following is basically how every template
starts.
<?phpecho"<?xml version=\"1.0\"?>"; ?><?phpdefined('_VALID_MOS') or die('Direct Access to this location is not allowed.');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?><?phpif($my->id) initEditor(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="templates/tutorial_template/css/template_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Template Dissection
There are a few things in this empty template that need to be brought
to your attention. These are Joomla!
specific.
1. Security
The piece of code on lines 2 - 4 are there for your
protection.
This keeps people from directly accessing your template files for
whatever reason. Very important for this to be in your
templates.
<?phpdefined('_VALID_MOS') or die('Direct Access to this location is not allowed.');
?>
2. Meta Information
On line 10 of the template you will see some code that is specific to
Joomla! 1.0 and above only. It
calls the Joomla! copyright notice
as well as your meta tag information that you set in your admin
panel. This also allows for dynamic page titles according to
your
pages content.
Now looking at line 12 you will see some code that calls your WYSIWYG
editor when you are logged in. This is needed and no changes
need to be made. You just need to be aware that it is
important
in the template.
On line 17 you will see a link to call up your css file.
Without
this link your styles that we will be assigning later will not load and
your page will have no formatting.
Inside the zip file referenced earlier is one php file, one css file
and two zip files. If possible I
recommend that you install default_template.zip (if you are running at
least 4.5.1a). That way you can copy and paste the code as
you go
so that you can see the results in real time. We will be
using
the php and css files in this tutorial. When you are finished
you
can look at the finished_template.zip file which is the completed
template heavily commented for reference purposes.
; "Click to Enlarge")
; "Click to Enlarge"){kind=small}
; "Click to Enlarge"){kind=small}
; "Click to Enlarge"){kind=small}
; "Click to Enlarge"){kind=small}
