Templates For Joomla! 1.

6
If you want to learn how to design and create custom templates for Joomla! 1.6, youve come to the right place. This tutorial will teach you how to create a basic Joomla 1.6 blog template, complete with all the tools youll need to create more advanced templates with custom variables, multiple themes, multiple languages, and more module positions than you can shake a stick at. At the end of the tutorial, youll even be able to download free both the sample template and a blank starter template for you to begin work on your own templates. Its a tutorial, reference guide, cheatsheet, and resource kit for creating Joomla 1.6 templates, all rolled into one package. This is a rather long and comprehensive tutorial, so go ahead and grab a cup of coffee and about a dozen chocolate-covered donuts with sprinkles on top. Ill wait here until you get back, mainly because I absolutely love donuts. As a quick disclaimer: This tutorial has been written before the official Joomla 1.6 documentation is in place, so some information may change as it becomes available. The following is the result of my reverse-engineering the default template and making a few educated guesses to make a working template. Once the official documentation comes out, I'll update this tutorial as needed.

How Do Joomla Templates Work, Anyways?

Before we go too far, lets cover the very basics. You probably already know that Joomla is a content management system (CMS). Joomla stores page content in a database and then inserts that content into a container called a template. The template controls the look, style, and layout of the content, but it doesnt change the actual data itself. In a way, you can think of the template being a disguise for the content, a super spy. The spy is still the same spy underneath, but he can look vastly different depending on which disguise he is wearing. One of the great things about using a content management system is that you can assign different templates to different pages on the same website. If you need a portion of your website to look differently than the rest of the website, it shouldnt be a problem you just use a different template. And if you need to redesign your entire site, just upload a new template and leave the content as is. Sneaky, isnt it? Joomlas templates are installed through Joomlas administration section. Once youve logged in, you can view your existing site and administration templates by clicking on the Extensions menu and selecting Template Manager. Your current default templates should have a filled-in star in the Default column. If you click on the name of your template, you can view the templates settings and options, if the template author has created any. In Joomla 1.6, templates made up of a few different programming and markup languages: PHP, JavaScript, XML, HTML, and CSS. If that sounds intimidating or if you dont know PHP

and XML, dont worry, well cover each one in turn and by the end of the tutorial, youll know everything you need to know to create a template.

Introducing Simplicity, A Joomla 1.6 Blog Template

Since this tutorial needed to have a template design, I decided to create a blog template which were releasing under the name Simplicity. Ive created a mockup in Adobe Fireworks to serve as a guide, but since were mainly concerned with the Joomla side of building a template, Im not going to go into detail on how to design the mockup. There are plenty of Photoshop and Fireworks tutorials on the web, so feel free to choose whatever design youd like for your own template.

Lets take a quick moment to cover what were going to be building. Since Simplicityis a blog template, were going to keep things fairly, ersimple. That means basic styling and only a few module positions. There will be a top navigation bar with search, a main content area, a sidebar, and a footer section. Were going to make some standard social media and subscription icons stand out in the sidebar, with options to turn them on or off. Just for fun, and because youll want to know how to do this, were also going create several different color themes for Simplicity.

Creating A Joomla Template Skeleton

Its time to dive into the details. Joomla requires its templates to have a certain structure in order for them to function correctly, just like an engine needs all of its parts to be perfectly aligned and in working condition in order to run. Joomlas structure includes having the proper directories in the right places and also having a number of specificallynamed files. All Joomla templates go into the templates directory of your Joomla installation. Since our template is named Simplicity, go ahead and create a folder named simplicity within the

templates directory, taking care to keep it all lowercase. Once youve done that, create three more folders within the simplicity directory: css, images, and languages. Finally, create a folder called en-GB in the language directory. Your directory structure should look like this: templates/simplicity/ templates/simplicity/css/ templates/simplicity/images/ templates/simplicity/language/ templates/simplicity/language/en-GB/ Technically, you could omit all of the sub-directories for CSS, images, and languages and still have a working template, but since were going to use them for Simplicity, you should create them now. Simplicity doesnt use any JavaScript, but you could also create a directory for any JavaScript files youd like to include in your template. Joomla also requires two files in order for a template to work: index.php and templateDetails.xml. Both files will reside in the root simplicity directory and neither can use any other name. Create both of those files and then well look at them individually. templates/simplicity/index.php templates/simplicity/templateDetails.xml

Joomlas templateDetails.xml File Explained

The templateDetails.xml file has several very important tasks for a Joomla template: It tells Joomla the Joomla version with which the template is compatible. It lists all of the template information and author details. It lists all of the files contained within the template so that Joomla can install them. It lists all of the module positions for the template. It lists all of the languages for which the template has an available translation. It creates the template options and variables in Joomlas administration. If youre not overly familiar with working with XML, dont be concerned. XML is not very different from HTML; it just has different tags and attributes. You'll find that Joomla's template XML file is very easy to understand and we'll cover each tag in full so that you'll be able to make the most of it. After discussing each tag, we'll get into the specifics of Simplicity's templateDetails.xml file.

Joomla's Template Doctype

In XML, a doctype is a tag at the beginning of the XML file that defines how the file should be formatted and what tags are allowed. The doctype for Joomla 1.6 template is as follows:

1. <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN"

"http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

The extension Element

After the doctype declaration comes the extension tag, which will serve as a container for everything else in templateDetails.xml file. Joomla 1.6 templates differ from Joomla 1.5 templates, which use the install tag instead. The extension tag has three attributes: version, type, and client. The version attribute indicates the Joomla version with which the extension is compatible. The type attribute lists the type of extension, which for a template is simply "template". Finally, the client attribute designates the extension as being used for either the site (the public portion of your Joomla site) or the admin. For a Joomla 1.6 template, the extension element will look like the following:

1. <extension version="1.6" type="template" client="site"><extension> The Template Meta Data

Joomla's templates have meta data, just like an HTML document. The difference is, however, that Joomla templates don't use the same tags. Joomla's tags that give information about the template are very easy to use and understand as they are quite specifically named.

Tag name creationDate author authorEmail authorUrl copyright license version description

Description The name of the template. The date the template was created. The name of the template author. The template author's email address The template author's website address. The copyright notice for the template. The license under which the template is distributed. The template version number. A description of the template.

All of the above elements should be present in your templateDetails.xml file as children of the extension tag.

1. <extension version="1.6" type="template" client="site"> 2. <name>Simplicity</name> 3. <creationDate>03/28/11</creationDate> 4. <author>Virtuosi Media</author> 5. <authorEmail>[email protected]</authorEmail> 6. <authorUrl>http://www.virtuosimedia.com/</authorUrl> 7. <copyright>Copyright (C) 2011 Virtuosi Media.</copyright> 8. <license>GNU General Public License version 2 or later; see LICENSE.txt</license> 9. <version>1.0.0</version> 10.<description>Simplicity is a simple, clean blog template for Joomla 1.6 created by
Virtuosi Media, Inc.</description> 11.<extension>

Quick note: The name of your template must correspond directly with your directory name. Some servers are case-sensitive and so if your name doesn't match in case, Joomla will give you a "500 - Internal Server Error" because it won't be able to detect your template.

The Template Files List

Joomla likes to keep track of the files that are included in each extension and so when creating a template, you need to list all of the template files. Fortunately, Joomla allows you to list entire folders at a time, so you only need to list the folders and any files that are included in the root template directory.

1. <extension version="1.6" type="template" client="site"> 2. <files> 3. <folder>css</folder> 4. <folder>images</folder> 5. <folder>language</folder> 6. <filename>index.php</filename> 7. <filename>favicon.ico</filename> 8. <filename>templateDetails.xml</filename> 9. <filename>template_preview.png</filename> 10.<filename>template_thumbnail.png</filename> 11.</files> 12.<extension>
Once again, the files element appears within the extension tag, but it should come after all of your template meta data. Note the different elements for files and folders: filename and folder, respectively.

Indicating Module Positions

After you've listed your files, you need to list and name each of the module positions that your template will contain. You can have an unlimited number of positions, with the only caveat being that you must also code them into your index.php file. You can also name your module positions whatever you'd like, but I'd recommend names that describe their function or position (but not color as it can change).

1. <extension version="1.6" type="template" client="site"> 2. <positions> 3. <position>topNav</position> 4. <position>search</position> 5. <position>mainTop</position> 6. <position>mainBottom</position> 7. <position>sidebar</position> 8. <position>footer</position> 9. </positions> 10.<extension>

Template Languages
Joomla allows you to provide multiple language translations for your template (or any extension). We'll discuss translations in further detail below, but for your templateDetails.xml file, you'll need to indicate where your language files are. You can have as many translations as you'd like, but you must always provide an English translation by default. The format for listing languages is as follows:

1. 2. 3. 4. 5.

<extension version="1.6" type="template" client="site"> <languages folder="language"> <language tag="en-GB">en-GB/en-GB.tpl_simplicity.ini</language> </languages> <extension>

The languages element must have a folder attribute that tells the location of the languages folder. Each language element must have a tag attribute that lists the appropriate language code for your translation. Each translation must be in its own folder, named after the language code. Also, each language file name must follow the format, enGB.tpl_templatename.ini, or Joomla will not recognize the file. Note that you must include the folder filepath in your language declaration.

Translation Strings In Joomla's Language Definition Files

It's time to take a brief, but much needed, detour from the templateDetails.xml file to discuss how string translations work in Joomla. In your templates, any text that you display either to the public user or an administrator should be translatable. In order to make your text translatable, you need to use placeholders for everywhere text appears and then provide a language-specific translation for each placeholder. Joomla will then determine which translation to use based on the site settings and will load the appropriate files. You've already created your English language definition file, so let's add some strings for translation. Each translated string should appear on its own line and should adhere to the following format: 1. TPL_TEMPLATENAME_STRING_DESCRIPTION="The here" translated string should go

So, as an example, a translated string for Simplicity should look like this: 1. TPL_SIMPLICITY_FACEBOOK_URL="Facebook Page URL" Your entire placeholder must be uppercase, separated by underscores, begin with the word TPL (for template), and be followed by your template name and string description. You can also use do more advanced translations with wildcard text substitutions which you can read about in the official documentation on the Joomla site.

Here is the entire translation we'll need for Simplicity, which will be saved in the enGB.tpl_simplicity.ini language definition file: 1. TPL_SIMPLICITY_EMAIL_URL="Contact Page URL" 2. TPL_SIMPLICITY_FACEBOOK_URL="Facebook Page URL" 3. TPL_SIMPLICITY_INTERACT_TEXT="Social Widget Heading" 4. TPL_SIMPLICITY_RSS_URL="RSS URL" 5. TPL_SIMPLICITY_SHOW_AUTHOR_CREDITS="Show template author credits (recommended)" 6. TPL_SIMPLICITY_SHOW_EMAIL="Show Email Contact Icon" 7. TPL_SIMPLICITY_SHOW_FACEBOOK="Show Facebook Icon" 8. TPL_SIMPLICITY_SHOW_RSS="Show RSS Icon" 9. TPL_SIMPLICITY_SHOW_TWITTER="Show Twitter Icon" 10.TPL_SIMPLICITY_TEMPLATE_COLOR="Template Colour" 11.TPL_SIMPLICITY_TEMPLATE_COLOR_BLUE="Blue Serenity" 12.TPL_SIMPLICITY_TEMPLATE_COLOR_GRAY="Gray Calm" 13.TPL_SIMPLICITY_TEMPLATE_COLOR_LIME="Lime Spritz" 14.TPL_SIMPLICITY_TEMPLATE_COLOR_PURPLE="Grape Juice" 15.TPL_SIMPLICITY_TEMPLATE_COLOR_RED="Red Passion" 16.TPL_SIMPLICITY_TWITTER_URL="Twitter Username" Placeholders and translation like this might seem silly at first, but if you want to create a multi-lingual template or extension, you'll save yourself a lot of time by taking translation into account from the beginning. If we wanted to add a Spanish translation, for example, we'd merely create a Spanish folder in the language directory and create a Spanish .ini file. Then we would copy the above code into the file and translate the strings (but NOT the placeholders). And that's it. That's all you would need to do for a new translation.

Creating Administrator Settings For Your Joomla Template

Okay, now it's time to put the translation lessons to work. We're almost done creating the templateDetails.xml file, but the final step is to create a settings panel for the administration section of the template. The settings will allow you to control different template options such as switching between stylesheets, toggling a template author link, and variable text blocks. Joomla provides a lot of different types of form fields for you to use, so you're really only limited by your imagination as to which settings you want to include in your template. First, let's take a look at the container elements that you'll need. All of your template parameters will be contained by the config element, as well as the fields element, which has a name attribute with the value of "params". The next container is the fieldset element, which has a name attribute. Each fieldset element creates an expandable control box in the administration, with the name attribute serving as the title for the box, though you must provide a translation string if the value is not "basic" or "advanced". You can include as many fieldset elements as you need.

To create the actual form elements for your administrative section, you'll use the field element. Joomla 1.6 has 39 different types of form fields. I won't cover all them, but you can view the full list of field types and further details about each field type at the Joomla site (just watch out for the differences between Joomla 1.6 and Joomla 1.5 templates). In general, the field element has several available attributes that you can utilize. You must specify the type, name, and label attributes, but you can also optionally include the description and default for most field types. The description attribute will appear as a tooltip when the element is hovered over while the default attribute will provide a default value for your field. Some field types will have other optional attributes as well. It's been too long since we've used an example, so I'll give you the rest of the code for the admin section of the templateDetails.xml file and then explain the relevant parts in more detail.

1. 2. 3. 4.

<config> <fields name="params"> <fieldset name="advanced"> <field name="templateColor" type="list" default="gray"

label="TPL_SIMPLICITY_TEMPLATE_COLOR" description="" filter="word"> 5. <option value="gray">TPL_SIMPLICITY_TEMPLATE_COLOR_GRAY</option> 6. <option value="red">TPL_SIMPLICITY_TEMPLATE_COLOR_RED</option>

7. <option value="blue">TPL_SIMPLICITY_TEMPLATE_COLOR_BLUE</option> 8. <option value="lime">TPL_SIMPLICITY_TEMPLATE_COLOR_LIME</option> 9. <option value="purple">TPL_SIMPLICITY_TEMPLATE_COLOR_PURPLE</option> 10.</field> 11.<field name="showAuthor" type="radio" default="0"
label="TPL_SIMPLICITY_SHOW_AUTHOR_CREDITS" description=""> 12.<option value="0">Show</option> 13.<option value="1">Hide</option>

14.</field> 15.<field name="interactText" type="input" label="TPL_SIMPLICITY_INTERACT_TEXT"

default="Interact"></field> 16.<field name="showRSS" type="radio" default="0" label="TPL_SIMPLICITY_SHOW_RSS" description=""> 17.<option value="0">Show</option>

18.<option value="1">Hide</option> 19.</field> 20.<field name="rssURL" type="input" label="TPL_SIMPLICITY_RSS_URL"></field> 21.<field name="showFacebook" type="radio" default="0"
label="TPL_SIMPLICITY_SHOW_FACEBOOK" description="">

22.<option value="0">Show</option> 23.<option value="1">Hide</option> 24.</field> 25.<field name="facebookURL" type="input"

label="TPL_SIMPLICITY_FACEBOOK_URL"></field>

26.<field name="showTwitter" type="radio" default="0"

label="TPL_SIMPLICITY_SHOW_TWITTER" description=""> 27.<option value="0">Show</option> 28.<option value="1">Hide</option>

29.</field> 30.<field name="twitterURL" type="input"

label="TPL_SIMPLICITY_TWITTER_URL"></field> 31.<field name="showEmail" type="radio" default="0" label="TPL_SIMPLICITY_SHOW_EMAIL" description="">

32.<option value="0">Show</option> 33.<option value="1">Hide</option> 34.</field> 35.<field name="emailURL" type="input"

label="TPL_SIMPLICITY_EMAIL_URL"></field> 36.</fieldset> 37.</fields>

38.</config>
If you read carefully, you can see that we're providing controls to switch between several different color themes and also to toggle and customize the various social media icons. You'll also be able to toggle the template author credits. These are pretty basic options, but they'll provide for a lot of flexibility right out of the box. In the first field element, named "templateColor", we have created a dropdown select element. Notice that the label attribute's value is translated string placeholder, as are the text nodes for each of the option child elements. The default value for the templateColor field is gray, but we could easily change the default by simply entering a different value. As the labels themselves are fairly self-explanatory, I've opted not to include descriptions, but you can add a description by entering in a value for the description attribute. The remaining field elements are either of the radio or input types and they work the same way as the list value for the type attribute, except that the input field type does not allow for the option child elements. As I mentioned above, there are far more field types that Joomla has to offer, but for the purposes of our template, these three are going to be all we need. With that done, we're now finished with the templateDetails.xml file. Let's take a look at the file as a whole:

1. <?xml version="1.0" encoding="utf-8"?> 2. <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" 3. 4. 5. 6. 7. 8.
"http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <extension version="1.6" type="template" client="site"> <name>Simplicity</name>

<creationDate>03/28/11</creationDate> <author>Virtuosi Media</author> <authorEmail>[email protected]</authorEmail> <authorUrl>http://www.virtuosimedia.com/</authorUrl>

9. <copyright>Copyright (C) 2011 Virtuosi Media.</copyright> 10.<license>GNU General Public License version 2 or later; see LICENSE.txt</license> 11.<version>1.0.0</version> 12.<description>Simplicity is a simple, clean blog template for Joomla 1.6 created by
Virtuosi Media, Inc.</description> 13.<files>

14.<folder>css</folder> 15.<folder>images</folder> 16.<folder>language</folder> 17.<filename>index.php</filename> 18.<filename>index.html</filename> 19.<filename>favicon.ico</filename> 20.<filename>templateDetails.xml</filename> 21.<filename>template_preview.png</filename> 22.<filename>template_thumbnail.png</filename> 23.</files> 24.<positions> 25.<position>topNav</position> 26.<position>search</position> 27.<position>mainTop</position> 28.<position>mainBottom</position> 29.<position>sidebar</position> 30.<position>footer</position> 31.</positions> 32.<languages folder="language"> 33.<language tag="en-GB">en-GB/en-GB.tpl_simplicity.ini</language> 34.</languages> 35.<config> 36.<fields name="params"> 37.<fieldset name="advanced"> 38.<field name="templateColor" type="list" default="gray"
label="TPL_SIMPLICITY_TEMPLATE_COLOR" description="" filter="word"> 39.<option value="gray">TPL_SIMPLICITY_TEMPLATE_COLOR_GRAY</option> 40.<option value="red">TPL_SIMPLICITY_TEMPLATE_COLOR_RED</option>

41.<option value="blue">TPL_SIMPLICITY_TEMPLATE_COLOR_BLUE</option> 42.<option value="lime">TPL_SIMPLICITY_TEMPLATE_COLOR_LIME</option> 43.<option value="purple">TPL_SIMPLICITY_TEMPLATE_COLOR_PURPLE</option> 44.</field> 45.<field name="showAuthor" type="radio" default="0"
label="TPL_SIMPLICITY_SHOW_AUTHOR_CREDITS" description="">

46.<option value="0">Show</option> 47.<option value="1">Hide</option> 48.</field> 49.<field name="interactText" type="input" label="TPL_SIMPLICITY_INTERACT_TEXT"

default="Interact"></field>

50.<field name="showRSS" type="radio" default="0"

label="TPL_SIMPLICITY_SHOW_RSS" description=""> 51.<option value="0">Show</option> 52.<option value="1">Hide</option>

53.</field> 54.<field name="rssURL" type="input" label="TPL_SIMPLICITY_RSS_URL"></field> 55.<field name="showFacebook" type="radio" default="0"

label="TPL_SIMPLICITY_SHOW_FACEBOOK" description="">

56.<option value="0">Show</option> 57.<option value="1">Hide</option> 58.</field> 59.<field name="facebookURL" type="input"

label="TPL_SIMPLICITY_FACEBOOK_URL"></field> 60.<field name="showTwitter" type="radio" default="0" label="TPL_SIMPLICITY_SHOW_TWITTER" description=""> 61.<option value="0">Show</option>

62.<option value="1">Hide</option> 63.</field> 64.<field name="twitterURL" type="input"

label="TPL_SIMPLICITY_TWITTER_URL"></field> 65.<field name="showEmail" type="radio" default="0" label="TPL_SIMPLICITY_SHOW_EMAIL" description=""> 66.<option value="0">Show</option> 67.<option value="1">Hide</option>

68.</field> 69.<field name="emailURL" type="input"

label="TPL_SIMPLICITY_EMAIL_URL"></field> 70.</fieldset>

71.</fields> 72.</config> 73.</extension>

The above code should now provide a template administration screen that looks like the one below:

Creating The index.php File For a Joomla 1.6 Template

Now that we've covered the templateDetails.xml file, it's time to move onto the index.php file. From a high-level perspective, the index.php file will connect with Joomla, grab the template data and insert it into the template layout. You'll be using a mixture of PHP and HTML at this point, but don't worry if you're not familiar with PHP as the knowledge you'll need for creating a template is fairly simple. I won't explain absolutely everything in detail, but you'll know enough to create a template. Let's start first with the basics. PHP has a set of tags, similar to HTML, that indicates the presence of PHP code. We can enter in and out of the "PHP mode" by doing this. It'll look a little messy and unfortunately, there's no way around that, but it will work very well. The PHP tag looks like this:

1. <?php ?>
Any PHP code that we use will need to be inserted between those two tags. Let's add our license information first by using the PHP comment syntax.

1. 2. 3. 4. 5. 6. 7.

<?php /** * @version Simplicity 1.0 * @copyright Copyright (C) 2011 Virtuosi Media. * @license GNU General Public License version 2 or later; see LICENSE.txt */ ?>

Next, we need to add a line that will protect the template file from being accessed by anything other than Joomla. If another program or script tries to load our template, the request will simply fail. 1. defined('_JEXEC') or die;

By default, Joomla loads MooTools, a JavaScript library. MooTools is great, but since we don't need it for this particular template, so we're going to direct Joomla not to load it in order to keep our page weight down. If you do want to load MooTools by default, simply change false to true.

1. /* The following line loads the MooTools JavaScript Library */

2. JHTML::_('behavior.framework', false); We need to get some general site information from Joomla and fortunately, we can load it all with a single line of code. For our purposes, we'll only be accessing the site name, but you can also access many other variables. We'll load the information here and then access it a little later in the template.

1. /* The following line gets the application object for things like displaying the site
name */ 2. $app = JFactory::getApplication(); Now it's time to get our template variables that have been set in the template administration. We could access them from within the template layout, but for the sake of clarity and organization, we're going to initialize all of our variables before beginning the template layout code.

1. /* Template variables */ 2. $interactText = $this->params->get('interactText'); 3. $templateColor = $this->params->get('templateColor'); 4. $showAuthor = $this->params->get('showAuthor'); 5. $showEmail = $this->params->get('showEmail'); 6. $showFacebook = $this->params->get('showFacebook'); 7. $showRSS = $this->params->get('showRSS'); 8. $showTwitter = $this->params->get('showTwitter'); 9. $emailUrl = $this->params->get('emailURL'); 10.$facebookUrl = $this->params->get('facebookURL'); 11.$rssUrl = $this->params->get('rssURL'); 12.$twitterUrl = $this->params->get('twitterURL');
All of our variables are similar, so let's dissect one of the statements. PHP variables always begin with the dollar sign ($). In the second statement, we are creating a variable, $templateColor, and setting it equal to the value saved for the templateColor field in the administration. The technical definition of the value of the $templateColor variable, $this>params->get('templateColor'), is that it is a call to an object method. In this case, we are passing in a string the tells the object method to get the value saved for the templateColor field and return it. That value then becomes the value for the $templateColor variable. Each of the other variable statements are similar, so I won't spend much time on them. Just note that each is a different variable and that the strings must also be changed for each.

By default, PHP doesn't show itself in the browser window; it just runs in the background. Any PHP code that you want to display first needs to be directed to do so. There are a few different ways to do this, but the simplest is to use the echo function. To use echo, you simply type the word 'echo', followed by either a variable or string that you'd like echoed onto the screen. We'll be making use of echo a lot throughout our template, with the first opportunity being the doctype declaration.

1. <?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?

>"?>

2. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3. html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this>language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this>direction; ?>" > The above code accomplishes a few different tasks. First, it sets the character set of the template according to the character set saved in the Joomla settings. It establishes the document type as XHTML Strict (You can use whatever document type you like, Joomla doesn't enforce any one type). Finally, it sets the document language and language direction according to Joomla's settings. Switching back and forth from XHTML to PHP looks messy here, but it makes the template far more dynamic. After the doctype information has been established, it's time to create the document head. Joomla dynamically loads the title element and the necessary meta tags, so you won't need to specify those, although we will need to enter a special tag within the document head that tells Joomla where to place those elements within the template. The syntax is as follows:

1. <head> 2. <jdoc:include type="head" /> 3. </head>

We'll also need to load our stylesheets, JavaScript, and link to the template favicon within the document head. Simplicity doesn't use any JavaScript, but the format will be exactly the same as the stylesheets. I'll first list the code, then explain it.

1. <head> 2. <jdoc:include type="head" /> 3. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo
$this->template ?>/css/default.css" type="text/css" /> 4. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $templateColor;?>.css" type="text/css" />

5. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 6. </head>

The code here is similar to what you will see when loading most stylesheets, but with a few extras in order to make the template more dynamic. The first variable we encounter is $this->baseurl, which simply returns the root Joomla directory. The next variable, $this>template returns the template directory name. Finally, the $templateColor, loads the

appropriate theme color stylesheet based on whichSimplicity theme is currently selected in the template settings. You'll notice here that I'm including two stylesheets rather than one. Because I want to easily maintain my stylesheets, I've created a default stylesheet that contains all of the template styles and then much smaller stylesheets that only change the colors. It's a tradeoff, one extra HTTP request for mainainability, but it's one that I don't mind making in this case because the color stylesheets are only a few lines long. Now, if I want to change anything for Simplicity, I only change the default.cssfile rather than multiple files. And if I want to create a new theme, it only takes a few lines to change the colors. Finally, after all of that preparation, we can begin to define our module positions in the body of our XHTML document. Let's first tackle the top navigation bar as it's a smaller chunk of code and only includes two module positions.

1. <div id="topBar"> 2. <div id="topWrapper"> 3. <?php if($this->countModules('topNav')) : ?> 4. <div id="topNav"> 5. <jdoc:include type="modules" name="topNav" style="xhtml"/> 6. </div> 7. <?php endif; ?> 8. <?php if($this->countModules('search')) : ?> 9. <div id="search"> 10.<jdoc:include type="modules" name="search" style="xhtml"/> 11.</div> 12.<?php endif; ?> 13.</div> 14.</div>
I won't cover the intricacies of HTML layout design and priciples as they are beyond the scope of this article, but if you've used HTML before, you should be comfortable with it. So, HTML aside, let's concentrate on the special PHP code above. PHP allows for conditional statements, which we first encounter with the line: <?php if($this>countModules('topNav')) : ?>. The if statement essentially means that if a certain condition is true, then execute the following code block. The end of the code block is signaled by <?php endif; ?>. In this case, we're telling Joomla to count the number of modules that are published and assigned to the topNav module position. If at least one such module exists, then the topNav container element should be created and the appropriate modules will be displayed within it. In the conditional code block, you'll notice that we're using the jdoc element again, just like we used to load the information for the document head. Here, the syntax is similar, but not exactly the same. Rather than a type attribute value of head, we instead use modules. By specifying the name attribute, we tell Joomla which module position should be loaded. The style attribute indicates how the modules should be displayed. Note:

Omitting the style attribute will result in some modules not displaying properly. Specifically, the module titles will not be displayed. Since the search module position is similar to topNav, let's move onto the rest of the template. We're going to wrap the rest of our template code in a set of containers, so any code following the next block will appear within the mainWrapper parent element.

1. 2. 3. 4. 5.

<div id="mainContainer"> <div id="mainWrapper"> <--The rest of our code will go here--> </div> </div>

First, let's take a look at the main content block.

1. 2. 3. 4. 5. 6. 7. 8. 9.

<div id="main"> <?php if($this->countModules('mainTop')) : ?> <jdoc:include type="modules" name="main" style="xhtml"/> <?php endif; ?> <jdoc:include type="component" /> <?php if($this->countModules('mainBottom')) : ?> <jdoc:include type="modules" name="main" style="xhtml"/> <?php endif; ?> </div>

There are a few differences that need to be pointed out in this code block from thetopBar block. Again, you'll notice our old friend, the jdoc element, this time with a type attribute of "component", sandwiched in between two modules positions. Joomla has a few different types of content blocks, among them modules and components. While you can have many modules per page, you can only have one component and usually the component will contain the page's main content. Because you can't move components around like modules, when I create a Joomla template, I generally like to include a module position both before and after the component so that I have maximum flexibility when creating the main content section of my pages. I sometimes will put a picture slideshow above the content or social media icons below it. This setup facilitates either use case. The next set of code, the sidebar, introduces another example of PHP if statement. In PHP, two pipe characters, ||, represent a logical OR. What that means that we will check if either condition 1 is true OR if condition 2 is true. If either statement is true, then the code block is executed.

1. <div id="sidebar"> 2. <?php if (($showRSS == 0)||($showFacebook == 0)||($showTwitter == 0)||

($showEmail == 0)):?> 3. <?php if (!empty($interactText)):?> 4. <h2><?php echo $interactText; ?></h2>

5. <?php endif; ?> 6. <ul id="interact"> 7. <?php if (($showRSS == 0)&&(!empty($rssUrl))):?> 8. <li><a href="<?php echo $rssUrl; ?>" class="rss"></a></li> 9. <?php endif; ?> 10.<?php if (($showFacebook == 0)&&(!empty($facebookUrl))):?> 11.<li><a href="<?php echo $facebookUrl; ?>" class="facebook"></a></li> 12.<?php endif; ?> 13.<?php if (($showTwitter == 0)&&(!empty($twitterUrl))):?> 14.<li><a href="http://twitter.com/<?php echo $twitterUrl; ?>"
class="twitter"></a></li> 15.<?php endif; ?>

16.<?php if (($showEmail == 0)&&(!empty($emailUrl))):?> 17.<li><a href="<?php echo $emailUrl; ?>" class="email"></a></li> 18.<?php endif; ?> 19.</ul> 20.<?php endif; ?> 21.<?php if($this->countModules('sidebar')) : ?> 22.<jdoc:include type="modules" name="sidebar" style="xhtml"/> 23.<?php endif; ?> 24.</div>
In our sidebar, we're actually using three OR operators to choose between four different statements that we want to evaluate. If any one of the four is true, we'll show the social media content block. If you look back at our templateDetails.xml file, you'll see that if an icon is enabled, that field has a value of 0. In this part of the index.php file, we're first checking to see if any of the icons are enabled and then we proceed to check each one individually. Just as || means OR in PHP, && represents a logical AND, meaning both condition 1AND condition 2 must be true for the code block to execute. You'll notice that in addition to checking if an icon is enabled, we're also checking to see if the administrator has provided a link by using the empty function. The exclamation point before the empty function represents a logical NOT. So, in plain English, our conditional statement for displaying an RSS feed icon is as follows: If the RSS icon is enabled AND if the RSS URL field is NOT empty, then display the icon. Let's finish the template layout by looking at the footer and copyright sections of the template.

1. 2. 3. 4. 5. 6. 7.

<div id="footer"> <?php if($this->countModules('footer')) : ?> <jdoc:include type="modules" name="footer" style="xhtml"/> <?php endif; ?> </div> <div id="copyright"> <p>&copy;<?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>.

8. <?php if ($showAuthor == 0):?> 9. <a href="#">Simplicity - A Joomla Blog Template</a> was designed and created
by <a href="http://www.virtuosimedia.com/">Virtuosi Media</a>. 10.<?php endif; ?>

11.</p> 12.</div>
The footer shouldn't give you any surprises as it's much the same as what we've already covered. However, the copyright code block has two more useful features that you'll probably want to include in your templates. The first echoes the current year using PHP's date function. The second gets the stored sitename from Joomla using the $app>getCfg('sitename'); code. One final feature allows the site administrator to toggle the template credits. We'd prefer if the credit and link were left in place, but don't require it. As a summary of this section of our tutorial, here is the full content for Simplicity's index.php file.

1. 2. 3. 4. 5. 6.

<?php /** * @version Simplicity 1.0 * @copyright Copyright (C) 2011 Virtuosi Media. * @license GNU General Public License version 2 or later; see LICENSE.txt */

7. defined('_JEXEC') or die; 8. /* The following line loads the MooTools JavaScript Library */ 9. JHTML::_('behavior.framework', false); 10./* The following line gets the application object for things like displaying the site name */ 11.$app = JFactory::getApplication();

12./* Template variables */ 13.$interactText = $this->params->get('interactText'); 14.$templateColor = $this->params->get('templateColor'); 15.$showAuthor = $this->params->get('showAuthor'); 16.$showEmail = $this->params->get('showEmail'); 17.$showFacebook = $this->params->get('showFacebook'); 18.$showRSS = $this->params->get('showRSS'); 19.$showTwitter = $this->params->get('showTwitter'); 20.$emailUrl = $this->params->get('emailURL'); 21.$facebookUrl = $this->params->get('facebookURL'); 22.$rssUrl = $this->params->get('rssURL'); 23.$twitterUrl = $this->params->get('twitterURL'); 24.?> 25.<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?
>"?> 26.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

27.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this>language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this>direction; ?>" > 28.<head>

29.<jdoc:include type="head" /> 30.<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo
$this->template ?>/css/default.css" type="text/css" /> 31.<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $templateColor;?>.css" type="text/css" />

32.<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 33.</head> 34.<body> 35.<div id="topBar"> 36.<div id="topWrapper"> 37.<?php if($this->countModules('topNav')) : ?> 38.<div id="topNav"> 39.<jdoc:include type="modules" name="topNav" style="xhtml"/> 40.</div> 41.<?php endif; ?> 42.<?php if($this->countModules('search')) : ?> 43.<div id="search"> 44.<jdoc:include type="modules" name="search" style="xhtml"/> 45.</div> 46.<?php endif; ?> 47.</div> 48.</div> 49.<div id="mainContainer"> 50.<div id="mainWrapper"> 51.<div id="main"> 52.<?php if($this->countModules('mainTop')) : ?> 53.<jdoc:include type="modules" name="main" style="xhtml"/> 54.<?php endif; ?> 55.<jdoc:include type="component" /> 56.<?php if($this->countModules('mainBottom')) : ?> 57.<jdoc:include type="modules" name="main" style="xhtml"/> 58.<?php endif; ?> 59.</div> 60.<div id="sidebar"> 61.<?php if (($showRSS == 0)||($showFacebook == 0)||($showTwitter == 0)||
($showEmail == 0)):?>

62.<?php if (!empty($interactText)):?> 63.<h2><?php echo $interactText; ?></h2> 64.<?php endif; ?> 65.<ul id="interact"> 66.<?php if (($showRSS == 0)&&(!empty($rssUrl))):?> 67.<li><a href="<?php echo $rssUrl; ?>" class="rss"></a></li>

68.<?php endif; ?> 69.<?php if (($showFacebook == 0)&&(!empty($facebookUrl))):?> 70.<li><a href="<?php echo $facebookUrl; ?>" class="facebook"></a></li> 71.<?php endif; ?> 72.<?php if (($showTwitter == 0)&&(!empty($twitterUrl))):?> 73.<li><a href="http://twitter.com/<?php echo $twitterUrl; ?>"
class="twitter"></a></li> 74.<?php endif; ?>

75.<?php if (($showEmail == 0)&&(!empty($emailUrl))):?> 76.<li><a href="<?php echo $emailUrl; ?>" class="email"></a></li> 77.<?php endif; ?> 78.</ul> 79.<?php endif; ?> 80.<?php if($this->countModules('sidebar')) : ?> 81.<jdoc:include type="modules" name="sidebar" style="xhtml"/> 82.<?php endif; ?> 83.</div> 84.<div id="footer"> 85.<?php if($this->countModules('footer')) : ?> 86.<jdoc:include type="modules" name="footer" style="xhtml"/> 87.<?php endif; ?> 88.</div> 89.<div id="copyright"> 90.<p>&copy;<?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>. 91.<?php if ($showAuthor == 0):?> 92.<a href="#">Simplicity - A Joomla Blog Template</a> was designed and created
by <a href="http://www.virtuosimedia.com/">Virtuosi Media</a>. 93.<?php endif; ?>

94.</p> 95.</div> 96.</div> 97.</div> 98.</body> 99.</html>

Creating CSS Stylesheets For A Joomla 1.6 Template

Whew! How are you doing so far? Did you run out of donuts and coffee? You might want to take a break and stock up again. Grab me a donut while you're at it, if you would be so kind. Back? All right, hang in there. We're coming into the homestretch of the tutorial. Before giving the specifics of Simplicity's CSS code, let's first address styling Joomla templates in general. While your template provides a general structure for your HTML markup, unless you use template overrides, you must also account for and provide styling for the core Joomla

components and modules in addition to styling your own markup. The best approach to doing this is to simply enable as many core modules as you think would be appropriate to your template and provide styling for them. You'll either want to use a tool like Firebug to isolate stylable elements or look into each module's files. However, in most cases, if you style module headers and set a few generals rules, you'll be fine. With any CMS template, it's also important to provide basic styling for many of the typographical elements that appear in your main content block. Headings, links, ordered and unordered lists, blockquotes, tables, forms, code samples and the like should all be styled to provide a consistent typography layout. As I mentioned above, Simplicity has a larger default stylesheet and then multiple smaller stylesheets that control the colors of the theme. There really isn't anything of note to mention about the stylesheets in relationship to Joomla; they're just normal stylesheets that you would find on any website across the web. I'll start with the code for the entire default.css file, which should reside in your cssfolder.

1. /*Reset*/
2. body,div,span,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,label,input,textarea,p ,th,td {margin:0;padding:0;} 3. /*General Layout*/

4. #topBar {background:#333; background:-moz-linear-gradient(top, #333 0%,

#111 100%); background:-webkit-gradient(linear, left top, left bottom, colorstop(0%,#333), color-stop(100%,#111)); width:100%; height:60px; borderbottom:1px solid #000;} 5. #topWrapper {width:960px; margin:0px auto;} 6. #topNav {width:600px; height:60px; margin:0px 40px 0px 0px; float:left; display:block;} 7. #search {width:320px; float:right; clear:none;}

8. #mainContainer {border-top:1px solid #FFF; width:100%;} 9. #mainWrapper {width:960px; margin:0px auto; padding:20px 0px;} 10.#main {width:600px; margin:0px 40px 20px 0px; float:left;} 11.#sidebar {width:320px; float:left; clear:none;} 12.#footer {clear:both; width:100%; padding-top:21px; display:block;} 13./*General Typography*/
14.body {font-size:14px; line-height:21px; font-family:Verdana, Geneva, Tahoma, sans-serif; background:#EFEFEF;} 15.h1, h2, h3, h4, h5, h6 {color:#000; text-shadow:1px 1px 1px #FFF;} 16.h1, h2, h3, h4, h5, h6, p, blockquote, pre {line-height:21px; marginbottom:21px;} 17.h1, h2, h3, h4, h5, h6 {font-family:Georgia, Times, "Times New Roman", serif;} 18.h1 {font-size:24px; line-height:42px; margin-bottom:21px;} 19.h2 {font-size:21px;} 20.h3 {font-size:18px;} 21.h4 {font-size:16px;}

22.h5 {font-size:14px;} 23.h6 {font-size:12px;} 24.p {} 25.ul {list-style-position:inside;} 26.ol {list-style-position:inside;} 27.li {} 28.blockquote {border-left:4px solid #CCC; padding:20px; background:#FFFFFE;} 29.pre {width:100%; overflow:auto; background:#fbf8f1; border:solid 1px; bordercolor:#999 #FFF #FFF #999;} 30.legend {font-weight:bold;} 31.fieldset {padding:20px; margin-bottom:21px; -moz-border-radius:10px; -webkitborder-radius:10px; border-radius:10px;} 32.#copyright {color:#666; font-size:10px;} 33.#main ol, #main ul, #main dl {margin:0px 0px 21px 21px;}

34./*Links*/
35.a {color:#000;} 36.a:hover {color:#777;} 37.a:visited {color:#000;} 38.h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none;} 39.h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {textdecoration:underline;} 40./*Menu - Top Nav*/

41.#topNav .menu {list-style:none;} 42.#topNav .menu li {float:left;} 43.#topNav .menu li a {color:#FFF; text-decoration:none; text-shadow:-1px -1px 1px
#000; height:60px; padding:0px 20px; line-height:60px; display:block; fontweight:bold;} 44.#topNav .menu li a:hover {background:#111; background:-moz-lineargradient(top, #111 0%, #333 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#333));} 45./*Menu - Footer*/ 46.#footer .menu {list-style:none; width:600px; height:21px; display:block;}

47.#footer .menu li {float:left; margin-right:10px;} 48./*Search Box*/ 49.#search .inputbox {background:#EFEFEF; border:1px solid; border-color:#000
#CCC #CCC #000; width:238px; height:23px; line-height:21px; margin-top:13px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; bordertop-left-radius: 10px; border-bottom-left-radius: 10px; outline:none; textindent:10px;} 50.#search .inputbox:focus {background:#FFF;} 51.#search .button {border:none; height:25px; width:80px; background:url(../images/interact.png) no-repeat -243px 0px; margin-top:13px;} 52.#search .button:hover {background-position:-243px -30px; cursor:pointer;}

53./*Search Results*/ 54.#main .word .button {float:left; margin-top:7px;}

55.#main fieldset {width:558px;} 56.#main .phrases-box input, #main .only input {float:left; clear:left; width:30px;} 57.#main .phrases-box label, #main .only label {float:left; clear:none; margintop:7px;} 58.#main .ordering-box select {float:left; clear:left;} 59.#main .form-limit label {margin-top:0px; }

60.#main .form-limit select {float:left; margin-left:10px;} 61.#main .search-results {clear:both; margin:0px; padding:0px;} 62.#main .search-results {padding-top:21px;} 63..search-results dt {font-size:21px; margin:21px 0px; font-weight:bold;} 64..search-results .result-category, .search-results .result-created {color:#333; fontsize:10px;} 65./*Pagination*/ 66.#main .pagination .counter {font-weight:bold;}

67.#main .pagination ul {list-style:none; padding:0px; margin:0px;} 68.#main .pagination li {float:left; margin-right:10px;} 69.#main .pagination .pagenav {padding:10px; border:1px solid; border-color:#999
#333 #333 #999; display:block; background:#FFF; border-radius:10px; -mozborder-radius:10px; -webkit-border-radius:10px; background:-moz-lineargradient(top, #EEE 0%, #CCC 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#EEE), color-stop(100%,#CCC)); textshadow:#FFF 1px 1px 1px;} 70.#main .pagination span.pagenav {color:#999;} 71.#main .pagination a.pagenav {text-decoration:none; font-weight:bold;}

72.#main .pagination a.pagenav:hover {background:#CCC; color:#000; bordercolor:#333 #FFF #FFF #333; background:-moz-linear-gradient(top, #DDD 0%, #CCC 100%); background:-webkit-gradient(linear, left top, left bottom, colorstop(0%,#DDD), color-stop(100%,#CCC));} 73./*Main*/ 74.#main .article-info {margin-left:0px;}

75.#main .article-info-term {display:none;} 76.#main .article-info dd {font-size:10px; color:#777;} 77.#main .item-separator {height:1px; width:100%; background:#FFF; display:block;
border-top:solid 1px #999; margin:31px 0px 30px;} 78./*Sidebar*/ 79.#sidebar .moduletable {margin-top:42px;}

80.#interact {list-style:none; height:63px; margin-bottom:21px;} 81.#interact li {float:left;} 82.#interact .rss, #interact .facebook, #interact .twitter, #interact .email
{background:url(../images/interact.png) no-repeat 1px 1px; width:55px; height:55px; display:block;} .rss:hover {background-position:1px -59px;} .facebook {background-position:-60px 1px; margin-left:33px;} .facebook:hover {background-position:-60px -59px;} .twitter {background-position:-120px 1px; margin-left:33px;} .twitter:hover {background-position:-120px -59px;}

83.#interact 84.#interact 85.#interact 86.#interact 87.#interact

88.#interact .email {background-position:-180px 1px; margin-left:34px;} 89.#interact .email:hover {background-position:-180px -59px;} 90./*Contact Form*/ 91.#main form {width:500px;} 92.#main label, #main input, #main textarea {float:left; clear:left;} 93.#main label {font-weight:bold; line-height:21px; margin-top:21px;} 94.#main input, #main textarea {width:400px; -webkit-border-radius:10px; -mozborder-radius:10px; border-radius:10px; height:22px; margin-top:7px; outline:none;}

95.#main textarea {height:200px; border:1px solid; border-color:#666 #FFF #FFF

#666;} 96.#main #send {height:26px; width:100px; line-height:24px; position:relative; top:1px; border:1px solid; border-color:#CCC #666 #666 #CCC; padding:0px 20px; background:#eeeeee; background:-moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background:-webkit-gradient(linear, left top, left bottom, colorstop(0%,#eeeeee), color-stop(100%,#cccccc)); text-shadow:1px 1px 1px #FFF;} 97.#main #send:hover {background:#CCC; background:-moz-linear-gradient(top, #CCC 0%, #EEE 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCC), color-stop(100%,#EEE)); cursor:pointer;} As you can see, I've separated the CSS code into different categories to make it easier to maintain. The CSS reset rule is a simple, but effective way to start at the same point of style across browsers. When I code a stylesheet, I generally try to put the styling for the big content blocks all in one place, followed by a section for general typography. You'll notice that I also included styling for search results and pagination, two features you'll see enabled in many Joomla sites. The only part of the Simplicity template stylesheet that addresses a custom module is at the very end where I've styled our own Joomla contact form module. The module isn't included with the template, but it can be purchased and downloaded separately. Now that we've covered the main stylesheet, let's create the stylesheets for the themes, also to be placed in the css directory. First up, our "Gray Calm" theme and it's stylesheet, gray.css.

1. /*Template Color - Gray Theme*/ 2. #topBar {background:#333; background:-moz-linear-gradient(top, #333 0%,

#111 100%); background:-webkit-gradient(linear, left top, left bottom, colorstop(0%,#333), color-stop(100%,#111)); width:100%; height:60px; borderbottom:1px solid #000;} 3. a {color:#000;} 4. a:hover {color:#777;} 5. a:visited {color:#000;} Next is the blue template, titled "Blue Serenity" and blue.css

1. /*Template Color - Blue Theme*/

2. #topBar {background:#5F9ACE; background:-moz-linear-gradient(top, #5F9ACE

0%, #3F5A84 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#5F9ACE), color-stop(100%,#3F5A84)); width:100%; height:60px; border-bottom:1px solid #444AA7;} 3. #topNav .menu li a {text-shadow:-1px -1px 1px #444AA7;} 4. #topNav .menu li a:hover {background:#3F5A84; background:-moz-lineargradient(top, #3F5A84 0%, #5F9ACE 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F5A84), color-stop(100%,#5F9ACE));} 5. #search .inputbox {border-color:#3F5A84 #CCC #CCC #3F5A84;} 6. a {color:#3F5A84;} 7. a:hover {color:#5F9ACE;} 8. a:visited {color:#3F5A84;} 9. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#000;} Now comes the red template, titled "Red Passion" and red.css

1. /*Template Color - Red Theme*/ 2. #topBar {background:#ff3019; background:-moz-linear-gradient(top, #ff3019 0%,

#cf0404 100%); background:-webkit-gradient(linear, left top, left bottom, colorstop(0%,#ff3019), color-stop(100%,#cf0404)); width:100%; height:60px; borderbottom:1px solid #444AA7;} 3. #topNav .menu li a {text-shadow:-1px -1px 1px #444AA7;} 4. #topNav .menu li a:hover {background:#cf0404; background:-moz-lineargradient(top, #cf0404 0%, #ff3019 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf0404), color-stop(100%,#ff3019));} 5. #search .inputbox {border-color:#cf0404 #CCC #CCC #cf0404;} 6. a {color:#cf0404;} 7. a:hover {color:#ff3019;} 8. a:visited {color:#cf0404;} 9. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#000;} Who doesn't like lime green? Here is the theme titled "Lime Spritz" and lime.css

1. /*Template Color - Lime Theme*/ 2. #topBar {background:#AEE239; background:-moz-linear-gradient(top, #AEE239

0%, #8FBE00 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#AEE239), color-stop(100%,#8FBE00)); width:100%; height:60px; border-bottom:1px solid #0EAD00;} 3. #topNav .menu li a {color:#FFF; text-shadow:-1px -1px 1px #8FBE00; fontweight:bold;} 4. #topNav .menu li a:hover {background:#8FBE00; background:-moz-lineargradient(top, #8FBE00 0%, #AEE239 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8FBE00), color-stop(100%,#AEE239));}

5. #search .inputbox {border-color:#8FBE00 #CCC #CCC #8FBE00;}

6. a {color:#8FBE00;} 7. a:hover {color:#AEE239;} 8. a:visited {color:#8FBE00;} 9. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#000;}

Finally, we finish with our refined purple theme, "Grape Juice", and purple.css

1. /*Template Color - Purple Theme*/ 2. #topBar {background:#73626E; background:-moz-linear-gradient(top, #73626E

0%, #413E4A 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#73626E), color-stop(100%,#413E4A)); width:100%; height:60px; border-bottom:1px solid #302D39;} 3. #topNav .menu li a {color:#FFF; text-shadow:-1px -1px 1px #413E4A; fontweight:bold;}

4. #topNav .menu li a:hover {background:#413E4A; background:-moz-lineargradient(top, #413E4A 0%, #73626E 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#413E4A), color-stop(100%,#73626E));} 5. #search .inputbox {border-color:#413E4A #CCC #CCC #413E4A;} 6. a {color:#413E4A;} 7. a:hover {color:#73626E;} 8. a:visited {color:#413E4A;} 9. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#000;}

Odds and Ends

We're almost done with Simplicity, but there are just a few more issues that need to be addressed. First, don't forget to add a favicon.ico into the root template directory. Also, we need to include the images used for CSS sprites in the images directory.

Template Preview Images

Joomla allows for template preview images to be displayed from the template manager administration, both as a thumbnail and a larger image. Let's add them to our template. The template thumbnail should measure 200 pixels wide by 150 pixels tall and should be saved to your root template directory with the nametemplate_thumbnail.png. The template preview image is saved in the same place and should be 640 pixels wide by 380 pixels tall under the name template_preview.png. You can view your template images by clicking on Extensions->Template Manager and clicking on the "Templates" tab in your Joomla administration. Clicking on the thumbnail will reveal the preview image.

Template Overrides for Joomla 1.6

I mentioned that Joomla allows template overrides earlier in the tutorial and even though Simplicity doesn't use overrides, I'd like to cover them briefly here so that you can take advantage of them for your own templates. All modules and components in Joomla come with default HTML markup that they use for displaying content. If you have a special situation where Joomla's core (or a third party extensions's) markup doesn't meet your needs, you can override that markup by providing your own in your template. The override allows you to get the markup you need without having to hack the module or component files. You can learn more about implementing template overrides by visiting the Joomla website.

Download A Blank Skeleton Template For Joomla 1.6

For all the aspiring Joomla template designers who may be reading this tutorial, I'm making a starter kit available so you can make your own Joomla template. You'll find all the necessary files prepped so that you need only replace the sample text with your own and provide the CSS and HTML markup. It's essentially your own Joomla template creator in a box (or .zip file, as it may be).

Download Simplicity, A Free Blog Template For Joomla 1.6

As for Simplicity, I'm providing it as the first of our free Joomla template downloadsfor you to use or modify if you so desire. We'll be providing more Joomla templates, extensions, and resources in the future, so stay tuned.

Summary
Congratulations, you made it through an absolutely monster tutorial. We covered every aspect of Joomla template design, from providing language translations and creating template settings to custom module positions and template overrides. You should now be well-equipped to make any template you can imagine for Joomla 1.6; but first, treat yourself to a much-needed break. Oh, and you can leave the donuts with me. If you get stuck or would prefer to leave all the hard Joomla customization work for someone else, we also offer custom Joomla development and website design services. Just send us a quick note about what you need and we'll get back to you pronto!