Creating Joomla v1.0 Templates

From ThemesWiki

Jump to: navigation, search
Customizing Joomla Templates
Official Page
Project Documentation
Download
Source Book
Building Websites with Joomla! v1.0
Building Websites with Joomla! v1.0
ISBN 978-1-904811-94-7
Publisher Packt Publishing
Author(s) Hagen Graf

Contents

[edit] Your Own Templates

In order to customize the appearance of your site to your company colors, you have to modify an existing template or create a new one. In this tutorial you will learn the basics of Joomla! template production.

[edit] Corporate Identity

Corporate Identity (CI) refers to the self-image and the appearance of an enterprise. This appearance, the identity, either results from the enterprise's tradition or could be completely invented in a newly created establishment. This identity is important to give the customer a feel for the enterprise and to enable recognition. The visitors to your website should recognize your enterprise on the first visit.

Corporate Identity includes:

  • Corporate Image (price, product, and advertising strategy)
  • Corporate Design (visual appearance)
  • Corporate Communication
  • Corporate Behavior (behavior of coworkers with each other and to the outside world)

These areas need to be considered while developing a website. In this tutorial, we will examine Corporate Design. At a minimum, it consists of a logo, a character font, and the house colors that the enterprise uses.

[edit] HTML/XHTML, CSS, and XML

The abbreviations HTML/XHTML, CSS, and XML stand for Internet technologies that Joomla! works with. The World Wide Web Consortium (http://www.w3.org/) standardizes these technologies.

[edit] HTML/XHTML

The World Wide Web is based on HTML, a page-description language. It is not a programming language, but a text-description language.

Every text consists of structures like headings, lists, bold and italic areas, tables, and much more. HTML works with so-called tags. A tag has an opening and a closing form. For example, a first‑level heading looks like this:

<h1>This is a heading</h1>

The tags are interpreted in a browser and the text is displayed according to their meaning.

HTML is easy to learn and a tutorial can be found at http://www.w3schools.com/html/. HTML is not being developed any further and the successor to HTML is XHTML version 1.0.

[edit] CSS

Cascading Style Sheets (CSS) are an extension to HTML. CSS is not a programming language, but a vocabulary for defining the format properties of HTML elements.

With the help of CSS commands, you can determine that first-level headings should have, say, a character size of 18 points in the Arial character font, are not bold, and have a spacing of 1.9 cm to the next paragraph.

Such options are not possible with pure HTML and were not necessary while developing it. With the progressive commercialization of the Internet, additional formatting possibilities do become more important.

CSS data can be included in HTML in the following three ways:

[edit] In the Central HTML File

The CSS commands are defined in the head section of the HTML file: 

 <head>
  <title>title of the file</title>
  <style type="text/css">
  <!--
  /* ... this is where the CSS commands are defined ... */
  -->
  </style>
 </head>

[edit] In a Separate CSS File

If the CSS commands apply to several HTML files, they can be stored in a separate file and the path to this file can be specified in the HTML head section. This is the version that Joomla! uses: 

 <head>
  <title>title of the file</title>
  <link rel="stylesheet" type="text/css" href="formate.css">
 </head>

[edit] Within an HTML Tag

CSS commands can be integrated within an HTML tag: 

 <body>
  <h1 style="... CSS command ...">...</h1>
 </body>

[edit] Combinations

These three methods can be combined without any problem in an HTML file. It is, for instance, possible to overwrite CSS commands in a central HTML file that applies to all pages with the subsequent source code of an HTML page. It is better to use the central file because overriding it results in unclear structures.

[edit] XML

The Extensible 'Markup Language ('XML) is a universe in itself. It represents a metalanguage in which other languages are formulated. To a certain extent, it is the mother of all languages. For our purposes, you need XML as the description language for the metadata of the templates that you want to create. These metadata are primarily important for the template installer and the display in the Template Manager. In principle, these data consist of opening and closing tags. For example: 

<name>Joomla_book</name>

One difference between HTML and XML is that in XML no tags are predefined. For this reason, one is free in the organization of the structures and naming of tags.

[edit] Create Your Own Templates

Now we want to create our own template. There are several things to consider before we have a finished template package.

[edit] Concept

Before you start working, you have to create a concept. The work starts with a sketch or a diagram, especially when producing templates. Whether you create this sketch with programs like Adobe Photoshop (http://www.adobe.com/products/photoshop/), Microsoft Paint, which comes with Windows, the open-source program Gimp (http://www.gimp.org/), or with a piece of paper and markers, is up to you.

[edit] Fixed Size or Variable Size

You can create two kinds of templates: templates that adapt their structure to the size of the browser window and templates that have a fixed size. An example for the first flexible layout is if you have 2048 pixels on your screen and the browser window is maximized, then your page is stretched accordingly. It can look strange if you use graphics and non-scalable elements like logos and signatures in your template. You have no control of what it is going to look like.

The other variation is to decide on a certain resolution and to position all elements exactly on the pixels in the template. The advantage is that your web page always looks the way you want.

Unfortunately, you do not know the default screen resolution of your page. Your page fills the screen with a resolution of 800 x 600 pixels. On a large screen with 1400 x 1050 pixels, it occupies about a third of the screen surface and looks a little lost.

There is no real solution for this dilemma. You have to weigh the pros and cons and make a decision.

If you prefer the fixed size, you should select a size that looks presentable on most screens, which are 800 x 600 pixels. Since the browser has a scroll bar on the right side and the browser window is framed, the available width is even smaller, so you have a maximum of 780 pixels to work with.

[edit] Structure

You are dealing with structured data and first have to determine a general allocation. Joomla! normally uses a structure shown in the following figure:

Section 1:

  • Part 1: This is where your logo or a picture and the page name go.
  • Part 2: This is where the search field is.
  • Part 3: Here is the linked navigation path (Breadcrumbs).

Section 2:

  • Part 4: The most important menus are shown in the left column.
  • Part 5: The actual page content goes here.
  • Part 6: The right column is a place for additional menus.

Section 3:

  • Part 7: The bottom part is the footer.

[edit] File Structure of the Template

Now it's time to think about certain conventions. The template has to be stored in a special directory structure. If required, you can work directly with your local Joomla! installation. If that is too unclear, you can also store the template in an arbitrary place on your hard drive. You have to adhere to the following file structure:

/templates/[name of the template]/

/templates/[name of the template]/CSS/

/templates/[name of the template]/images/

The name of the template cannot contain blanks and other special characters. Later, the template installer has to create a directory from this name. Depending on the operating system, exotic combinations of characters can cause problems; also, the name should be meaningful. For example, if you make the template chooser module available on your website, this name will be offered to your visitors in the selection list. I am using joomla_book as my template. Various files with certain names have to be present in the template directories. Besides the image files of your template, all other file names have to agree with the defaults.

  • /templates/joomla_book/index.php: This is the basic version of the HTML file that we created earlier. It has to have the .php ending, since the dynamic Joomla! module element, which we will insert later, has to be interpreted by PHP.
  • /templates/joomla_book/template_thumbnail.png: A preview picture of your template for selection in Joomla! administration and in the template chooser module will be available. Preview pictures have a format of approximately 227 x 162 pixels.
  • /templates/joomla_book/templateDetails.xml: This file represents the construction manual for the 'template installer'. Here you specify the location where the files are to be copied. During the upload, PHP picks this file out and copies the files to the correct place. For the example template, you can use the file from Listing 10.2 and provide your own data. You have to surround every file that you use in the template with an opening and a closing XML tag. 
<files> <filename> ... enter the filename of a file in the TemplateRoot directory ... </filename>
 <filename> ... for every file a filename-Container </filename> </files>

<images> <filename> ... enter the filename of an image in the images-directory ... </filename>
 <filename> ... for every file a filename-Container </filename> </images>
 <css>
  <filename>css/template_css.css (Name of the CSS file)</filename>
 </css>

The other containers of the XML file provide the description of the template. Here the complete functional listing of the XML file:

Listing 10.2: templateDetails.xml 

 <?xml version="1.0" encoding="iso-8859-1"?>
 <mosinstall type="template" version="4.5.2">
  <name>joomla_book</name>
  <creationDate>03/23/05</creationDate>
  <author>Hagen Graf</author>
  <copyright>GNU/GPL</copyright>
  <authorEmail> hagen@aubkunden.de </authorEmail>
  <authorUrl>http://www.alternative-unternehmensberatung.de</authorUrl>
  <version>0.1</version>
  <description> description</description>
  <files>
  <filename>index.php</filename>
  <filename>template_thumbnail.png</filename>
  </files>
  <images>
  <filename>images/logo.png</filename>
  </images>
  <css>
  <filename>css/template_css.css</filename>
  </css>
 </mosinstall>
  • /templates/joomla_book/css/template_css.css: This is the CSS file of your template and the organization of the CSS file is open to you. However, there are standard descriptions for various side elements. You can find a table of these elements in the Appendix. For your first attempt, you need an empty CSS file with this name.
  • /templates/joomla_book/images/[user-defined picture files]: Here you can store arbitrary image files, which will be used in your template. The installer then copies the files into the 'image' sorter.

[edit] First Trial Run

You can see and access your new template in Joomla! administration once you have reconstructed all the structures in the [pathtoJoomla!]/templates/ subdirectory:

When you open your website, you will see the structure. Unfortunately, no content is shown yet. Since this content is produced dynamically, you have to integrate it piece by piece into your new template.

[edit] Integration of the Joomla! Module

The integration of the Joomla! module takes place by means of PHP commands that are embedded into the HTML code. If you insert the following lines in place of the title tag in the head section of the index.php file, the favicon and the title of the page are displayed: 

 <head>
  <?php mosShowHead(); ?>
 </head>

If you view the source code of this page, you will notice that Joomla! has written the entire metadata, which you had entered in Administration, into the HTML code.

Listing 10.3: Joomla! Metadata 

 ...
 <head>
 <title>Joomla 1.0.0 - Home</title>
 <meta name="description" content="Joomla - the dynamic portal engine and content
 management system" />
 <meta name="keywords" content="Joomla, joomla, test, test" />
 <meta name="Generator" content="Joomla! - Copyright 2005 Open Source Matters. All rights
 reserved." />
 <meta name="robots" content="index, follow" />
 <link rel="alternate" type="application/rss+xml" title="Joomla 1.0.0"
 href="http://localhost/Joomla100/cache/RSS2.0" />
 <link rel="shortcut icon" href="http://localhost/Joomla100/images/favicon.ico" />

 ...<link href="http://localhost/Joomla100/templates/joomla_book/css/template_css.css"
 rel="stylesheet" type="text/css"/> </head> ...

Since this has worked so well, we will waste no time and get to the other relevant PHP modules that deal with functions. For example, the function mosLoad-Modules() expects the location of the module (right, left, user1...) as parameter. You can assign this place in the 'Module Manager'. The function then displays all modules with the appropriate parameter.

The following listing shows the complete source code of the index.php file with PHP modules:

Listing 10.4: index.php with Joomla! Modules 

 <html><head>

<?php mosShowHead(); ?>
 </head>
 <body bgcolor="#FFFFFF" text="#000000">
 <table width="780" border="1">
  <!-- Part 1 -->
  <tr>
  <!-- Area 1 -->
  <td colspan="2" height="89" bgcolor="#F5C228"> </td>
  <!-- Area 2 -->
  <td width="178" height="120" rowspan="2" bgcolor="#FFCC33">

<?php mosLoadModules ( 'user4' ); ?>
  </td>
  </tr>
  <tr>
  <!-- Area 3 -->
  <td colspan="2" height="33" bgcolor="#FFCC33">

<?php mosPathWay(); ?>
  </td>
  </tr>
  <!-- Part 2 -->
  <tr>
  <!-- Area 4 -->
  <td width="197" height="233" bgcolor="#F5EE28" valign="top">

<?php mosLoadModules ( 'left' ); ?>
  </td>
  <!-- Area 5 -->
  <td width="389" height="233" valign="top">

<?php mosMainBody(); ?>
  </td>
  <!-- Area 6 -->
  <td width="178" height="233" bgcolor="#FFFF33" valign="top">

<?php mosLoadModules ( 'right' ); ?>
  </td>
  </tr>
  <!-- Part 3 -->
  <tr bgcolor="#FFCC33">
  <!-- Area 7 -->
  <td colspan="3" height="40">

<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php'); ?>
  </td>
  </tr>
 </table></body></html>

If you open the home page with the changed HTML code on a local server, you will see dynamic content. Your new template is filled with data. You are now working with pure HTML code and the results look as if they could benefit from some visual improvement:

To refine the visual aspect, we will take a small step into CSS formatting. Copy the following code into your template_css.css file (Listing 10.5). Here it is specified that the default font is Arial, the links are not to be underlined, and the script will be displayed in another color and bold font if you roll over a link with your mouse cursor (see http://en.selfhtml.org/css/).

Listing 10.5: template_css.css 

 body {
 font-family: Arial, Helvetica, Sans Serif;
 }
 a:link, a:visited {
 color: #ff6600;
 text-decoration: none;
 font-weight: bold;
 }
 a:hover {
 color: #C43C03;
 text-decoration: none;
 font-weight: bold;
 }

Now your template looks a little more attractive. Point the mouse at the Search link in the main menu. The link is displayed in bold and in another color:

[edit] Creating a Template Package

To complete your template, create a current preview picture of your template (template_ thumbnail.png) and pack all the files with subdirectories into a zip archive.

In addition, assign all files and folders to the folder [pathtoJoomla!]/templates/joomla_book/ and pack all the contents into the joomla_book.zip file. Make a backup of this file and the zip file.

To test the installation, remove the template from the Template Manager. To accomplish this, specify another template as the default (select the template and click Default), delete the newly created template by selecting it, and clicking Delete.

[edit] Installation with the Joomla! Template Installer

After you have eliminated traces of development, go to the menu Installers | Template Site, select the Joomla!book.zip file, and click Upload File & Install. You will see the success screen of the template installer. A description from the XML file is displayed in the following figure:

If you click Continue, the newly created template is displayed in the Template Manager with a preview picture:

[edit] Creating Templates with Dreamweaver Extension

There is an extension for the HTML editor Dreamweaver with which you can produce templates. You need a current version of Dreamweaver (MX 2004 and higher) and you can install the Template Builder Extension there. The program was originally written for Mambo 4.5.1, but it works well with the Joomla! versions as well.

[edit] Installation

Download the mambosolutionsDW_107.zip file. Start Dreamweaver, click on Comands | Administration Extensions. The Macromedia Extension manager opens. Select the file and click on Install.

[edit] Create New Template File

In order to activate the extension, you have to restart Dreamweaver. Open a new document of the type dynamic page. Click on File | New | Dynamic Page | PHP .

After the file has been created, you will see a MamboOS palette in the top area. There are a number of buttons there with which you can insert the template elements .

The first thing you have to do is to delete the header in the source code window that was produced by Dreamweaver and replace it with the Joomla!-specific one.

After that, in succession, click on the icons Insert Head Code, Insert Title, and Insert CSS StyleSheet.

Now you have exactly the source code in your header that a Joomla! template needs and which, a while ago, we had to type manually.

[edit] Template Structure

Other than the special header, you now need the structure of your website. You can create this structure with the help of a table or with HTML div tags. I will describe the table version here.

If the layout mode is still activated in your Dreamweaver, please terminate it.

Produce a table structure as described in the previous example. By clicking on Insert | Table, you can create your desired structure. You have a lot of options of producing complex table structures and to nest the tables with Dreamweaver. I am consciously showing a simple version. Color the table according to your desires.

Now save the file. Set up a new subdirectory under [pathtoJoomla!]/templates with the name mytemplate and save the file in it with the name index.php. In addition set up a CSS directory and an images directory.

In the images directory, please deposit all images and graphics that you will use in your template. You can create the graphics with a commercial graphics program such as Photoshop or an Open Source solution such as Gimp and by means of Dreamweaver place them in your template.

The CSS file that is valid for the entire template is in the CSS directory, as the name implies. It has to have the name template_css.css. You can create the file with Dreamweaver or copy an already existing CSS file from another Joomla! template. If you create the file with Dreamweaver, Dreamweaver changes the header of your template by inserting a link to the newly created CSS file there. 

<link href="css/template_css.css" rel="stylesheet" type="text/css" />

You will need the absolute path and thus the version that we already inserted a while ago in your subsequent template within Joomla!. Dreamweaver does not evaluate the PHP tags in our situation. The PHP variables do not contain a value and therefore the CSS link that was set up by the extension leads to nowhere.

Thus use the link inserted by Dreamweaver at first and remove it again later.

I recommend to you to use an already existing CSS file since the Joomla!-specific classes are already defined in it. Therefore copy the CSS file or its contents from the rhuk_solarflare_ii template into your freshly created CSS file.

[edit] Insertion of the Joomla! Modules

Now you have the basis for inserting the Joomla! modules. Move the cursor to the spot in your table where you want to have, for example, a search field and click on the Insert Search icon in the option bar (10.19).

In the design window you can now see a search field and all kind of HTML and JavaScript code was added in the source code.

Now you can gradually insert the dynamic elements into the appropriate table fields by clicking on the respective icons.

[edit] Templates and <div> Tags

At the moment, Joomla! works with HTML table representations when it comes to content. In the next versions of Joomla!, this process will change in order to accommodate the requirements of barrier-freedom.

The <div> tag will replace and supplement the </code> tag in HTML. Thus you can include several HTML elements such as text and graphics in a shared area. This area at first doesn't affect anything except that it starts in a new line of the text flow. The <div> tag does not have any other properties. The big advantage, however, results from the combination of <div> tags with CSS statements. These properties of the <div> tags make it interesting to produce templates that are controlled by a CSS file. Marc Hinse's template, which is included, uses this technology. It doesn't contain any table tags any more and instead builds the entire "tabular" structure by means of <div> tags. Take a look at the original source code of this template in order to get familiar with this technology. You can find more information about <div> tags online. Dreamweaver also supports this technology. As an example, I have extracted all of the <div> tags from the template, in order to give you an overview of the structure (Listing 10.7). The id attributes refer in each case to a class in the corresponding CSS file.
Listing 10.7: Extract from the /templates/madeyourweb/index.php file 
 <div id="accessibility"></div>
 <div id="pagewidth-800" >
  <div id="header" >
  <div id="top-top">
  <div id="search"></div>
  <div id="topmenu"></div>
  </div>
  <div class="clr"></div>
  <div id="top-bottom"></div>
  <div id="banner"></div>
  </div>
  <div id="outer-800" >
  <div id="pathway"></div>
  <div id="leftcol"></div>
  <div id="maincol-broad-800" >
  <div id="maincol-wide-800" >
  <div id="<?php echo $usera; ?>"></div>
  <div id="<?php echo $userb; ?>"> </div>
  <div class="clr"></div>
  <div class="content"></div>
  </div>
  <div id="rightcol-broad"> </div>
  <div class="clr"></div>
  </div>
  <div id="footer-800" ></div>
 </div>

You can find the corresponding CSS classes in Listing 10.8

Listing 10.8: Extract from the /templates/madeyourweb/css/template_css.css file 

  #header { 
    height: 116px;
    width: 100%; 
         }
    #top-top {
      height: 30px; 
      width: 100%; 
      background: transparent; 
      } 
       ...

The height and the width of the area to be formatted are specified with the height and width attributes. The background attribute determines the color of the background. Thus the table structure can be emulated without table tags and even be extended by many functions (to fade in, fade out, shift...) by means of the pixel-exact formatting of areas.

[edit] Barrier Free Joomla!

Barrier freedom starts in the head! In many countries, it is a specific topic that has even been regulated. Complete barrier freedom and fundamental accessibility are difficult to achieve on the Internet, but, of course, not impossibly in principle. The term accessibility is often associated in this connection. When authorities offer their services for sale on the Internet, they must be accessible for as large a number of inhabitants as possible.

Barrier free access to a website is the same as a ramp for wheelchair users on a bus or a traffic light that beeps when the light changes to green, so that the blind will hear it.

Accessibility is a distinct advantage for a company and/or a public service offerer. Every visitor to a website is also a potential customer. This topic transcends far beyond people with handicaps or older people and will win worldwide importance.

[edit] Criteria for Accessible Websites

In order to give you a conception of the necessary changes to your website, here are a few criteria.

[edit] Clarity

Every website should be clear and fast to comprehend. Information should preferably be in those places in which the user expects it.

[edit] Browser Compatibility

There are different kinds of Internet browsers. From the text-based Lynx on the Linux console, through browsers on cell phones, PDAs and other mobile terminals to various browsers on various operating systems (OSX, Linux, Unix, Windows, OS2). All these terminals have different resolutions and can or cannot display graphics, can or cannot run JavaScript code, can or cannot play Flash movies, and so on.

Remember that there are also character recognition programs and, for example, Braille keyboards for blind people. These programs are also browsers!

[edit] Valid Source Code and Logically Structured Page Architecture

Navigation, layout, and contents are the important facets of a website. They must be developed logically content-wise and be semantically correct. XHTML is a standard. The source code that you use should be valid!

[edit] Contrasts

A high-contrast representation of website content must be ensured to accommodate visually impaired users.

[edit] Graphics and Pictures

A lot of output devices for handicapped people cannot represent graphics. Therefore it is absolutely necessary to have an alternative way of representing content.

[edit] Font Sizes

The writing must also be readable on older and alternative systems.

[edit] Additional Criteria and Information

In order to get a feeling for the genuine requirements, take a quick look at Section 508 (http://www.section508.gov/).

[edit] The Reality

At first, the reality is a little frightening. There is hardly a website that conforms to these simple and plausible rules. "Eye Candy", animations and complicated navigation rule most websites. A process of rethinking is, however, taking place with the increased popularity of content management systems and also because of the regulatory laws.

Companies that offer their goods on the Internet are slowly realizing that accessible websites are also good for the business. Customers simply find it easier to navigate! The websites of barrier‑free sites are, by the way, extremely popular with customers compared with other online banking websites!

In real life you have to deal with different user groups, various user terminals, and different requirements. Thus, your website will always be a compromise! Don't set your requirements too high and start simply.

[edit] Is Joomla! Barrier-Free?

In order to make it short: no. In accordance with the Joomla! roadmap, the next versions of Joomla! will place a lot of value on this topic and accessibility of the website as mentioned above could be made possible.

[edit] Is it Possible to make Joomla! Barrier-Free?

In order to answer this question just as briefly: yes!

[edit] The Technology

Joomla uses! an XHTML table layout. Table tags are insurmountable for a barrier-free setup and should be avoided. Therefore the part in the Joomla! system in the program code that is responsible for the output has to be changed. Angie Radtke has a kludge for this purpose that can be installed as a component. Besides this kludge, you need a read-more Mambot, which changes the Read more link in Joomla! contents in such a way that that it can be read out.

If you now build the following into your structure, accessibility will look pretty good:

  • A clear, table-free structure,
  • Valid XHTML,
  • Scalable fonts,
  • Appropriate color choices
  • Sufficient contrast

From a purely technical perspective, you are now well prepared for the future.

You can test the functionality with various tools. You can find an overview of the usual tools, among other places, on Jan Eric Hellbusch's website.

[edit] The People

Now we come to the people that set up contents on the website, the editors. Here you have to wake up their sense of responsibility.

This, for example, is a valid and also semantically correct text input: 

 <h1>first order heading</h1>
 <p>first paragraph</p>
 <p>second paragraph</p>

What looks so simple is so difficult to get implemented. One could let the heading look like a heading even with the change of script attributes. The following command has a similar effect; however, it is no longer a heading: 

<span class="heading">first order heading</span>

The following command would be the correct version: 

<h1 class="heading">first order heading</h1>

How can you get an editor to learn this?

In the text-processing world there are two programs thatrepresent the standard in editing of texts, OpenOffice and Microsoft Word. It is absolutely necessary to have a similar tool with similar capabilities to make text input possible for web pages. The WYSIWYG editor used by Joomla! is only a small start.

Here is another example of the correct formulation of a graphic with the title and longdesc attributes. 

 <img src="companylogo.png" width="100" height="130" border="0"
 alt="companylogo" title="This is our company logo" />
 <img src="companylogo.png" width="100" height="130" border="0" 
 alt="companylogo" longdesc="companylogo.txt" />

In the longdesc attribute, the reference is to a separate description.

Many such "little things" must be considered. The WYSIWYG editor that comes with Joomla! is not really usable for these tasks. In order to nevertheless enable easy editing, you can deactivate functions of the editor in the source code. Detailed knowledge of the JavaScript language is, however, necessary for this.

The correct phrasing is also importantly when it comes to the people that write the text! A small summary about the subject matter of the article has to be in the opening text. The language must be easily understandable and proper for the target group. Everything you learned in your journalist courses suddenly is important again.

[edit] Barrier-Free Sites with Joomla!

Angie Radtke has already created several barrier-free projects with Joomla! and/or Mambo. Here is an example of a barrier-free website for 3tc.

You can find additional examples of barrier-free sites on the website of the W3C site.

[edit] Additional References

  • For instructions on Installing Joomla v1.0, click here
  • For instructions on Customizing Joomla v1.0 Templates, click here
  • For instructions on Creating Accessible Joomla Templates, click here
  • For instructions on Debugging and validating Joomla Templates, click here
  • For instructions on Handling Joomla! Errors, click here

[edit] Source

The source of this content is Chapter 10: Your Own Templates of Building Websites with Joomla! v1.0 by Hagen Graf (Packt Publishing], 2007).

Retrieved from "http://www.themeswiki.org/Creating_Joomla_v1.0_Templates"