Compass Designs .net

In this article we will look quickly at installing joomla and then spend most of our time discussing the joomla doctype and how it relates to a valid joomla site. We'll also briefly look at how to construct a basic or blank joomla template with the index.php file.

Installing Joomla

There are several ways to do this, fantastico, manually, and there is a handy tool to do it http://joomla.astang.com/autoinstall. Please note I have never used this, so you are on your own!

My preferred method is to do it manually, its really pretty easy, especially if you have cpanel on your host server:

1. Go to your SQL databases and create (through phpAdmin) a database and user to use with Joomla.
2. Go to the file manager in your cpanel.
3. Create a directory for your site. Or if you are using a subdomain like we are (livesite.compassdesigns.net), the folder is automatically created when you create the subdomain. Navigate to the folder.
4. Use the Upload file link to upload a full version of Joomla (sneak to your local Starbucks/College to take advantage of a big fat free connection).
5. Click once on your uploaded file and you will see a menu appear. Click on "extract file contents".
6. Your done!

Now, we have only uploaded the files, we haven't "installed" it yet. I am not going to go into details of how to install http://help.joomla.org/content/view/39/132/

The Blank Joomla Template

Now, one of the points here is to start with a blank joomla livesitedesign.zip. In this file are the various files and folders that make up a blank Joomla template:

• index.php
  This file is the most important. It lays out the site and tells the joomla CMS where to put the different components and modules.
• templateDetails.xml
  This files details the author, copyright and what files make up the template (including any images used)
• template_thumbnail.png
  A simple image of your template (via a screen shot). Not critical
• css/template_css.css
  The CSS of the template. The folder location is optional, but you have to specify where it is. Note that the file name is only important in that its referenced in index.php. You could call it what you like.
• images/
  Any images that go with the template. Again for organization reasons, most designers put this in an images folder. Our will start out empty.

To add the template (again, copious tutorials exist) you go to the admin portion of your site and install the template by uploading the zip file.

Note you can actually add the files individually (not in a zip) too. You have to put them in yoursite.com/templates.

The index.php: joomla doctype

Overview of a Joomla Design

So here we are getting to the first significant part of this project. What actually is in an index.php file? The part we are going to talk about is the "doctype". This bit of code that code goes at the very top of a web page. Here things start getting messy, and to be honest, I only have a vague grip on it myself! If you don't want to be bothered by all the technical details, just be aware that at the top of our page we have this in our template:

Got it? OK, you can skip the next part then...

Browser Wars

The nitty gritty of doctypes starts getting messy. I especially like this observation from alistapart.com, [information on W3C's site about doctypes is] "written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She’s Got Mail.™". Anyway, there are several doctypes you can use. Basically, the doctype tells the browser how to interpret the page. Here the words "strict" and "transitional" start getting floated around (float:left and float:right usually). Essentially, ever since it started, different browsers have had different levels of support for CSS. This means for example, that Internet Explorer won't understand the "min-width" command to set a minimum page width. Shame really, because then you have to use "hacks" in CSS to duplicate the effect. Strict means the html (or xhtml) will be interpreted exactly as dictated by standards. A transitional doctype means that the page will be allowed a few agreed upon differences to the standards.

Now to complicate things, there is something called "quirks" mode. If the doctype is wrong, outdated, or not there, then the browser goes into quirks mode. This is an attempt to be backwards compatible, so Internet Explorer for example, will render the page pretending as if it was IE4. Scary eh?

Now, unfortunately, people sometimes end up in quirks mode accidentally. It usually happens two ways:

• They use the doctype declaration straight from the WC3 web page, the link ends up as:
  
  DTD/xhtml1-strict.dtd
  Except this is a relative link on the WC3 server. You need the full path as I showed above.
  
  
• Microsoft got involved again (I swear they do all their development after they've been down the pub) and set up IE6 so you could have valid pages, but be in quirks mode. This happens by having an "xml prolog" put before the doctype.
  
  <?xml version="1.0" encoding="iso-8859-1"?

Standards Compliant Joomla

So, here is the good bit, making a page standards compliant, where you see "valid xhtml" at the bottom of the page. Having your page be standards compliant does not mean really difficult coding, or hard to understand tags. It merely means that the code you use matches the doctype you said it would. That's it! Nothing else. Sometimes I get the feeling that people think of standards as some higher level of coding, but really its just saying what you do, and then doing what you say.

Some useful links:

• http://www.quirksmode.org/css/quirksmode.html
• http://www.alistapart.com/stories/doctype
• http://www.w3.org/QA/2002/04/Web-Quality
• http://forum.joomla.org/index.php/topic,7537.0.html
• http://forum.joomla.org/index.php/topic,6048.0.html

What else is in index.php?

Let's look at the structure of the header first. A great outline is at http://help.joomla.org/content/view/44/60/. Unfortunately it does have a layout based on tables, but we will change that.

We want to be as minimal as possible, but still have enough for a production site. The header information we will use is:

OK, so what's all that?

Makes sure that the file isn't being accessed directly.

We talked about this above. The "<?php echo _LANGUAGE; ?

What character set we are using (don't ask).

Header stuff that is set in the global configuration again. It includes the following tags (for example):

• <title
• <meta name="description" content="Installing Joomla, doctype and the blank joomla template" /
• <meta name="keywords" content="installing joomla, joomla doctype, blank joomla tempate" /
• <meta name="Generator" content="Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved." /
• <meta name="robots" content="index, follow" /
• <link rel="shortcut icon" href="/images/favicon.ico" /

We'll come back to this later.

To stop a bug, that being a flash of un styled content. Details courtesy of Blue Robot. Note this can be any script file and we'll be adding one in here later.

I am using import as a way to stop the site breaking with Netscape 4. Users of ancient browsers won't be able to get the CSS sheet so will see our neat un styled content. If you wanted to cater to these older browsers, we would have too many CSS hacks, so we do this. Somewhat of a brutal one, but hey, what are you doing with Netscape 4 anyway?

A blank joomla template body

This will be very very easy! Ready?

Now that's what I call lean code! I have a reasonably logical order:

1. name of the site
2. the pathway
3. top module (maybe navigation?)
4. left modules
5. main content
6. right modules
7. any bottom modules
8. footer

This order is called semantic markup. Or at least by the time we add our titles and sub-titles it is. Basically, it means the term paper like you used to write at college, you know, the one with neat logical titles, headers and organization. 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. For the wiki amongst you you can read more about semantic layout here.

Now its worth noting that what we have here really is only the potential for semantic layout. If one were to go ahead and put random modules in random locations, then you would have a mess. An important consideration for CMS sites, a template is only as good as the population of the content. It is this that often trips desingers up when trying to make their valid joomla template.

Now at this point, the only CSS I have applied is set all text to Verdana and 76% size.

A preview from our next joomla tutorial

Tutorial 3: Free Web Design Tools
So we are about to begin design the site for real, but first we need a few tools. Now, everyone probably has their own favorites, but here is a list I have been working on of all the tools you will need to design a site. The good part? They are all free for the downloading.

Important Note!

This tutorial series was written in 2005. Since then I have developed some official documentation for Joomla template design. It uses a superior CSS layout strategy that does not reply on absolute positioning, which allows easier clearing of the footer. You can find out more at: