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.
Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website
As part of the Official Joomla Documentation program, this tutorial has been developed by Barrie North of Compass Design. As well as here at the official Joomla Dev site (dev.joomla.org) it is also available at www.compassdesigns.net in various complete formats, Word, PDF and HTML.
In this tutorial, we'll go through the steps of creating a joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. Specifically, we will create a template that uses cascading style sheets (CSS) to produce a layout without use of tables. This is a desirable goal as it means that the template code is easier to validate to World Wide Web Consortium (W3C) standards. It will also tend to load faster, be easier to maintain and perform better in search engines. We will discuss these issues in detail later in the tutorial.
Included in this tutorial are the following chapters
- What is a Joomla Template?
Explains what functions are performed by a Joomla template and the difference between a template with no content and when content is added into the CMS
- Localhost Design Process
How the design process differs to that when designing a static (X)HTML web page.
- W3C and Tableless Design
The implications of tableless design in Joomla and the relationship between W3C standards, usability and accessibility
- The Template Components
What files make up a Joomla template and what functions they perform
- Using CSS to create a layout
How to create a source ordered 3 column layout using CSS rather than tables
- The Default Joomla CSS
An introduction to basic CSS styles that should be used with Joomla, along with the default list of styles that are used by the Joomla core
How to place, and style modules, including new techniques for rounded corners.
- Hiding Columns
How to control when columns are shown and how to hide them when no content is present
- Appendix A:Tips and Tricks
Variable Page Widths, Rounded Corners, Text Resizers and More