Joomla Templates: Creating a Pure CSS Template | Part 2/Page 2 | WebReference

Joomla Templates: Creating a Pure CSS Template | Part 2/Page 2


[previous] [next]

Joomla Templates: Creating a Pure CSS Template - Part 2

What Else Is in index.php?

Let's look at the structure of the header first; we want to be as minimal as possible but still have enough for a production site. The header information we will use is as follows:

What does all that mean?

We have already discussed the implications of the DOCTYPE statement in the index.php file. The <?php echo $this->language; ?> is pulling the language from the site Global Configuration.

The next line is to include more header information:

This is all header information that is set in the Global Configuration again. It includes the following tags (in a default installation):

Much of this header information is created on the fly specific to the page (article) that someone is on. It includes a number of metatags—the favicon, RSS feed URLs, and some standard JavaScript files.

The last lines in the header provide links to CSS files for the template:

The first two files, system.css and general.css contain some generic Joomla styles. The last one is all the CSS for the template, here called template.css. The PHP code <?php echo $this->template ?> will return the name of the current template. Writing it in this way rather than the actual real path makes the code more generic. When you create a new template you can just copy it (along with the whole header code) and not worry about editing anything.

The template CSS files can have any number of files, for example conditional ones for different browsers. This one targets IE6:

This example is part of a technique to use a template parameter:

Blank Joomla Template Body

Creating our first template will be very, very easy! Ready?

All we need to do is use Joomla statements that insert the contents of any modules and the mainbody.

At this point (if you preview it), our site does not look very awe inspiring. The output is shown in Figure 9.3.

FIGURE 9.3 An unstyled template
FIGURE 9.3 An unstyled template

The template contains the following in reasonably logical order:

  • name of the site
  • top module
  • left modules
  • main content
  • right modules

The Least You Need to Know

The most basic template simply loads the Joomla modules and mainbody (component). Layout and design is part of the CSS, not Joomla.

The goal is to try and come as close to semantic markup as possible. From a Web point of view, it means a page can be read by anyone—a browser, a spider, or a screen reader. Semantic layout is the cornerstone of accessibility.

NOTE

What we have here really is only the potential for semantic layout. If we were to go ahead and put random modules in random locations, we would have a mess. An important consideration for CMS sites is that a template is only as good as the population of the content. It is this that often trips designers up when trying to validate their sites.

You will notice that we have used the first of a number of commands specific to Joomla to create this output:

The PHP echo statement simply outputs a string from the configuration.php file. Here, we are using the site name; we could have as easily had the following:


The name of this site is getCfg('sitename');?>

The administrator email is getCfg('mailfrom');?>

This template is in the template?> directory

The URL is

The jdoc statement inserts various types of (X)HTML output from modules of components.

This line inserts the output from a component. What component it will be is determined by the menu link:

NOTE

Interestingly enough, you seem to be able to have multiple instances of component output. Not sure why you would want to, but I thought I would let you know! Might be a bug.

This line inserts the output for a module location:

The full syntax is actually

We look at the various options for styles in the section about modules later in this chapter.

CSS Template Tutorial Step 1

At this point, we have a very bare template. I have created an installable template that is available from www.joomlabook.com: CSSTemplateTutorialStep1.zip.

This will install a template that has only two files, the index.php and template-Details.xml. I removed references to other files to give a bare bones output with no CSS. This is actually a useful diagnostic template; you can install it and track errors that are occurring with a component or module.


[previous] [next]

URL: