Joomla! 1.5 Template Design

A drawback to using a pre-made template is that whether it's another Joomla! template or just a static XHTML/CSS template, it may not save you as much time as hoped for. Even with your new header text and graphic, several other sites have downloaded and/or purchased them for themselves, and you don't stand enough apart.

Perhaps your Joomla! site needs a special third-party extension for a specific type of content; it might not look quite right in your template without a lot of tweaking. Moreover, while we're discussing tweaking, I find every CSS designer is different and sets up his/her design's layout and stylesheet accordingly. While it makes perfect sense to them, it can be confusing and time-consuming to work through.

Your approach may have started out as Simplicity, but then, for one reason or another, you find yourself having to dig deeper and deeper through the template, and pretty soon it doesn't feel like quick tweaking anymore. Sometimes you realize, for simplicity's sake (no pun intended), it would have been a whole lot quicker to start from scratch.

Before trying to cut corners with a pre-existing template, make sure your project really is as simple as it claims to be. Once you find a template, check that you are allowed to tweak and customize it (such as an open source GNU/GPL or Creative Commons license or royalty free purchase from a template site) and that you have a look at the stylesheet and template files. Make sure the template's assets seem logical and make sense to you.

The approach of this book is going to take you through the Unique and Beautiful route with the idea that once you know how to create a template from scratch, you'll be able to understand what to look for in other people's XHTML/CSS markup and/or Joomla! templates. You'll then be able to assess when it is really better or easier to use a pre-made template versus building up something of your own from scratch.

Most importantly, you should be familiar with the most current, stable version of Joomla! 1.5. This includes a general understanding of the Administrative Panel's layout and basic functions.

You should understand how to add content to the Joomla! CMS and how its modules and components work. Understanding the basics of installing and using module and component extensions will also be helpful (though we will cover that to some extent in the later chapters of the book as well). Chapter 3 will give you some great resources for installing your Joomla! 1.5 development sandbox.

Even if you'll be working with a more technical Joomla! administrator, you should have an overview of what the Joomla! site you're designing for entails and what, if any, additional extensions will be needed for the project. If your site does require additional extensions, you'll want to have them handy and/or installed in your Joomla! development installation (your sandbox—a place to test and play without messing up a live site). This will ensure that your design will cover all the various types of content the site intends to provide.

I'll be giving detailed explanations of most of the CSS rules and properties used in this book, along with the "how and why" behind those decisions. I won't cover every minor detail of the more basic CSS styles and rules, as, after all, this is not a book about CSS or general web development. We'll be focusing more on what you need to know about Joomla! 1.5 in terms of templating.

You should know a bit about what CSS is and the basics of setting up a cascading style sheet and including it as an external file within an XHTML page. CSS is an essential part of today's web development process. You'll find that the more comfortable you are with CSS markup and how to use it effectively with XHTML, the better your experience creating a Joomla! template will be. Where applicable, I'll point you towards some great resources for better understanding CSS techniques and adding to personal tricks and code arsenal.

You don't need to have every markup tag in the XHTML standard memorized (yes, if you really want to, you can still switch to the Design view in your HTML editor to drop in those markup tags you keep forgetting—I won't tell). However, the more XHTML basics you understand, the more comfortable you'll be working with the markup in the Code view of your HTML editor or with a plain text editor. And, the more you can work directly with the markup, the quicker you'll be able to create well-built templates that are quick loading, semantic, expand easily to accommodate new features, and are search engine friendly.

You definitely don't have to be a PHP programmer to get through this book. Joomla! 1.5 has gone through great pains to ensure PHP is not needed in your base template. However, be aware that Joomla! does run on PHP and certain template enhancements are still made using PHP code.

If you at least understand how basic PHP syntax is structured, you'll be much less likely to make mistakes while re-typing or copy-pasting code snippets of PHP into your index.php file. You'll be able to more easily recognize the difference between your template's XHTML markup and PHP code, so that you don't accidentally delete or overwrite anything crucial.

If you get more comfortable with PHP, you'll have the ability to change out variables and call new functions, template overrides, and module chrome on your own. In later chapters, we'll touch on getting you started with those endeavors.

If your project will be incorporating any other special technologies such as JavaScripting, AJAX, or Flash content, the more you know and understand how those scripting languages and technologies work, the better it is for your template-making experience (again W3Schools.com is a great place to start).

You'll need a good HTML editor. Dreamweaver is good (http://www.adobe.com/products/dreamweaver/ ); I prefer to use Coda for Mac (http://www.adobe.com/products/dreamweaver/ ). When I was on a PC, I loved the free text/code editor HTML-kit (http://www.htmlkit.com/ ). Any HTML or text editor that lets you enable the following features will work just great. (I recommend you enable all of the following):

The next important piece of software you'll need is a graphic editor. While you can find plenty of CSS-only Joomla! templates out there, chances are, you'll want to expand on your design a little more and add nice visual enhancements. These are best achieved by using a graphic editor such as GIMP, Photoshop, or Fireworks. Adobe owns both Photoshop and Fireworks and also offers a light and less-expensive version of Photoshop called Photoshop Elements, which will allow you to do everything discuss in this book (http://www.adobe.com/products/ ).

While I'm an advocate of open source and enjoy working with GIMP, in my line of work, the industry standard is Photoshop or Fireworks. I'll be using Adobe Photoshop in this title and assume that you have some familiarity with it, or GIMP, and with working with layers. Any graphic editor you prefer is fine. One that allows you to work with layers is very helpful, especially with the design comping (aka mockup) techniques suggest in Chapter 2.

Last, you'll need a web browser. Here, I'm not so flexible. I strongly suggest you use the latest, stable version of the Firefox browser (http://mozilla.com/firefox/ ).

Why Firefox? I view this browser as a great tool for web developers. It's as essential as my HTML editor, graphics, and FTP programs. Firefox has great features that we'll be taking advantage of to help us streamline the design-creation and template-development process. In addition to those built-in features, such as the DOM Source Selection Viewer and adhering to CSS2 (and CSS3) standards as specified by the W3C, FireFox also has a host of extremely useful extensions such as the Web Developer Toolbar and Firebug, which I recommend to further enhance your work flow (I'll discuss these two extensions in detail in Chapter 4).