Welcome to Joomla! 1.5 template design. This title is intended to take you through the intricate details of creating sophisticated professional templates for Joomla! 1.5's CMS. In the summer of 2007, I wrote a book for creating Joomla! 1.0 templates. You wouldn't think that much has changed since then, but it has.
With Joomla's official stable release of 1.5 comes a completely reworked and greatly improved administration panel and all new template construction methods. In addition to Joomla's enhancements, the release of IE8 has brought CSS2.1 and a bit more CSS3 support for all major browsers. This means between Joomla's improvements and advances in web standards, the approach and techniques we can use to create our templates is remarkably different from just two years ago. While we all will still need to support IE6 and IE7 for some time further, where applicable, I'll discuss the use of some CSS3 techniques and any graceful degrading methods they might have (just a few samplesâthis is a book about Joomla! templates, not just CSS, after all).
In these up coming chapters, we'll walk through all the necessary steps required to aid, enhance, and speed up your Joomla! template design process. From design tips and suggestions to packaging up the final template, we'll review best practices for the following range of topics: designing a great template, rapid template development, coding markup, testing, debugging, and taking it live.
The last three chapters are dedicated to additional tips, tricks, and various cookbook recipes for adding popular site enhancements to your Joomla! template designs by using third-party extensions, as well as creating your own solutions.
Since you're interested in generating custom templates for Joomla! 1.5, you'll be very happy to know (especially, all you "web standards evangelists") that Joomla! does separate content from design, as has always been the case. What's new is our control as template developers over what Joomla! outputs from its "core" (or, how it displays our CMS content).
The removal of bulky PHP-wrapped
mosLoadModuletags in place of more XHTML-markup-friendly
jdoctags (which are similar to XHTML, but are part of Joomla's template system).
Jdoctags give you much cleaner template code (and much less syntax to accidentally mess up). If you're not a PHP developer, you can now develop a template with essentially no PHP code (though, as we'll discover, some PHP is still used and quite helpful in enhancing a template).
Template positions are easily defined and handled through your template's
templateDetails.xmlfile. No need to use predefined module position names or worry that your template user must set up special positions in the administration panel.ï»¿
Full, easy to implement control over what's known as module chrome (that is, how your modules are wrapped in XHTML). You can just simply assign one of the built-in
styleselectors to your
jdoctags, or if you've got a handle on PHP, you can create your own custom module chrome and implement it through
jdoctags. (We'll touch on that advanced technique in Chapter 9)ï»¿
The introduction of template overrides, which allow you to bypass Joomla's table-heavy core output in favor of table-less output. Joomla! provides us with a great set of accessible, table-less overrides in the Beez template, which we'll work with in Chapter 3. However, if you're an XHTML and PHP wiz, you can create any custom output you can dream of, which we'll cover the basics of in Chapter 9.ï»¿
There's also an exciting addition of template parameters. Joomla! lets you set up
params.inifile and construct your template in such a way that users can change settings from within the administration interface. This is a great perk to add to your templates that your users will appreciate.
Of course, there are more new features than the above, and I'll be pointing them out as we come across them in the following chapters of the book.
For the Simplicity route, sometimes it suites the client and/or the site to go as bare bones as possible. If that is the case, it's just quick and easy to take a very basic pre-made template and modify it. This does not have to be a Joomla! 1.5 template! This book will teach you how to take any basic XHTML/CSS markup that you understand and turn it into a working Joomla! 1.5 template.
Occasionally, you'll need to take the Unique and Beautiful route and create the site's template from scratch, so that everything displayed caters to the specific kind of content the site offers. This ensures the site is something eye-catching and completely unique. This is often the best route when custom branding is a priority, or when you just want to show off your "Hey, I'm hot stuff" design skills.ï»¿
You can potentially save a lot of time getting your site up with a nice template design
You don't need to know as much about CSS, XHTML, or PHP
This means, with a little web surfing, you can have your Joomla! site up and running with a stylish look in no time.
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.
Updating 1.0 templates? If you're looking to update a legacy Joomla! 1.0 template to a native Joomla! 1.5 template, you'll find reading through this book's overall process helpful before sitting down with Chapter 6's Reference Guide, which details how to update major 1.0 template code to 1.5 template code.
This book is geared toward visual designers with no server-side scripting or programming experience who are used to working with common industry standard tools, such as Photoshop and Dreamweaver, or other popular graphic, HTML, and text editors.
Regardless of your web development skill set or level, you'll be walked through clear, step-by-step instructions, although there are many web development skills and much Joomla! know-how you'll need to be familiar with to gain maximum benefit from this book.
What version of Joomla! 1.5 does this book use? While this book's case study was developed using versions 1.5.7, 1.5.8, and 1.5.9, any newer version of Joomla! 1.5 should have the same core capabilities, enabling you to develop templates for it using these techniques. Bug fixes and new features for each new version of Joomla! are documented at http://docs.joomla.org/Special:RecentChanges.
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.
Beef up those web skills
I'm a big fan of the W3Schools site. If you'd like to build up your XHTML, CSS, and PHP understanding, this site walks you through everything, from basic introductions to robust uses of top web languages and technologies. All the lessons are easy, comprehensive, and free (http://w3schools.com).
In order to get started in the next chapter, you'll need the following tools to help you out.
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):ï»¿
View line numbers: This comes in very handy during the validation and debugging process. It can help you find specific lines in a template file that a validation tool has returned a fix for. This is also helpful for other template or extension instructions given by author, which refer to a specific line of code that needs editing.
View syntax colors: Any worth while HTML editor has this feature, which is usually set as a default. The good editors let you choose your own colors. It displays code and other markup in a variety of colors, making it easier to distinguish various types of syntax. Many editors also help you identify "broken" XHTML markup, CSS styles, or PHP code.
View non-printing characters: OK, you might not want this feature on all the time. It makes it possible to see hard returns, spaces, tabs, and other special characters that you may or may not want in your markup and code.
Text wrapping: This, of course, lets text within the window, so you won't have to scroll horizontally to edit a long line of code. It's best to learn what the key-command shortcut is for this feature in your editor and/or set up a key-command shortcut for it. You'll find it easier to scroll through unwrapped, nicely-indented markup to quickly get a general overview or find your last stopping point. Turn it on quickly so in order to see and focus attention on one long line of markup or code.
Open source HTML editors: I'ï»¿ï»¿ve also used Nvu (http://www.net2.com/nvu/ ) and Kompozer (http://kompozer.net/ ). They're both free, open source, and available for Mac, PC, and Linux platforms. Kompozer was made from the same source as Nvu and apparently fixes some issues that Nvu has. (I haven't run into any major issue with Nvu myselfâboth editors are a bit limited for my regular use, although I do like being able to format XHTML text quickly and drag-and-drop form objects onto a page.) Both editors have a Source view, but you must be careful while switching between the Normal and the Source view tabs! Nvu and Kompozer are a little too helpful, and will try to rewrite your hand-coded markup if you haven't set your preferences properly! Linux users of Ubuntu and Debian (and Mac users with Fink) might also be interested in checking outï»¿ Bluefish editor. I haven't used it myself, but the site's writeup looks great: http://bluefish.openoffice.nl.
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.
Need a great graphic editor? Try GIMP. If you're on a budget and in need of a good image editor, I recommend you use GIMP. It is available for PC, Mac, and Linux. Get it from http://gimp.org/.ï»¿
Prefer vector art? Try Inkscape. Inkscape is also available for PC, Mac, and Linux. Bitmap graphic editors are great in that they also let you enhance and edit photographs, but if you just want to create buttons or other interface elements and vector-based illustrations, Inkscape is great, has a low learning curve, and is worth trying out (http://inkscape.org ).
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).ï»¿
Get the extensions now: You can get the Web Developer Toolbar from https://addons.mozilla.org/en-US/firefox/addon/60 and FireBug from https://addons.mozilla.org/en-US/firefox/addon/1843.
Be sure to visit the developers' sites to learn more about each of these extensions.
In addition to Firefox having all the helpful features and extensions, IE6 and even IE7 have a thing called quirks mode, which we will learn all about in Chapter 4. While Microsoft has attempted a lot of improvements and tried to become more W3C compliant with IE7 and now IE8, there are still some CSS rendering issues between this browser and others.
Your best bet will be to design for Firefox first, and then, if you notice things don't look so great in IE6, IE7, or IE8, there are plenty of standardized fixes and workarounds for these two browsers, because their "wonks" are just thatâwonks and well documented.
As we'll learn in Chapter 4, if you design only looking at one version of IE, then find it a mess in Firefox, Opera, or Safari, or the new Google Chrome, you're going to have a much harder time fixing the CSS you made for IE in a more "standards-compliant" browser.
Firefox doesn't have to become your only browser. You can keep using IE or any other browser you prefer. I myself prefer Opera for light and speedy web surfing. As a designer who works with and for other creative Mac-based professionals, I regularly check my work in Safari. Nevertheless, Firefox is one of my key web development tools.
To get going on your Joomla! 1.5 template design, you'll want to understand how the Joomla! CMS works and have your head wrapped around the basics of the Joomla! project you're ready to embark on. If you'll be working with a more technical Joomla! administrator and/or PHP developer, make sure your development installation, or sandbox, will have the same Joomla! extensions the final site needs to have. You'll want to have any software tools that are recommended installed and ready to use as well as brush up on those web skills, especially XHTML and CSS. Get ready to embark on designing a great template for one of the most popular, open source, CMSs available for the Web today!
Up next in Chapter 2, we'll plan our template design and develop it using my own rapid design comping technique. You'll end up with a working XHTML/CSS mockup that can be easily modified into a fully functional Joomla! 1.5 template.