Joomla! 1.5 Template Design

Joomla! 1.5 Template Design
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 45%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters


  • Create Joomla! 1.5 Templates for your sites
  • Debug, validate, and package your templates
  • Tips for tweaking existing templates with Flash, extensions and JavaScript libraries

Book Details

Language : English
Paperback : 284 pages [ 235mm x 191mm ]
Release Date : June 2009
ISBN : 1847197167
ISBN 13 : 9781847197160
Author(s) : Tessa Blakeley Silver
Topics and Technologies : All Books, CMS and eCommerce, Content Management (CMS), Joomla!, Open Source

Table of Contents

Chapter 1: Getting Started as a Joomla! Template Designer
Chapter 2: Template Design and Approach
Chapter 3: Coding It Up
Chapter 4: Debugging and Validation
Chapter 5: Your Template in Action
Chapter 6: Joomla! 1.5 Template Reference
Chapter 7: Dynamic Layouts, Menus, and Interactive Elements
Chapter 8: AJAX/Dynamic Content and Interactive Forms
Chapter 9: Advanced Enhancements and Design Tips for Joomla! 1.5
  • Chapter 1: Getting Started as a Joomla! Template Designer
    • Joomla! 1.5 perks
    • Pick a template or design your own?
      • Drawbacks to using a pre-made template
      • This book's approach
    • Things you'll need to know
      • Joomla! 1.5
      • CSS
      • XHTML
      • PHP
      • Not necessary, but helpful
    • Tools of the trade
      • HTML editor
      • Graphic editor
      • Firefox
        • We'll be developing for Firefox first, then IE and other browsers
    • Summary
  • Chapter 2: Template Design and Approach
    • Things to consider
      • Types of sites
      • Modules, components, and plugins
    • Getting ready to design
      • We have a problem
      • It gets worse
    • The solution: Rapid design comping
    • Let's get started!
      • Think about it: Positions
      • Sketch it
        • Consider usability
      • Start with the structure
        • The DOCTYPE
        • The main body
        • Attach the basic stylesheet
        • Basic semantic XHTML structure
    • Adding text: Typography
      • Start with the text
      • A quick note about starting to style with CSS
      • Font choices
        • Get daring: Font stacks
        • sIFR
      • Cascading fonts
      • Font sizing
      • Paragraphs, blockquotes, and other text markup
      • Default links
      • Form elements
    • The layout
      • How wide to make your site?
        • CSS tables versus floating divs
      • Navigation
      • More navigation: Joomla! 1.5 specific styles
      • Color schemes
      • Two-minute color schemes
      • Color schemes with Gimp or Photoshop
      • Adding color to your CSS
      • Create the graphical elements
        • Graphic styles
        • Handling edits and changes
    • Relax and have fun designing!
    • Slice and export
    • Don't forget your favicon!
      • Make your favicon high resolution
    • Summary
  • Chapter 3: Coding It Up
    • Got Joomla?
    • Understanding the Joomla! 1.5 template
      • Basic, core template files
      • Advanced template files
    • Your Joomla! 1.5 work flow
    • Let's build our template!
      • Tabula rasa
      • Including Joomla! 1.5 content
      • Congratulations!
      • General Joomla! stylesheets
      • The content component
      • Module positions
      • Jdoc tag overview
      • Updating the templateDetails.xml file
      • Placing module positions in the index.php file
        • Assign modules to your positions
      • Hello? Content is wrapped in tables. Gross!
        • Everything is better with Beez
      • Using template overrides
      • Final CSS tweaks and fixes
    • Summary
  • Chapter 4: Debugging and Validation
    • Don't forget about those other browsers and platforms!
    • Introduction to debugging
      • Troubleshooting basics
        • Why validate?
        • Joomla jdoc tags and PHP
        • CSS quick fixes
      • Advanced troubleshooting
      • Fixing CSS across browsers
      • Box model issues
      • Everything is relative
      • To hack or not to hack
      • Out-of-the-box-model thinking
        • Style for IE separately with conditional comments
    • The road to validation
      • XHTML validation
      • CSS validation
      • Advanced validation
        • FireFox's JavaScript/Error Console
        • The Web Developer Toolbar
        • FireBug
      • Checking your work in Internet Explorer
        • Run multiple versions of IE
        • IE Developer Toolbar
        • Don't forget about the QorSMode bookmarklet
      • Extra credit: Optimizing for text and mobile browsers
        • What about the new Mobile Safari browser?
    • Summary
  • Chapter 5: Your Template in Action
    • A picture's worth a thousand words
    • Template packaging basics
    • The templateDetails.xml file
      • Quick XML syntax overview
      • From the top
      • Descriptive tags
        • Copyright and licensing?
      • File, position, and param tags
        • What about the html directory?
        • Param tags
    • ZIP it up!
      • No way to ZIP?
    • One last test
      • Troubleshooting installations
    • Summary
  • Chapter 6: Joomla! 1.5 Template Reference
    • Jdoc include tags
      • Site header information tag
        • Joomla! 1.0 to 1.5 conversion
      • The component include tag
        • Joomla! 1.0 to 1.5 conversion
      • Module position tags
        • Module position styles
        • Joomla! 1.0 to 1.5
    • Menu output options
    • Using overrides
      • Module overrides and chrome
        • How module chrome works
      • Component overrides
      • Pagination
    • Additional template information
    • Common Joomla! CSS
      • Joomla! 1.5 CSS ids
      • Joomla! 1.5 CSS classes
        • Joomla! 1.0 to 1.5 conversion
    • Template parameters
      • Define a parameter in the templateDetails.xml file
      • Retrieve a parameter in the template file
      • Useful standard parameter types
    • Summary
  • Chapter 7: Dynamic Layouts, Menus, and Interactive Elements
    • DIY or extensions?
    • Dynamic layouts
      • PHP syntax
      • PHP if/else conditional statements
      • Update your CSS
    • Dynamic menus
      • Drop-down menus
      • DIY Suckerfish menus in Joomla! 1.5
        • Applying the CSS to Joomla!
        • Applying the DOM Script to Joomla!
    • Flash-ize It
      • Flash in your template
        • Pass Flash a Joomla! variable
        • The ObjectSwap method for Flash
      • Flash in Joomla! content or modules
    • Summary
  • Chapter 8: AJAX/Dynamic Content and Interactive Forms
    • Preparing for dynamic content and interactive forms
    • Joomla! extensions
      • Deciding where AJAX is best used
      • Installing the Joomla! comment component
      • Installing the core design Ajax Pagebreak plugin
      • Installing the AJAX RSS Reader Version 3 with Draggable Divs module
      • AJAX: It's not just for your site's users
    • The AJAX factor
      • JavaScript component/plugin scripts
        • The problem
        • Enter jQuery lightBox
    • Summary
  • Chapter 9: Advanced Enhancements and Design Tips for Joomla! 1.5
    • Giving users control
    • Editing a template override
    • Adding suffixes to modules and pages
      • Page suffixes
      • Module suffixes
      • The trick
    • Design tips and tricks
    • The cool factor essentials
      • Backgrounds
      • Lists
        • See it in action
      • Rounded corners
        • The classic: All four corners
        • The two image cheat
      • Text to image replacement
        • Extra credit: Use PHP to make graphic headers easy
        • More extra credit: Make unique fonts even easier with the sIFR technique
      • Learn all about your image editor and keep tabs on current design trends
    • Good design isn't always visual: Looking at SEO
      • Search-engine-friendly URLs
      • Keywords and descriptions
    • Summary

Tessa Blakeley Silver

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media), Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 25 submitted: last submission 30 Sep 2013

Errata type: Typo | Page number: 9

"suites" should be "suits"


Errata type: Grammatical | Page number: 13

Next to last line of first bullet item: "...given by author," should be "...given by the author,"


Errata type: Typo| Page number: `13

"worth while" should be "worthwhile"


Errata type: Grammatical | Page number: 14

"...checking out Bluefish editor" should be "...checking out the Bluefish editor"


Errata type: Grammatical | Page number: 14

Last lines of the last two paragraphs on the page: "discuss in this book" should be "discussed in this book" "...techniques suggest in" should be "...techniques suggested in"


Errata type: Other | Page number: 14

"...lets text within..." should be "...lets you wrap text within.."


Errata type: Grammatical | Page number: 18

"...having it to be clean..." should be "...having it be clean..."


Errata type: Typo | Page number: 26

"user5b" should be "user5"


Errata type: Typo | Page number: 28

First line, second paragraph:
", which uses using" should be ", which uses"


Errata type: Typo | Page number: 52

Second line, first paragraph under Navigation:
" to generat..." should be " to generate..."


Errata type: Technical | Page number: 52

Last sentence, top paragraph:
You can also check out A List apart's article "Practicle CSS Layout Tips, Tricks & Ideas":
1. "A List apart's" should be "A List Apart's"
2. "Practicle CSS Layout Tips, Tricks & Ideas" should be "Practical CSS Layout Tips, Tricks & Techniques"
3. The correct link is ""


Errata type: Typo | Page number: 54

CSS code, bottom of page:
" #current a{" should be ".menu #current a{"


Errata type: Other | Page number: 60

"Skeeping this in selecting icons,..." should read "Keeping this in mind, selecting icons,..."


Errata type: Typo | Page number: 64

"....text that will be set to display:none or text-aliged out of..." SHOULD BE "....text that will be set to display:none or text-align out of..."


Errata type: Grammatical | Page number: 75

Tip, 4th line:
"near as lenient" should be "nearly as lenient"


Errata type: Typo | Page number: 87

First bullet, 5th line:
"...good practice to incldue the" should be "...good practice to include the"


Errata type: Grammatical | Page number: 101

Last line, first paragraph under Final CSS tweaks and fixes:
"always a room..." should be "always room..."


Errata type: Code | Page number: 105

#right .moduletable h3{
margin-top: 15px 0 0 0;
should be:
#right .moduletable h3{
margin-top: 15px;


Errata type: Typo | Page number: 146

"templateDetials" should be "templateDetails"


Errata type: Typo | Page number: 163

First line, first paragraph:
"Beez module.php file," should be "Beez modules.php file,"


Errata type: Grammatical | Page number: 164

Second line, third paragraph:
"...the various variable and pJoomla! parameter" should be "...the various variables and Joomla! parameters"


Errata type: Grammatical | Page number: 166

"called as OOP." should be "called OOP."


Errata type: Other | Page number: 166

Last line, second paragraph under Addtional template information: "(the Control)." should be "(the Controller)."


Errata type: Update | Page number: 193

Drop-down menu extensions: The link has changed. The current link is:


Errata type: Typo | Page number: 87

There is a code snippet at the top of the page that reads jdoc:include type="module" name="user1" style="xhtml". This should read jdoc:include type="modules" name="user1" style="xhtml".


Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Joomla! 1.5 Template Design +    Mastering Magento =
50% Off
the second eBook
Price for both: £24.65

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book


  • Debug and validate your template code
  • Use the W3C's XHTML and CSS validation tools
  • Package up your finished template into a working ZIP file
  • Know the standard XHTML markup and CSS classes for Joomla!
  • Create Suckerfish drop-down menus
  • Get Flash content quickly into your Joomla! site
  • Create interactive and dynamic forms in your Joomla! site
  • Download and install Joomla! Extensions for your Joomla! site
  • Use the wrapper (Wrapper Menu Item) for fully working AJAX applications

Chapter 1 introduces you to the Joomla! 1.5 CMS, letting you know what you'll need to be aware of regarding the Joomla! 1.5 template project you're ready to embark on. The chapter also covers the development tools that are recommended and web skills that you'll need to begin developing a Joomla! 1.5 template for the most popular, robust, Open Source, content management system available for the Web today!

Chapter 2 covers the key elements of a Joomla! template and what considerations to make while working with your mock up. You will learn some basic techniques for image extraction and optimization, and some tips and tricks to enhance your design workflow and speed up the design revision process.

In Chapter 3, you will learn how to set up your development environment and an HTML editor for a smooth work flow. You will also learn how to make your template truly table-less by implementing template overrides.

Chapter 4 will help you understand the basic wash—rinse—repeat process of debugging and validating your template's code. You will learn how to use the W3C's XHTML and CSS validation tools and further explore the value of using Firefox as a development tool using its JavaScript Console and Firebug extension.

In Chapter 5, you will learn about the templateDetails.xml file and what each part of that file does in detail. Also, you will learn how to package up your finished template into a working ZIP file that anyone should be able to upload into their own Joomla! installation.

Chapter 6 covers key reference information under easy-to-look-up headings that will help you with your Joomla! template development. From the many CSS ID and class styles that Joomla! itself outputs to Joomla!'s jdoc tags and their controlling attributes, information in this chapter is listed along with key links to bookmark to make your template development as easy as possible.

In Chapter 7, you will learn to make your layout dynamic so it can handle collapsible columns. You'll then learn to add drop-down menus to your Joomla! template and we discuss various ways to display Flash content.

In Chapter 8, we will take look at the most popular methods to get you going with AJAX in Joomla! and help you create interactive and dynamic forms in your Joomla! site. Also, you will see some cool JavaScript toolkits and libraries you can use to make your site appear "Ajaxy". This chapter will also help you learn how to download and install Joomla! Extensions for your Joomla! site.

Chapter 9 covers how to enhance your template by adding a params.ini file so that your template's users have more dynamic control over your template's configuration right from the administration panel. For you PHP gurus out there, the basics you need to know about editing module chrome and template override files is covered. Last, you will pick up some key tips for easily implementing today's coolest CSS tricks into your template.

In Detail

Using Joomla! Templates with HTML and CSS allows you to give a unique look and feel to your site, present a "fresh face" to your pre-existing content, ensure that your site design is consistent with your brand, and build a site layout that suits your unique needs. A quality web site is easily within your grasp using these cutting-edge templates. However, even experienced web developers need help to take their designs and turn them into flexible and easily maintainable Joomla! 1.5 templates.

The release of Joomla! 1.5 meant a radically enhanced template system that is very different from that of Joomla! 1.0. Joomla! 1.5 comes complete with the ability to create template overrides and customize "module chrome". The Joomla! development team has also revamped the template process by introducing clean, understandable jdoc tags in place of the PHP function-based Mambo-derived markup that Joomla! 1.0 templates used. This book focuses squarely on the new enhancements to the Joomla! 1.5 templating process and walks web designers through the process of turning a working XHTML and CSS "mockup" into a fully functional Joomla! 1.5 template.

This well-crafted and easy-to-use book provides you with everything you need to create your own unique Joomla! 1.5 template. It guides you through setting up a basic work flow for Joomla! template design, debugging and validating the template code, creating drop-down menus and dynamic forms for your site, and packaging up your finished template in a ZIP file for users. At the end of this book you will be able to create a template that is effective, flexible, and presents a new look for the pre-existing content.

This book focuses on the new jdoc template system for Joomla! 1.5. It is geared toward web designers who need to know how to turn their designs into Joomla! 1.5 templates. It covers how to enhance and speed up your design and revision process, then focuses squarely on the Joomla! 1.5 essentials of creating a template. It covers implementing template overrides, the best approaches for implementing Flash and AJAX techniques, as well as advanced enhancements such as creating design parameters so users can have some control over the template via the administration panel. The original 1.0 book covered how to amend an existing 1.0 template before creating one from scratch, the new templating features of Joomla! 1.5 are so logical to implement we move right into creating a full table-less, semantic XHTML/CSS template from scratch.

A complete guide for web designers to all aspects of designing unique web site templates for the free Joomla! 1.5 Content Management System


This book covers the "how-tos" of creating templates for Joomla! 1.5. There is also advice about what works and what to consider when working with your Joomla! 1.5 template. Because this title is about Joomla! 1.5 templates and not about CSS or semantic XHTML, an understanding of established and current XHTML and CSS techniques for achieving compliant, semantic, and accessible designs is assumed. However, quality references and links are always given so the reader can learn more about any specific CSS or XHTML technique discussed if they are unfamiliar with it.

Who this book is for

This book is aimed at web designers who want to create their own unique templates for Joomla! 1.5. Readers should have a basic knowledge of Joomla! 1.5 (Building Websites with Joomla! 1.5 by Hagen Graf from Packt Publishing will help you with this) and also basic knowledge of table-less CSS and XHTML techniques, as well as using Dreamweaver or other text/code editors for coding purposes.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software