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 i

nto details of how to install Joomla. Here is the
‘official’ guide 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 template. So, let’s set that up. You will need this file: 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

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″?>

The part about IE6 quirks mode is important for us. We are only really
designing for IE6+, so we will make sure that its running in standards
mode. This will minimize the hacks we have to do later on. Its worth
noting that the xml prolog isn’t essential anyway. We’ll be taking note
of future releases of Joomla and be leaving it off.

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; ?>” is
just pulling the language from the site global configuration.

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>Installing Joomla, doctype and the blank joomla template</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.

Tutorial 5: Making a 3 column Joomla Theme for your joomla website

Tutorial: Making a 3 column joomla theme for your website

In this joomla tutorial, we will look at a 3 column theme for your
joomla website. Most joomla websites use 3 columns and having the theme
start with that is a good foundation. Then later we can hide side
columns if there is no content in them for that page.

Let’s face it, making a joomla theme with tables is easy. That’s why
we all did it (may we hang our heads in shame). Achieving the same
using CSS is much harder. The learning curve is steep and there are
lots of issues with how browsers interpret the CSS. We mentioned this
some in our joomla tutorial: Joomla, doctype and the blank joomla template.

I am going to move quickly on to the actual layout possibilities,
but I recommend reading at least one “beginners guide to CSS” if new to
it. Here are a few suggestions:

Kevin Hale’s – An Overview of Current CSS Layout Techniques
htmldog’s CSS Beginner’s Guide
Mulder’s Stylesheets Tutorial
yourhtmlsource.com

Ok, so now we have done some bedtime reading, or knew some of CSS to
start, its time to look at our layout choices. Here is a decent list of
all the CSS template /CSS themes I have come across:

• [Position is Everything's] One True Layout
• [Dennis Kracht's] 3col background-color Layout
• [Rob Chandanais'] Blue Robot “3 col Flanking”
• [Eric Costello's] glish.com “3 columns, the holy grail”
• [Holly 'n John] “Three Column Stretch”
• [Mark Newhouse's] nn4_3col_header
• [Craig Salia's] saila_layout
• [Al Sparber's] 3boxnoscript
• [Owen Brigg's] see multiple examples
• [Douglas Livingstone's] fixed: px
• [Douglas Livingstone's] flexible: %
• [Douglas Livingstone's] flexible: % or px, full bg colors on side columns
• [Dug Falby's] A List Apart article
• [Ben Meadowcroft]
• [Holly 'n John] Source Ordered Columns
• [Alex Robinson's] one of several
• [Mike Foster's] Absolute Magnitude Site
• [Holly Bergevin's] unique demo for Jonas
• [Holly 'n John] 3 Col – Equal Height “Flag demo”
• [pixy's] 3 Col – Equal Height with Footer (no hacks)
• [Jason Estes'] any column expands height
• [Enzo's] 3 Col Pixel Perfect w/header & footer
• [Ben de Groot's] 3 Col Flexible w/header&footer
• [Holly 'n John] Ordered Borders Layout
• [Holly 'n John] The Rigid Piefecta
• [Paul O'Brien's] Three Equalizing Columns Layout
• [Paul O'Brien's] Three Equalizing Columns Layout PLUS Source ordering
• [Tonico's] “Flexible Layout” with elastic behaviour
• [Liam Delahunty's] Centered layer – version 1
• [Ruthsarian Labs] Skidoo – 3 Columns
• [Gavin Kistner's] 3 Column Border Layout
• [Alex Robinson's] Liquid center and right
• [Alscreations's] With sub-header for menu/breadcrumbs
• [WebRef's] Replicate front page tutorial
• [M. Meadhra]/Builder.com with re-ordering column code
• [Peter Lambert's]Inneroptics layout
• [Tiffany B. Brown] multiple examples
• [Thierry Koblentz'] Liquid center (no hacks)
• [John Oxton]
• [luci's] 3 Cols Source Ordered Floating Layout
• [Thierry Koblentz'] All Liquid (no hacks at all)

Although its worth taking a while to look some of these over. This
list is more of a resource you can bookmark and come back to later. You
could use any of them to make a joomla website.

A Three Column Joomla Theme through CSS

After reading through any of these CSS guides above, or know a
little youself, you will know that there are a number of ways to layout
a page. Now, for those with a little CSS background already, you might
want to wander over to csscreator.com; http://www.csscreator.com/version2/pagelayout.php.
Its a great tool where you can make an assortment of layouts and it
will generate the CSS for you, don’t leave home without it!

However, for the purposes of this joomla tutorial, we are going to
be using a different layout technique (csscreator uses floats), that
being absolute positioning. I think that using this CSS is perhaps the
easiest model to understand for beginners. Quite simply you specifiy
exactly where the “box” of content will be on the page. So for example:

will make a box that is 200px wide, and starts 20px from the top and
50px from the left. Now, 50 pixels from what I hear you ask. Well,
there is a trick here, normally it will be 50 pixels from the top of
the viewport (browser window). However, if the parent selector (the box
the leftcontent box is in) is also positioned, then the leftcontent
style will be relative to THAT. OK, you can go grab another
beer/chai/sherbet, that made no sense to me either! Let’s add another
style and draw a couple of pictures…

This will be the parent box:

If curious, we have changed the type of positioning from absolute to
relative (there is also fixed). We are getting into what is called
“document” flow and how elements effect other elements. Read any of the
layouts above and you will find discussions on this. OK, let’s use this
html as out first example:

Based on our two CSS rules above, this would look like:

OK, not much use. Now let’s put the leftcolumn div inside the wrapper (hey, why do you think we called it “wrapper”?)

Now it should look like this:

Much better. Now the text is all ontop of itself, but we don’t need
to worry about that at the moment. We can now look at the CSS we will
use for our page. Note this gets put in a seperate CSS file called
layout.css, which is then imported into template_css.css. I tend to
seperate layout from typography in design, then put together for
production. One reason is to try and reduce browser errors. Many of
these errors are when you try and combine positioning with padding
and/or size. Try to avoid applying padding/borders and a fixed width to an element.
By putting all my positioning in this sheet and all my padding and
borders in another, it forces me to do this (I combine the sheets
later). Steps like this make validating your joomla website much easier.

So, with that bit of explanation, here is our 3 column joomla theme:

An adpatation of a layout used a few places round the web, you can read more about it at http://glish.com/css/7.asp.
Note we have dropped a large amount of the CSS to make it simpler and
because we are not going to be supporting IE5.X with this site.

Its not *quite* simple absolute positioning (you didn’t think it
would be that easy did you?). The leftcontent and rightcontent is
positioned as we just saw. But the center content seems to have no
positioning at all. What gives? Well, absolutely positioned elements
are taken “out of the document flow”. This means other content will
just get placed as though these absolute elements were not there. We
saw this in our example above when our text overlapped. We are doing
the same thing here, but have been crafty by using left and right
margins for the centercontent the same width as the left and right
columns. This means that the center column content will squeeze in
between the two side columns even though it doesn’t know they are
there.

Right, so its live site design time (drum roll). Remember, our index.php file currently looks like this:

Now we will put in some positioning with our new CSS:

OK, so now we have a 3 column joomla theme, not bad. Let’s take a quick look; livesite.compassdesigns.net
. Well, our columns are there, and the right places.Resizing your
browser you will see that the size of the middle column adjusts.
Commonly called a fluid CSS layout. Taking a quick look in
Internet Explorer 6 we see some weirdness going on with the bottom of
the left column, but hey, weird and IE often occur together in a
sentence!

Does it validate?

Yes, we still have a W3C Standards Compliant CSS Joomla Website . OK, I grant you it doesn’t look that amazing right now, but hey, that’s what next week’s installment is for!

Tutorial 6: Enhancing a Template for Joomla SEO