For those of you already familiar with Joomla!, we have a couple of standalone Joomla! installs to recommend for template development.

If you don’t have a web server available to you at all, we highly recommend Ravenwood Joomla! Server (formerly called JoomlaLite).

http://extensions.joomla.org/component/option,com_mtree/task,listcats/cat_id,1850/Itemid,35/

Ravenwood Joomla! Server is probably the easiest development installation to get rolling, and it allows you to run Joomla! on your local machine without a web server. In fact, if you have a web server running on your computer, like Apache or IIS, you must disable it (likewise for MySQL) for Ravenwood JS to work properly.

Ravenwood JS is so light that you can even run it from an external flash/USB drive. This enables you to have multiple versions of Joomla! installs for different projects (but you can only run one installation at a time), and take a project with you from computer to computer.

Another alternative is to use JSAS (Joomla! Stand Alone Server). JSAS is somewhat similar to Ravenwood JS, but it’s a bit bigger (and probably won’t fit on a flash drive). However, it lets you have five separate Joomla! sites under one installation.

http://www.joomla.org/content/view/462/37/

One more workflow issue before we get to the fun stuff. Note that the browser icon in Figure 3.3 is a Firefox icon. It’s more than a suggestion, or just what I, as a geek prefer. It’s what you should use when developing for the Web, period.

If you don’t like Firefox, then you can temporarily get away with using something else like Opera, or maybe Safari (if you’re on a Mac). But you really should be using Firefox.

I know that you’re thinking that I simply don’t like IE. But this is not the case at all, IE6 can easily slip into what’s called quirks mode, where, for whatever reason, it works more like old IE 5.x browsers and simply does not render CSS quite the same way that all the other W3C-compliant browsers in the world do.

While IE 7 is reportedly going to handle most of these CSS rendering issues, and maybe you are already using IE 7, I’m just not 100 percent convinced, especially as IE 7 will probably still run differently if quirks mode is triggered.

The main reason why I recommend Firefox is because it is truly a designer and developer’s browser. Firefox has great features that we’ll be taking advantage of to help us streamline our development process. In addition to these built-in features, Firefox has a host of extremely useful extensions that I’ll recommend to further enhance your workflow.

The secondary reason to use Firefox is back to IE. Yes, you are thinking “But everyone uses IE and knows about its quirks mode CSS rendering issues, so why not just design for it?” And that is exactly what we’ll be doing.

Why exactly must we design for Firefox first, then IE? Because IE’s quirks are so well-known among web designers and developers, there are tons of well-documented hacks and workarounds for them. However, if you set up your design only viewing it so that it looks good in IE first, and then check it out in Firefox and other browsers to find it a mess, wrangling with your CSS rules at that point will be much more difficult. Think: driving backwards with no back window or side mirrors in a snow storm.

It will be much easier for you if you develop for Firefox first with valid XHTML and CSS code. The ideal scenario will be that your markup will remain valid and not trigger IE’s quirks mode, saving you a lot of CSS problems. However, if for some reason, your template triggers quirks mode in IE, then you’ll still be able to go in and sparingly apply a well-documented hack or workaround here and there to compensate for IE’s quirks-mode-related box-model issues, pixel drift, and all the other common rendering anomalies known to IE and its quirks mode. The end result will be a valid template that looks great in all browsers.

In a nutshell, there’s no need to view usage of Firefox as part of picking sides in the “Microsoft vs. the World” saga. Firefox is just another good development tool, like your image editor, HTML editor, checklists, and FTP client. When you’re not developing, you can use whatever browser you prefer.

We’re going to continue leveraging the rhuk_solarflare_ii template. Open your HTML editor, and set it up to display a FTP or local working directory panel so that you have access to your Joomla! installation files. Also, have a couple of browser windows or tabs open with your Joomla! home page loaded into them as well as having the Joomla! Administration Panel available.

To get started, we’ll create a copy of the existing Rhuk template. I’m using a development installation of Joomla! on a remote server via FTP. If you’re working locally, you can follow my instructions using common desktop commands instead of an FTP client.

Now that our template base is ready, let’s make a dramatic change to it. Our first change will actually be through the Joomla! Administration Panel. We already know that we’re going to be moving the main navigation buttons from the left module position slot to the top module position slot.

We’re now ready to take a look at the template_css.css style sheet. If you’re familiar with CSS rule syntax, go ahead and open up the template_css.css from inside the CSS directory into your HTML editor. It should open right into Code or Source view. If not, make sure you’re in Code view so that you can see all the rules.

If you’re more comfortable using your HTML editor’s CSS Wizard, we recommend that you float the CSS styles panel and CSS properties panel next to each other in Dreamweaver so that each rule that you click on in the styles panel will appear next to it in the properties panel as I’ve done in Figure 3.11.

Figure 3.11 Editing your CSS file

Looking at our style sheet or in the Style panel, let’s find those two ids and class names and have a look at them.

It’s just a good design practice to name CSS rules that affect only a particular module position with that module position’s name. You will speed your workflow and be much less confused in the long run. It’s clear that the Rhuk template designer followed this practice, so it’s clear that the moduletable class is not what we’re looking for. We want to edit one of the top_outer or top_inner classes.

The Difference between CSS Classes and IDs

In general, classes are not used to denote position, height, width, or other main features of module positions. (Classes have a “.” before their name in a style sheet and can be reused by many different XHTML elements on a page using the class attribute.) Because each module position should be unique within your template, you will only ever have one top module, one left module, one right module and so on, so it makes sense to use only ids to control module positions. (Ids have a “#” before their name and can only be assigned to one XHTML object on the page using the id attribute.)

Since we’re looking to change the height of the top module, it’s pretty clear that either the top_outer or top_inner ids is where we need to look because they have got the word top in their name, and they are ids, not classes.

Let’s look at the first id rule: top_outer. It turns out that top_outer only has two properties associated with it, and neither of them are the height property. So let’s look at top_inner.It is set to a height of 144px.

Figure 3.12 Editing the top_inner rule

That’s what the Properties panel shows. If we look in the actual style sheet using the Code view, we see that top_inner actually has two height properties! (This is another good reason for trying to work inside the Code view as much as possible.) The second height property has a value of 150px. The Rhuk template author has added the !important property value as a hack after the first height property, so the layout will render well in Firefox and IE.

Note

!important They don’t call them Cascading Style Sheets for nothing! Using the !imporant property value is one of the most common ways to hack IE. Normally, whatever rule is last specified in a style sheet takes precedence. Hence, the style sheet cascades. However, if you use !important after a property value, then that CSS property will take precedence regardless of what appears after it. This is true for all browsers except IE, which completely ignores it. If IE has fallen into quirks mode, borders, margins, and padding property values, will start to get off compared to Firefox. (We’ll look at the box model that describes this in detail in Chapter 4, Debugging and Validation.) If your height property looks good at 144px in Firefox, but needs to be set to 150px to accommodate IE’s issues, then you can see how setting a Firefox height property first with a !important value will make it look good in Firefox and other compliant browsers while IE ignores it and picks up the last height value, looking great at 150px.

Checking our design mock-up in our image editor, we can see that we will need about 250 pixels to accommodate our main menu’s height. We can also see, based on the Rhuk’s design, that there must be about a six pixel difference between Firefox and IE due to some other margins or padding. So let’s enter 250px into the first height property with the !important value and enter 256px into the second height property. The code should look like this:

#top_inner {
    padding: 2px;
    height: 250px !important;
    height: 256px;
    overflow: hidden;
    float: none !important;
    float: left;
}

Hit Save, use Alt-tab to go over to your template’s browser view, and Refresh.

Figure 3.13 Checking the menu height

This is looking good. All the menu items are visible and the padding is consistent. (This would be one of those ideal moments to save a backup!)

At this point, I’ll assume based on my previous explanation and images, that you understand how to use Firefox’s DOM Source of Selection inspector to locate the id and class names of XHTML elements that you’d like to manipulate via their CSS rules.

From here on in this chapter, I’ll just reference the id or class name that we’re changing and not drag you through its location finding process. I’ll also assume that you will be working with your CSS sheet the way you’re most comfortable. Just be aware that, if you’re working in the CSS wizard view, you may inadvertently add or remove code or miss hacks and workarounds added by the Rhuk author.

Remember all those lists we made in Chapter 2? They will be coming in handy. Open up your color palette text file and have it ready. We’re going to start changing the colors in our template.

Whoops! Something has gone wrong. Our background color didn’t change when we added the background property. Look at the style sheet again and notice that there are two body element rules. (The second body rule appears at line 323!) We’re not sure why the Rhuk author did that. Let’s consolidate these two body element rules.

For our template design, we want to get rid of almost all the grey outlines separating each module position. The only outlines we’d like to keep are the outlines surrounding the Login, Back, Vote, and Result-type buttons. We can see several rules touting the same border: 1px solid #cccccc; property.

We will press Ctrl+F and use our HTML editor’s “find” feature to zero in on each border property with those values and see, one by one, if they’re something we want to remove, or change the color to the dark green of our color scheme.

Figure 3.16 Checking the border change

Now that we’ve removed each of the unwanted outlines, let’s move on to the final rollover colors and fonts.

Now we’re ready to add our images. In Chapter 2, we were careful to export most of our images using the same name and image type as the images in the Rhuk template. The only image to which we gave a unique name was our header image. For the most part, we should just be able to upload (or copy if working locally) our images into our new template’s image directory and let them overwrite the existing Rhuk images.

While you do this, press Alt+tab and Refresh to check your template.

Figure 3.18 Checking the images

The final images that we need to add are, of course, in the main header. We’d also like the top navigation to be textured and lastly, we’d like our main background to have a gradient.

Top Navigation Images

Let’s start with the top navigation. The textured background is actually just the subhead background. Locate the #buttons_inner rule and add a background-image property set to: url(../images/subhead_bg.png).

Next, we want to put our faded background in. We want to ensure that the largest screen size can accommodate the gradient, so we’ve set it for a width of 4 pixels and a height of 1024 pixels.

Now surely many people will have screens much larger than this. That is why the main background color (#070706) is set to the bottommost color of the gradient. We will set our gradient to repeat from the top, left corner on the horizontal axis only and not to scroll. On screens larger than 1024 pixels high, the background color will stop, and the natural background color will pick up and go to infinity. This uses less bandwidth as we can use a smaller image instead of creating one that is much larger.

Locate the body rule and add the following values to the background property after the background color:

url(../images/main_bg.jpg) repeat-x fixed top left

The complete rule should now look like the following:

body {
    height: 100%;
    margin: 15px;
    margin-bottom: 1px;
    padding: 0px;
    font-family: Arial, Helvetica, Sans Serif;
    line-height: 120%;
    font-size: 11px;
    color: #333333;
    background: #070706 url(../images/main_bg.jpg) repeat-x fixed top
                                                                left;
}

Click Save, use Alt+tab to go over to your browser and Refresh to view your results.

Figure 3.19 Checking the top navigation and background images

The Header Image

The background looks good. We last named our header my_nature_header.jpg. You probably noticed while working with the style sheet, that there were two header rules: header_outer and header. The header rule uses a background property with a url value. Let’s replace the existing header image name with our header image name in that url property value. The rule should look like the following:

#header {
    float: left;
    padding: 0px;
    margin-right: 2px;
    width: 635px;
    height: 250px;
     background: url(../images/my_nature_header.jpg) no-repeat;
}

Click Save, use Alt+tab to go over to your browser, and Refresh to view your results.

Figure 3.20 Checking the header

Well, it looks like we have just one last tweak to make. The header rule’s height property is set to 150px. Our header image was designed to match our main menu height, so let’s change the height property to 250px. Now, use Alt+tab, and Refresh to check your template.

Figure 3.21 Checking the header again

Congratulation! You now have your completed Joomla! template. If you’d like to compare your final template_css.css style sheet with the one that I came up with for this design, refer to the Rhuk Redesign section in the Appendix.

You will notice that we did all this without even touching the original template’s XHTML in the index.php file! You will not always be so lucky. Let’s now look at what’s required to design your own XHTML layout from scratch.

In case you haven’t been paying attention, we’re going to be using XHTML, and for that, there are two common DOCTYPES: Strict and Transitional.

The Strict DOCTYPE is for the truly semantic, it means that you have absolutely no presentational markup in your XHTML. Every element in your XHTML merely aids in describing the type of text and data displayed and all your presentation styles come from your style sheet.

The Transitional DOCTYPE requires you to use the syntax of XHTML (with lower case tags and attribute names, all tags closed, including empty tags, and so on), but your template will not completely break if you reference a presentational HTML tag or other HTML 4.0 attributes in your markup.

Normally, we’d prefer the Strict DOCTYPE. However, at this time, it’s hard to control everything that Joomla! outputs. (Some modules don’t use heading tags for their titles, others output tables natively, and so on.) Also, there’s the ultimate consideration when using Joomla!—the built-in WYSIWYG content editor.

Once your template is part of a working Joomla! site, the key feature that users are most likely going to be interested in leveraging is this WYSIWYG content editor. The use of the WYSIWYG editor to contribute content means that the site will be relying on basic HTML presentational tags (strong, em, strike, u tags, and the like) to format and display text.

As a result, we should not use the XHTML Strict DOCTYPE and instead rely on the XHTML Transitional DOCTYPE. This DOCTYPE will let us take advantage of HTML’s presentational features within our XHTML.

Your DOCTYPE will be the first line of code in your index.php file and should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

You should note, while being integral to a valid template, the DOCTYPE declaration itself is not a part of the XHTML document or an XHTML element. It does not use a closing tag, even though it does look a bit like an empty XHTML tag.

After the DOCTYPE, we can add in the other essential requirements of XHTML Transitional markup which are as follows:

<html>
<head>
<title>My New Template Title</title>
</head>
<body> body parts go here </body>
</html>

You can hit Save, and then Alt+tab and hit Refresh to check it out in your browser.

Figure 3.24 Getting something to show up

We are moving along in the right direction, but it’s still not much to look at. So let’s get the layout started. We’d like our template to have a standard header that stretches across all three columns. The middle column is the main content holder, and a footer running across the bottom of all three columns must fall beneath the longest extending column. Our basic layout will generally look something like the following:

Figure 3.25 Checking the fonts

Let’s start off with some very basic XHTML code within the index.php files body tags. This will create the div tags for each segment: header, footer, side columns, and middle/main column:

<body>
<!--<a name="top"></a>-->
<div id="container"><!--container goes here-->
<div id="header">
header stuff goes here:
</div><!--//header-->
<!-- Begin #container2 this holds the content and sidebars-->
<div id="container2">
<!-- Begin #container3 keeps the left col and body positioned-->
<div id="container3">
<!-- Begin #content -->
<div id="content">
main content goes here
</div><!-- //content -->
<!-- #left sidebar -->
<div id="sidebarLT">
left side bar
</div><!--//sidebarLT  -->
</div><!--//container3-->
<!-- #right sidebar -->
<div id="sidebarRT">
right side bar (will include main menu)
</div><!--//sidebarRT -->
</div><!--//container2-->
<div id="top_navlist">
top nav will go here (css will place it up top)
</div><!--//top_navlist-->
<div id="footer">
footer information will go here
</div><!--//footer-->
</div><!--//container-->
</body>

Next, hit Save, use Alt+tab to get to your browser, and Refresh to view the following:

Figure 3.26 The semantic structure

Still not much to look at, but you can see our semantic goals at work. For instance, if a search engine bot or someone using a text-only browser or mobile device came and viewed our site, this is the semantic order they would see things in:

Let’s now start to get this stuff looking like a website. You will notice each of our divs has an id name, and the divs that are going to be our three columns are wrapped inside an outer div called container2.

The main and left columns are wrapped in a div called container3. The entire set of divs including the header and footer, which are outside the container2 div are wrapped in a main div called container.

This structure is going to hold our modules together and let them display semantically with the main content first, but the style will allow the left column to show up on the far left. This structure also ensures that the footer floats to the bottom of the longest column.

First, we will need to add a line of code to get our index page to associate with our CSS template and then be on our way. Place this code inside your header tags, under your title tags (starting at about line 7 in your index.php file):

<script type="text/javascript"> </script>
<style type="text/css" media="screen">
    @import url("<?php echo $mosConfig_live_site;?>
                  /templates/my_nature_design/css/template_css.css");
</style>

We’re going to use the @import method to hide our style sheet from very old browsers such as Netscape 4. The empty JavaScript tag will keep our template from flickering unstyled content before loading in the style sheet.

Our basic CSS in the template_css.css file, which will position our XHTML div tags looks like the following:

/* css */
/*////////// GENERAL //////////*/
    body {
      margin-top: 0px;
      margin-bottom: 30px;
      background-color: #FFFFFF;
    }
    #container {
      width: 850px;
      margin: 0 auto;
        margin-top: 20px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #666666;
        background-color: #fff;
        border: 1px solid #333;
    }
    #container2 {
      width: 850px;
      margin: 0 auto;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      line-height: 1.6em;
      color: #666666;
        border:1px solid #ff00cc;
    }
    #container3 {
      width: 635px;
        float: left;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      line-height: 1.6em;
      color: #666666;
        border:1px solid #ff66cc;
    }
/*////////// HEADERS //////////*/
    #header {
      width: 850px;
        height: 140px;
      border: 1px solid #ff6600;
      padding-bottom: 10px;
      padding-top: 10px;
      clear: both;
    }
/*////////// CONTENT //////////*/
    #content {
      width: 400px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 10px;
        border: 1px solid #006600;
        float: right;
    }
/*////////// NAV //////////*/
/*this is the tab layout*/
    #top_navlist {
      position: absolute;
      top: 20px;
     width:850px;
     line-height:normal;
      clear: both;
      border: 1px solid #006600;
    }
/*////////// RIGHT SIDEBAR //////////*/
    #sidebarRT {
      float: right;
      width: 175px;
      padding-left: 21px;
      padding-right: 10px;
      padding-top: 10px;
      border: 1px solid #000066;
    }
/*////////// LEFT SIDEBAR //////////*/
    #sidebarLT {
        float: left;
      width: 175px;
      padding-left: 21px;
      padding-right: 10px;
      padding-top: 10px;
        border: 1px solid #00ff66;
    }
/*////////// FOOTER //////////*/
    #footer {
      margin-top: 15px;
      padding-top: 0px;
      padding-bottom:0px;
      clear: both;
      width: 850px;
      background-color:#FFF;
        border: 1px solid #ff0066;
}

By hitting Save, Alt+tab, and Refresh, the resulting CSS gives us a general layout template that looks like the following:

Figure 3.27 First look at the layout

At last, we’ve got something that’s starting to look like a website, and we’re ready to start adding Joomla! template code.

First off, Joomla! needs a little information to ensure that everything is running properly, and we need to add this code before the DOCTYPE (right at line 1 of your index.php file):

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location
                                               is not allowed.' ); ?>

This ensures that the template is being accessed via Joomla! itself (a.k.a. someone just normally hitting the website in the normal way) and that someone hasn’t figured out the direct path to the template file and is trying to access it directly. If all is well, this code will do nothing (which is good because browsers, especially IE really hate it when you put something above the DOCTYPE). Otherwise, the viewer will simply see a Direct Access to this location is not allowed message.

Next, to keep in line with web standard requirements, let’s modify our opening html tag with the following highlighted code, which will ensure that the language settings we chose in the Joomla! Administration Panel’s Global Configuration Settings will be set in our template:

<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE;
?>" xml:lang="<?php echo _LANGUAGE; ?>" >

Now, we’re ready for our template’s first meta-tag and to set up the header so that it will dynamically display our template’s title in its self-generated title tag:

Place the highlighted code inside your header tag, replacing your existing title tag, which is just before your style sheet reference link tag:

<head>
<meta http-equiv="Content-Type" content="text/html;
                                              <?php echo _ISO; ?>" />
<?php
if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type="text/javascript"> </script>
<style type="text/css" media="screen">
    @import url("<?php echo $mosConfig_live_site;?> /templates/
                         my_NEW_nature_design/css/template_css.css");
</style>

Again, after adding each chunk of code save your index.php file, and then press Alt+tab and Refresh to check the site in Firefox, even if you think there’s not much to look at!

You should now see the browser’s window displaying the title of your Joomla! site. If you right-click and View Source on the page, you’ll see that the page is now generating a plethora of standard meta-tags with relevant keyword and description content based on what was paced into the CMS. (This example is based on the View Source for my template only, yours will be different.)

<title>eternalurbanyouth.com aka: tessaract.info - Newsflash
                                                            3</title>
<meta name="title" content="Newsflash 3" />
<meta name="author" content="Administrator" />
<meta name="description" content="Joomla - the dynamic portal engine
                                    and content management system" />
<meta name="keywords" content="Joomla, joomla" />
<meta name="Generator" content="Joomla! - Copyright (C) 2005 Open
                             Source Matters. All rights reserved." />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" />

We’re now ready to add the actual content modules!

While reviewing our redesigned Rhuk template (a.k.a. my_nature_design), we noted the modules used in our site. After placing the module code in the index.php template, each module name gets wrapped in PHP code that looks like this:

<?php mosLoadModules ('module_name'), ?>

This means that the following mosLoadModules() codes need to be placed inside our div holders in our index.php template:

The following list contains key content items are needed by our template; these are not modules and therefore, have their own special syntax:

After placing each mosLoadModules() code and key content items into our template, our XHTML will now display information and content entered into the Joomla! CMS via the Joomla! Administration Panel. Your XHTML and PHP should look like this:

<body>
<div id="container"><!--container goes here-->
<div id="header">
header stuff goes here:
<?php echo $mosConfig_sitename; ?>
<?php mosLoadModules ( 'user4', -2 ); ?>
</div><!--//header-->
<!-- Begin #container2 this holds the content and sidebars-->
<div id="container2">
<!-- Begin #container3 keeps the left col and body positioned-->
<div id="container3">
<!-- Begin #content -->
<div id="content">
<?php mospathway() ?>
<?php mosMainBody(); ?>
</div><!-- //content -->
<!-- #left sidebar -->
<div id="sidebarLT">
left side bar:<br />
<?php mosLoadModules('left', -2);?>
<?php mosLoadModules('right', -2);?>
</div><!--//sidebarLT -->
</div><!--//container3-->
<!-- #right sidebar -->
<div id="sidebarRT">
<?php mosLoadModules('top', -2);?>
<?php mosLoadModules('user1', -2);?>
<?php mosLoadModules('user2', -2);?>
</div><!--//sidebarRT -->
</div><!--//container2-->
<!--<a name="mainNav"> </a>-->
<div id="tabbar"> </div>
<div id="top_navlist">
<?php mosLoadModules ( 'user3', -2 ); ?>
</div>
<!--//top_navlist-->
<div id="footer">
<?php include_once($mosConfig_absolute_path .'/includes/footer.
php'),?>
</div><!--//footer-->
</div><!--//container-->
</body>

When we save the index.php file, press Alt+tab, and click on Refresh, we get something similar to the following:

Figure 3.28 Seeing the layout with content

You will notice that, in each bit of PHP code, in addition to the standard mosLoadModule() syntax that we discussed earlier, we’ve added a, -2 after the module name. This has been done so that we can take advantage of the $style option in the mosLoadModule() functions.

You can set the $style option to be 0, 1, -1, -2, or -3. These settings provide you with the following options:

We’ve chosen -2 for our modules so that we can control their layout more easily with CSS and also reduce the number of tables in our template from over 19 to 8.

There is another way to control your menu module output. We want our menus to be displayed as bulleted lists or “flat lists” so that we can control them using more powerful CSS techniques.

Go to Modules | Site Modules and select Main Menu. You will then notice that in the Joomla! Administration Panel, you can select the menu’s style. You can do this for all menus created with the Module Manager by selecting Flat List from the Menu Style option as shown in Figure 3.29:

Figure 3.29 Setting the main menu module to flat list

Our Top Menu, Latest News, and Popular link menus are already using this Flat List option.

You’ve probably also noticed that, in restructuring the content semantically, the module names no longer match with the main div content holder areas. For instance, we have mosLoadModules code for both the left and right modules inside the left side div.

If you know that you’re the only person who is going to be editing the template, this is probably fine. However, if you want to keep it clear and simple for your client or another Joomla! developer who might have to take over your template, then you will want to fix it. This can be done by going to your Joomla! Administration Panel, selecting Modules | Site Modules, and then repositioning the modules into more appropriately named position slots. You can also select Site | Template Manager | Module Positions and create your own custom module position names. You will then have to go back into the Site Modules manager and assign the elements to their new Module Position. Also, if you do change the names in the Joomla! Administration Panel, don’t forget to update your template index.php file with the new module name inside the mosLoadModules code.

Be aware that, if you create your own position names, you will need to inform your client or Joomla! administrator that they need to create these module positions in the Module Position Manager in order for your template package to install properly and work.

We’re now at a point very similar to where we started at the beginning of this chapter. We have a template which has its general layout in place. With a few key color changes, creative font application, and background images, we will pretty much have our well styled, new, and improved template.

Our CSS file already has our own core id rules for our template layout. We will start with assigning colors and general properties. After that, moving forward will be exactly like the Rhuk template (at the beginning of this chapter), we will select text and use Firefox’s DOM inspector to show us what class and id rules the Joomla! content is spitting out so that we can create customized CSS rules for each element, bringing in our background images and final touches.

Our header area has changed in size, so we will need to go back into our image editor and reexport a header image that’s wider so that it accommodates our new semantic template better.

When all is said and done, and our fonts and images are placed into our template_css.css sheet, we should have a template that looks like the following:

Figure 3.30 Final Semantic Template View

To compare your template to mine, please refer to the Table-less Design section in Appendix A, where you can view the complete template_css.css style sheet and the index.php template code in its entirety.

If you felt accomplished earlier, then having reworked the rhuk_solarflare_ii template, you should be ecstatic at this point for accomplishing your first semantic, table-less, CSS Joomla! template. Great job!