Welcome to Joomla! template design. This book is intended to take you through the ins and outs of creating sophisticated professional templates for the Joomla! CMS. In the upcoming chapters, we’ll walk through all the steps required to aid, enhance, and speed your Joomla! template design process. From design tips and suggestions to setting up your Joomla! development sandbox we’ll review the best practices for coding, markup, testing, and debugging your Joomla! template, and then taking it live. The last three chapters are dedicated to additional tips, tricks, and various cookbook recipes for adding popular enhancements to your Joomla! template designs.
If you’re reading this book, chances are you currently have or work with a Joomla! powered site or are ready to embark on a new Joomla! powered project. Joomla! already comes with two built-in templates, and there are many free and commercial templates out there in a wide range of themes and styles to choose from. The benefit of using pre-existing templates (especially purchasing a commercial template) is that they’re built to handle Joomla!’s range of uses and content displays. They’ve also been packaged and set up for easy installation and application to your project (often two clicks or less!). This means that with a little web surfing and under $100, you can have your Joomla! powered site up and running with a stylish look in no time at all.
The drawback to using a pre-made template is that you limit your site’s custom look to something that several other people may have downloaded or purchased for their site. Moreover, if your site has a third-party extension for specialized content, it may not look quite right with the pre-existing template. Also, if your site requires specific branding, you may find it next to impossible to find an existing pre-made template that will fit the project’s branding requirements. Thus, you’ll need to either create a fresh design from scratch or dig in and modify an existing template (which has a user license that allows modification).
Whether you’re working with a pre-existing template or creating a new one from the ground up, Joomla! template design will give you the know-how to effectively understand how templates work within the Joomla! CMS enabling you to have full control over your site’s design and branding, no matter which route you take to get there.
If you are designing for the Joomla! CMS for the first time, you will need to understand that designing a template for a Content Management System such as Joomla! is quite different from designing a web page. You may be comfortable with creating a design layout in Photoshop or your favorite graphic editor and then using your editor’s export feature to generate the image slices and HTML markup required to render the web page. Likewise, you may be more comfortable working with a WYSIWYG editor such as Dreamweaver so that you can clearly see your page layout as you create the CSS and format content for it.
Joomla! is different. It holds all the content within several MySQL database tables. What you’ll be designing is the shell, which will eventually hold content when it is called from the database by a web user selecting a link on the site. At the same time, the layout and CSS you create for the template will be automatically applied across many pages (perhaps thousands) depending on how big the site is. This can be quite liberating and overwhelming, or frustrating at the same time.
The first thing you’ll notice is that it will be difficult to review your Joomla! template’s layout at a glance from within your local WYSIWYG editor. If you’re used to working with a WYSIWYG editor to create Cascading Style Sheets for your layout, you’ll notice that Joomla! generates many id and class names on-the-fly, which make it difficult (though not impossible!) to use your editor’s CSS Wizard to create style sheets for Joomla!. In this book, I’ve taken steps where possible to let you see where it’s beneficial to use your favorite graphic and WYSIWYG editors, and where it’s better to “peek under the hood”, and look directly at the CSS and XHTML markup we’ll be creating for our templates in this book.
In a nutshell, your Joomla! template design is not the website. Joomla! has been designed to have many different templates installed so that you can quickly and easily switch between them. You can even have certain pages that call specific templates while the rest of the site calls a main template. It might be better to consider your template design as one of the many features that can be installed into the Joomla! CMS. In fact, as we work through this book, you’ll notice that installing a final template package into Joomla! is almost identical to installing a module or component extension into Joomla!. Coincidence? Probably not.
This book is geared towards visual designers who have no server-side scripting, programming, or manual markup experience but who are used to working with common industry standard tools like Photoshop and Dreamweaver or with other popular graphic and HTML editors. You’ll be walked through clear, step-by-step instructions but there are many web development skills and Joomla! know-how that you’ll need so as to gain the maximum benefit from this book.
Most importantly, you should already be familiar with the most current stable version of Joomla!. I used version 1.0.8 for this book, but any newer version of Joomla will have the same capabilities as 1.0.8 with some bug fixes and new features, which will be fully documented at http://joomla.org. You should understand how content is added to the Joomla! CMS, and how its many built-in modules and components work. Understanding the difference between a module (which is an extension that is smaller and lighter, normally for just one page) and a component (usually an extension that is much more robust and can appear across many pages) and how to install them is a plus but not necessary as we’ll cover this topic in detail later in this book.
Note
What about the new 1.5.x Beta? Yes! You can use templates made for 1.0.x Joomla! installations in the new 1.5.x Beta releases! The examples in this book have all been tested in Joomla! 1.5 Beta 2 using backwards compatibility mode. Any templates you create using the techniques in this book should work with Joomla! 1.5. While you should download, install, play with, and learn the new 1.5 Beta features (as well as post your bugs, comments, and suggestions about it to the Joomla! forums), it is never recommended to release anything to the public using beta software. For sites (especially those that have clients who are paying you and trusting you with their brand and content) always deploy Joomla! sites using the most-recent stable version. You’ll always be able to upgrade your Joomla! installation once the newest beta has become stable. Remember: new is good as it usually means bugs from the previous version have been fixed. Beta means “new, never-seen-before features” or the code base has been redone from scratch and the stability of the code base for these new features has yet to be proved against bugs and hacks. For more information on the wonders of Joomla! 1.5 check out the following: http://www.joomla.org/content/view/3287/1/.
Even if you’ll be working with a more technical Joomla! administrator, you should have an overview of what the Joomla! powered project you’re designing entails and what, if any, additional extensions (modules and components) will be needed for the project. If your project does require additional extensions, you’ll want to have them installed in your Joomla! development sandbox to ensure that your design will cover all the various types of content that the site intends to provide. Knowing how to add and edit content in Joomla! will be helpful as you’ll probably want to make sure you have lots of dummy content in your sandbox in order to review how your template handles various page displays: light content, heavy content, image heavy pages, and pages generated with the additional extensions that the project requires.
We’ll cover using WYSIWYG editors to generate your XHTML markup (and even how to convert existing templates into whole new designs without touching any markup at all) later, but as you’ll soon see the more XHTML you know and understand, the quicker you’ll be able to create well-built templates that are quick loading, expand easily to accommodate new features, and are search engine friendly.
Again, you can use WYSIWYG editors to generate CSS for your template, but throughout the course of this book, you’ll find that the more comfortable you are with CSS markup and how to use it effectively with XHTML, the better your Joomla! template creating experience will be.
Note
Beef up those web skills. I’m a big fan of the W3Schools website. If you’d like to build up your XHTML and CSS understanding, you can use this site to walk you through everything from basic introductions to robust uses of top web languages and technologies. All the lessons are easy, comprehensive, and available free at http://w3schools.com.
If your project will be incorporating any other special technologies such as custom PHP, JavaScript, AJAX, or Flash content, the more you know and understand how those scripting languages and technologies work, the better for your template making experience (again http://w3schools.com is a great place to start). The more web technologies you have at least a general understanding of, the more likely you’ll be to intuitively make a more flexible template which will be able to handle anything the Joomla! site may need to incorporate into itself in the future.
Note
More of a visual “see it-to-do it” learner? Lynda.com has a remarkable course selection from the top CSS, XHTML/XML, JavaScript, and Flash/ActionScript people in the world. You can subscribe and take the courses online or purchase DVD-ROMs for offline viewing. The courses might seem pricey at first, but if you’re a visual learner (as most designers are) it’s money and time well spent. You can find out more at http://lynda.com.
To get going on your Joomla! template design, you’ll want to understand how the Joomla! CMS works and have your head wrapped around the basics of the Joomla! powered project you’re ready to embark on. If you’ll be working with a more technical Joomla! administrator, make sure your development sandbox will have the same extensions and features the final site needs to have. You’ll want to brush up on those web skills especially XHTML and CSS and get ready to embark on designing a great template for the most popular, robust, open source, content management systems available for the web today!