FOLLOW US Joomlashack Facebook Joomlashack Twitter Joomlashack RSS

Joomlashack logo blog

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Tutorial 1: Creating a W3C valid Joomla template for your Joomla website

In this series of joomla tutorials, we'll be building a valid joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. The site will actually be live on-line at from the very beginning, you'll be able to see the different stages as the design develops. As this is a CSS designed site, you'll be able to slowly see the raw joomla design get styled step by step.

Joomla Design for Web Standards

You may have seen words such as "web standards" or "CSS" or even "accessibility". They are often all used together in some sort of commentary about a "design for the future rather than the past".

What do we mean by that?

We'll discuss it more in another article, but many web pages are designed for older browsers. How so? Browsers have continually evolved since the www started. New ones have appeared and old ones have disappeared (remember Netscape?). Another complicating factor is that different browser makers (like Microsoft) tend to have their browsers interpret html/xhtml in slightly different ways. This has lead to web designers having to design their websites to support older browsers rather than new ones. It's often decided that the web page needs to appear properly to these "legacy" browsers.

Web standards put into place a common set of "rules" for all web browsers to use to show a web page. The main organization pushing these standards is the World Wide Web Consortium (WC3), whose Director, Tim Berners-Lee has the distinction of actually inventing the world wide web in 1989 (how's that on a resume!).

Cascading style sheets or CSS was developed a few years ago that made styling easier for web designers. You have all styles in a separate file and they are applied to the whole site. Rrecently is has been part of a movement to separate content from presentation. This is another thing we'll visit later, right now we'll just note that using CSS is key to building a valid Joomla website that meets WC3 standards.

Accessibility, sometimes mistakenly called usability, is an attempt for a page to be accessible to all possible viewers. Usually this is chosen to mean such examples as someone that is blind (uses a screen reader) or old (struggles with small fonts/delicate mouse based navigation). I use these two as examples as they are the ones quoted most often (don't shoot the messenger!). I take a much broader view and include viewers with or without disabilities, young or old, or even non-human, such as search engine spiders!

Trying to get your joomla website to meet these standards can be hard. Any sort of CMS generates its content dynamically, which can mean code gets put in that invalidates your site, the joomla design is never constant.

Overview of a Joomla Design

There is no "right way" to create a website, it depends on the designer's own background. Those more graphical make an "image" of a page in a graphics program like Photoshop and then break up the images to use (known as slice and dice). More technologically inclined designers will often just jump straight into the CSS and start coding. As a goal of this project is to have the process be as transparent as possible for people to see, we'll use a process with lots of small steps. We'll have two other twists in the joomla design process:

  • We will put up a site a raw content very early in the process, normally this would come as one of the last stages.
  • We will design a basic 3 column CSS joomla template first and then adapt to our desired design. We are doing this so that it's possible to see a "universal layout" and see how it can be adapted to different needs.

So, with those two points in mind, here is our modified design process.

  1. Outline and discuss website criteria.
  2. Install Joomla with no CSS, a raw joomla design with no styling, publish onto web.
  3. Create basic position 3 column CSS layout.
  4. Adapt 3 column CSS joomla template and complete any further styling.
  5. Adapt this Joomla design to achieve desired site functionality.
  6. Take comments generated by community and create detailed guide to building a valid Joomla website.

The URL is We'll start with a fresh Joomla website install. We'll use this section of this website to place the articles discussing the process. We'll also use a comment tool so that anyone can make comments. Hopefully this will be a learning experience for us all.


  • Joomla is a free, powerful content management system, we'll be using it to build a valid Joomla template that meets WC3 standards.
  • Web Standards describe a set of rules for all web browsers to use to interpret web pages. CSS is a design protocol that is closely tied to web standards.
  • Getting a joomla design to meet W3C standards and validate can be difficult.
  • Microsoft needs to be taken out back and shot.


A preview from our next joomla tutorial

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

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Tutorial 2: Installing Joomla, doctype and the blank joomla template

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

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 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 (, 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 Joomla. Here is the 'official' guide

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: 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

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" lang="">

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, [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:
    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:

What else is in index.php?

Let's look at the structure of the header first. A great outline is at 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:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" lang="">
<meta http-equiv="Content-Type" content="text/html; " />
<?php mosShowHead(); ?>
<script type="text/javascript"> </script> <!-->
<style type="text/css" media="screen">@import
"<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?>

OK, so what's all that?


<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" lang="">

We talked about this above. The "" is just pulling the language from the site global configuration.


<meta http-equiv="Content-Type" content="text/html; " />

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


<?php mosShowHead(); ?>

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.


<script type="text/javascript"> </script>

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.


<style type="text/css" media="screen">@import
"<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?>

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?

<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosLoadModules('top');?>
<?php mosLoadModules('left');?>
<?php mosMainBody(); ?>
<?php mosLoadModules('right');?>
<?php mosLoadModules('bottom');?>
<?php include_once('includes/footer.php'); ?>

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.

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.


Joomla template design from Compass Design� 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design
Please This email address is being protected from spambots. You need JavaScript enabled to view it. if you'd like to use this article on your site


Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Just two weeks after its release on, more than 2,000 Joomla users have answered our first-ever Joomla Survey.

Joomlashack has many big questions about Joomla users that the survey will help answer, such as:

Is Joomla mostly used by developers?
Nearly half of all respondents have made changes to the code of a Joomla component or the core code of Joomla itself, with 57% claiming PHP programming knowledge.

Is Joomla easy to install?
0ver 80% of those surveyed say that installing Joomla on a server was so easy it took "a few minutes."

What other content managements systems do people use instead of Joomla and why?
32% of respondents say they have used WordPress, while only 11% have used Drupal.

Does Joomla make a good blogging platform?
Over 60% say they use Joomla for a blog site.

Take the Joomla Survey today and win free templates for life or a $100 Amazon gift certificate.

JoomlaShack is pleased to announce the addition of Christopher Baskind, Dave Childs and Steve Burge to the forum team.

Both Christopher and Dave have each volunteered many hours helping other community members and Steve is generous to offer his expertise on the SEO forum. Our forum grows stronger because of this type of great user-to-user support.

Thank you gentlemen. Welcome Aboard, we're glad you are here!

Take the Joomlashack Survey!

Got a few minutes? We'd like to ask you for a moment of your time. In return, we'll give you 30% off all of our commercial products and if you're lucky, you could win a $100 gift certificate to or free Joomlashack templates for life.

It's so easy for you to learn about Joomlashack, and yet we know so little about you, our customers and community. That's why we've created this survey, to help us gain some insight into the skills and needs of our customers and Joomla! users.

Read more or jump straight to the Joomla Survey questions *Survey now closed - thanks to all who took part now. We appreciate your participation.

Written by Paola Gómez

Flash Rotator Module

Based on Jeroen Wijering's Flash Image Rotator, and a predecessor to the popular Flash JPG Rotator Module we have updated this module to the next version (2.0). This module is renamed to the Flash Image Rotator as it now supports PNG, GIF, and JPG images. There are a lot of enhancements to this version such as SEO optimization, transition additions, text navigation and icons, better control of link targets, autostart/pause, improved handling of Internet Explorer cache and more! Give it a try. It's FREE!

Live Demo

Download the latest version

JPG Flash Rotator Module for Joomla

Did you know that Flash is actually not valid XHTML?

Luckily, there is a work around and we've updated the Flash JPG Rotator Module to implemement just that. The Flash Rotator Module now uses FlashObject to validate. Also added, is the wmode=transparent option so now you can sylize your module with a class-suffix and add background images.

*If you need support please register and use the Support Forum.


Back in December we asked the Joomlashack community to nominate their favorite charity for our contest. In eight days you sent us over 110 nominations from worthy organizations from around the world. After a fascinating, fun, and difficult evaluation process, Team Joomlashack picked these five charities as our finalists.

And the runaway winner of the contest were the children of Casa do Caminho Orphanage, with almost 50% of the vote.

Written by Paola Gómez

We need your help to give a deserving charity $1000 USD

Ready to vote for one of our five finalists? *Sorry voting is now closed

Back in December we asked you to nominate your favorite charity for our "Charity Starts with a Joomla Home(page)" Contest.

Now it's time for you to vote for the charity you believe is most deserving of a donation of either a free website design or $1000USD. We wish all five could win, but now you, our community, will decide.


Written by Paola Gómez

SmoothGallery is a javascript and CSS powered slideshow gallery written by Jonathan Schemoul. Jonathan has released this nifty piece of code to the open source community so we thought you might like to use it in Joomla! We're happy to release our beta version of Smoothgallery for Joomla! today. This is a free component to help you manage your smooth galleries in Joomla! This component is for Joomla 1.0.x and is available here for download. Official updates will be available in the forum. Look for the 1.5 version coming soon. Enjoy!