A Joomla template is actually a series of files within the Joomla Content Management System (CMS) that control the presentation of the content. So, for all those uninitiated, a Joomla template is not a website in itself nor it represents a complete website design. It’s simply a template, i.e., a basic foundation design that’ll help you preview your Joomla website. In order to produce the effect of a ‘complete website’, the Joomla template works in tandem with the content stored in the Joomla databases.

What are the contents of Joomla template? Basically, any Joomla template contains design information, like stylesheets, images, JavaScript, etc. Simply put, Joomla template is a theme or a skin of your Joomla system. However, there can be only one Joomla template per page.

What’s the purpose of a Joomla template? What effectively Joomla template does is to command Joomla where to place Components and Modules, and how to display the Modules. You must be well versed with Joomla Modules, as these can be displayed in plenty of variations and each variation is different in its HTML output structure, including the most popular variation output – the XHTML output.

Users of Joomla 1.5 will be well aware of the concept of Joomla Chrome in that version. It is the process where Joomla templates were allowed to skin any component using new Joomla MVC structure. You can found pieces of Joomla Chrome in HTML directory of Joomla template. Undoubtedly, this is one of the most robust additions to the capabilities of Joomla templates.

Why is it called a ‘template’? This is because generally, you’ll need only one HTML/CSS layout for your entire website. And this ‘template’ becomes a model for every page on your website. The visitors may be accessing all the pages or just one page of your website, but the same template will be used to design each of these pages. Joomla has sufficient in-built intelligence to incorporate different content from its database into the same template to give a unique appearance to every web page as it’d be presented to the visitors.

The USP of Joomla template is in its architecture, where the design is a separate entity and the content is also a separate entity. While the design is contained in a small group of files, the content is contained in a database. This is a drastic improvement over the practice of creating a bunch of static pages, and each page having different design elements that are repeated for every page. The advantages of this approach include:

1. Flexibility and ease of changing design of your website within a few seconds. All you need to do is simply upload a new template or make necessary changes to the existing one. All the changes will be reflected on all the web pages. For instance, if you want to increase the font-size of a text, all you need to do is edit the CSS and increase the size accordingly, it’d be reflected across all the pages of your website.

2. It makes the backing-up of the content of the site easier. All you need is to download a single database file and you are done for your entire site! There are also some Joomla extensions available that can email a daily database backup automatically.

3. Depending on the variables, content can be accordingly presented. For instance, registered users can be allowed to view additional content than the unregistered ones. Thus, restrictions against non-members can be easily placed with Joomla templates.

W3C and Table-less Design

There are, basically, three essential attributes of a good quality webpage. These are usability, accessibility, and SEO-ability. In fact, if you take a holistic approach towards web designing, then all these qualities tend to overlap in the sense that is a webpage is usable, it tends to be both accessible and SEO-able. In other words, all you need to do is target one quality and the others will fall in line. Perhaps, the simplest mode of achieving these desirable features in a webpage is to use the framework laid out in the World Wide Web Consortium (W3C) web standards.

Take, for example, a site that is structured semantically with XHTML. It’ll be easily read with the use of a screen reader by the one who has poor eyesight. Moreover, it can also be easily read by a search engine spider. The working of Google is similar to that of a screen reader in that it does not know how to read your website but it achieves the task.

Basically, Web standards are nothing but a set of rules put in place for use by the web browsers in order to display a webpage. W3C is the organization that is behind the publication of these standards. It is the same organization, whose Director, Tim Berners-Lee, is credited with the inventing the World Wide Web in 1989.

Interestingly, if you ask, say, 10 designers about web standards, you’ll most likely get 10 different replies. But one common thing that emerges out of their replies is that these are based on using valid code in any language you use – HTML or XHTML.

Semantically Correct Code

A semantic webpage simply means that XHTML in the webpage describes only content and not presentation. In other words, it means employing a structured organization of H1, H2, H3,… tags and using just tables for tabular data. A semantically correct code does not use layout for tabular data.

Cascading Style Sheets (CSS)

CSS is similar to having semantic code to control the look and layout of a webpage. In effect, CSS is a simpler mode of adding style (like fonts, colors, spacing, etc.) to the webpages. CSS exists parallel to XHTML code and thus, it helps you to separate content from presentation, i.e., semantic code from CSS. A good example of understanding this concept is CSS Zen Garden, a website where the same semantic XHTML is shaped in different and unique ways with different CSS. The net result achieved is the webpages that look very different but have the same core content.

However, you can still take ample steps to ensure that template is accessible (like scalable font-sizes), usable (like clear navigation), and optimized for search engines (like source ordered).

Prateeksha Web Design has all the skills, expertise and experience to make sure that your Joomla Template website ranks among the top 10 of every major Search Engine results. and with our professional help, your Joomla Template website can also feature among top results in Google.
If you want develop your own Joomla Template then visit http://www.prateeksha.com and get the best result of your projects.

If you need more information on what a CMS is, you check out the Wikipedia.

You can find a lot of information at the Joomla home page for the more advanced settings and features but I’ll do my best to give you as much information as possible.

Here’s what you will need to get started:

For now lets start with a basic local installation of Joomla on your PC. To fully implement Joomla, you will need a file system, a database and a web server. Instead of installing and configuring each of them separately, we will a package which includes all of them.

You can find these packages at Joomla Extension directory which by the way is where all the extensions for Joomla are published. Extensions are a way of customizing you site with Joomla. We will go extensions a bit later in this tutorial.

Basics of Joomla

There a few major components that Joomla uses to accomplish the task and lets go through each of them one by one. As with any CMS, any Joomla site has 2 faces, first one is what the world sees’. Its all fancy and beautiful and all your work behind the scenes is paid off here. We will refer to this part of the site as the frontend from now on. The other side of the web-site is the administration site where you spend a major chunk of your time adding content to you site and setting up how its displayed on the frontend. This is the back end of the site. The backend for Joomla is a very important part of your website. Everything you see on the front end is added and configured in the backend. To get to the administration page of your Joomla site, just add “/administrator” to the end of your page url.

Eg. localhost/Joomla/administrator/

The default username/pswd for these standalone servers is admin/admin. If that doesn’t work, you might want to check the Read Me notes that came with it. Static content in Joomla is created as Articles. These articles can be placed in different Categories which in-turn are in Sections. If the article is a stand alone page and does not belong in any of these Sections, it can be left out as a “Uncategorized” which means it’s a static page by itself.

Creating an Article

To create an article simply click on the “Add new Article” icon on the dashboard or select Content à Article Manager

Click on the button New to create a new article.

You can start adding content to the text area similar to MS Word and add formatting to it. Once done you can save by clicking the Save button on the top right.

Lets create a new article called “Hello World” and make it a static page by selecting the Section as Uncategorized.

And if you want to see how your article looks on your site, click the Preview button on your top right corner.

There you go, you have created an article in Joomla which is also a static page if you want it to be.

Ganesh Madireddy is an IT professional who specializes in creating small to medium scale web solutions using open source Content Management Systems and configuring them for Search Engine Optimization. He is also the webmaster for a few high profile web-sites.
You can visit his web-site at http://www.3rdrockit.com to find more tutorials on Joomla (including this one with images) as well as other open source software packages.