web design, England, Britain, UK, belgium

Identifying Key Elements for Joomla! Template Design - Joomla & VirtueMart Tips & How To's

Identifying Key Elements for Joomla! Template Design. This article is extracted from the Joomla! Template Design book.

Home Joomla VirtueMart Tips Identifying Key Elements for Joomla! Template Design




Identifying Key Elements for Joomla! Template Design
  • Joomla 1.0
  • Templates

Before beginning the actual coding of the template you need to get an overall idea of where everything will be and how it will look.
But thanks to Packt Publishing I can publish the relevant chapter from "Joomla! Template Design" by Tessa Blakeley Silver.

Joomla! E-Commerce with VirtueMart

In the world of Joomla! websites where everyone has the same modules to work with, the three main things that will differentiate your site from all the others are the color scheme, graphic element style, and module placement.

This article is extracted from the "Joomla! Template Design" book. In this article by Tessa Blakeley Silver, we will identify the key elements of a Joomla! template and discuss what considerations to make when contemplating your own design. You'll pick up some tips and tricks to help you define your color scheme and graphic style, as well as learn some standard techniques for optimizing and extracting images from your design while preparing to code it up.

The Joomla! Template

When you install Joomla!, it comes with one or two built-in templates. In my version 1.0.8 installation, MadeYourWeb by Mark Hinse and rhuk_solarflare_ii by rhuk, are the two available. If you have a different version, you may have different templates available to you.

We'll use the rhuk_solarflare_ii template to review the basic parts of a Joomla! template that you'll need to think about as you create your visual design.

First, let's look at the following figure to see how our basic template affects the Joomla! PHP output:

What Your XHTML does to the template layout.

You'll recall that the PHP code for the footer, sitename, pathway, and MainBody are not module position slots. These functions load in the required information that helps Joomla! to run, display standard footer information, and load the actual site content from the Joomla! MySQL databases.

Top, left, and right are module position slots, which can be assigned site modules. Site modules are what contain navigation links, form elements, and Joomla! status information that will be displayed to your visitors such as: Who's Online or Who's Logged In. You can assign site modules to any of the module position slots and even load multiple site modules into these position slots by assigning an ascending numerical order to them. You do this in the Module Manager [Site] by going to Modules | Site Modules in the administration panel.

Site Modules panel in Joomla!'s admin panel.

As shown in the following figure, you can assign up to 50 module position slots to place in your template layout. Go to Site | Template Manager | Module Positions to view the standard module positions Joomla! provides.

Module Positions panel in Joomla's admin panel.

Now that we have a deeper understanding of how the template, module position slots, and site modules work, let's take a look at how these three elements come together through the rhuk_solar_flare_ii template. The module position slot name is on the left, the content module name is on the right, and the assigned order, if any, is underneath.

Example of modules assigned to Module Positions

Using this example, you can now start thinking of how you're going to construct your template design. Let's move on to creating your design.

Considerations to be Made

First off, let's get to the most important consideration What modules will be used in your site? Thus, what modules do you need to design for?

Go through your Joomla! installation and review all the modules your site will be using. There's the obvious top menu, main menu, and user menus, but will you be displaying the login form or a poll? If so, do you want to change their display? Will your site be displaying banners? Will your site require any special or add-on modules or components such as an image gallery or shopping cart?

Make a list of each module or special component that your site will be displaying and take special note of their elements: Do they have headers or special text areas? Would you like anything to be highlighted with a background image? Do the modules have items that should be standard buttons or icons? All these things should be included in your list.

When you begin work on your design in Photoshop, you'll want to compare your mock-up against your module checklist and make sure you've designed for all your modules.

Refining the Wheel

The next consideration is whether you are going to work from an existing template or from scratch? The more you work with Joomla! and learn all its quirks, the more you'll see that sometimes starting from scratch is best. However, while being a CSS and XHTML “wiz” is awesome, you don't always need to reinvent the wheel!

Take a look at what happens to the standard rhuk template when all we do is change the color scheme and fonts.

rhuk_solarflare_ii template with CSS changes to color and fonts

Now, check out what happens in the following figure when we change the graphics.

rhuk_solarflare_ii template with image changes

And last, see what happens in the following figure when we use the Module Manager to swap module placements around.

rhuk_solarflare_ii template with module swaps

By thinking of this design in terms of leveraging the existing rhuk_solarflar_ii template, we effectively created a whole new template and module layout which is completely unique. And we only had to minimally edit the CSS to get it to work. Everything else was done in the Joomla! admin panel without touching any code.

If you're going to work from an existing template, it's best to review that template's HTML output (right-click or Alt-click and chose View Source) and pull the image names from each page that you'll be replacing with your own images. It's also helpful to go through that template's image directory and just note each image: which ones you're going to change, leave alone, re-size, and so on as you work with your design mock-up. Make sure to note the specific file names that are going to be overwritten in your module check list so that you have them handy when it is time to export your image slices.

So, when is it best to start from scratch? It's up to your site's specific needs. For instance, the Joomla! in-built templates comes with use tables to hold their layout structure together. If you want an all semantic, valid XHTML markup with CSS layout, you'll need to create it yourself from scratch.

Whichever road you take, as you continue to design and build Joomla! templates, you'll find over time that you have your own “master” template—files you've generated or got to know so well—you understand how all their parts work together. You'll see how applying any new modules or components will affect the files and how they should be incorporated. It will become easy for you to work with this favorite or “master” template and easily massage it into any new creation you can imagine.

Getting the Design Rolling

The best place to start off is to define a color scheme. You'll want a predefined pallet of three to ten colors arranged in a hierarchy from most prominent to least. We would like to create a text file that lists the hex values and some comments for each color about how it should be used in the template.

We've seen designers who do well with a scheme of only three colors. However, six to ten colors is probably more realistic for your design. Keep in mind that you've got several types of rollovers and links to deal with, and that will push your color scheme out.

Color schemes are the hardest thing to start pulling together. Designers who have many years’ color theory still dread coming up with eye-catching color pallets. But the fact is, it is the first thing people will notice about your site and it's the first thing that will help them notice that this is not another Joomla! website with some slightly varied, standard template.

Two Minute Color Schemes

When it comes to color schemes, don't sweat it. Mother Nature or at the very least, someone else, already created some of the best color schemes for us. Sure, you can just look at another site you like and see how they handled their color scheme, but it's hard to look at someone else's design and not be influenced by more than just their color scheme.

For those who intent on an original design, here's my color scheme trick. If your site will be displaying a prominent, permanent graphic or picture (most likely in the header image), start with that. If not, go through your digital photos or persue a stock photography site and just look for pictures which appeal to you the most.

Look through the photos quickly. The smaller the thumbnails the better: content is irrelevant! Just let the photo's color hit you. Notice what you like and don't like (or what your client will like or what suites the project best) strictly in terms of color.

Pick one or two images that strike you the most and drop them into Photoshop. A thumbnail is fine, but you'll probably want an image a bit bigger than that. Don't use photos with a watermark as the watermark will affect the pallet output.

Go to Filter | Pixelate | Moziac and use the filter to render the image into huge pixels. The larger the cell size, the fewer colors you have to deal with, but unfortunately, the more muted the colors become.

We find that a cell size of 50 to 100 for a 72 dpi web image is sufficient. (You might need a larger cell size if your photo is of high resolution.) It will give you a nice, deep color range, and yet few enough swatches to easily pick three to ten for your site's color scheme. If you liked the image in the first place, then any of these color swatches will go together and look great! Instant color scheme.

Using PhotoShop's Mozaic filter to generate a color scheme

Just pick up the eye dropper to select your favorite colors. Then double-click the foreground pallet and copy and paste the hex number into a text file.

Keep track of this text file! It will come in handy when you're developing your mock-up design in Photoshop, and later on when you're coding in HTML and CSS.

I recommend putting little notes or comments next to the hex colors in your text files describing the color and the types of things the color is intended for—button backgrounds, rollover highlights, border edges, and so on.

Color scheme text notes

CoffeeCup software (http://coffeecup.com) has a nifty color schemer tool. For those of you with the color theory background, this tool comes with a color wheel, color mixer, and a host of saturation, de-saturation, and other advanced tools which will provide no end to the mathematical permutations of color.

CoffeeCup Software's Colorschemer Photo Color Schemer option

We, however, prefer to use the Photo Color Schemer feature which lets us load in an eye-pleasing photo and choose 1 to 10 colors. The software's top two features include: 

  • Generation of the final list of your color schemes with hex, RGB, or even CMYK values,; saving some precious time in copying and pasting your initial color; scheme text file. 
  • It has a rudimentary Web Page Color Preview, which lets you drag-and-drop your swatches to; a basic web-page layout and get the gist of how the colors will work; best together, which we've found helpful in determining our color scheme's; order of importance.

Defining the Graphic Style

You'll find Joomla! to be an icon-oriented CMS. Keeping this in mind, selecting icons, or, deciding how you want to handle Joomla!'s standard features up front, will smoothen the rest of the design process as well.

We can offer you three suggestions on this front.

Invest in a good quality, royalty-free icon set which includes authoring files that you can modify as you wish (preferably, in a vector format). We like http://www.iconbuffet.com and http://stockicons.com, but a quick Google search will turn up many more. (Be sure you read the royalty-free agreement and have proper usage rights and rights to modify the icon set you purchase.)

  • Find your icons; at http://openclipart.org. Open Clip Art offers illustrations; in a native vector SVG format. They're easy to edit into your own creations; with a vector or image editor.
  • Don't use icons!; The built-in rhuk template, just uses standard grey; squares with the words—pdf, email, print, and so on in them. There's; no reason why you can't do the same.

If you don't have a vector editor such as Adobe Illustrator, Inkscape (http://inkscape.org) is a great open source SVG vector editor and what many artists who contribute to openclipart.org use.

The icons (or standard buttons) you choose, and the way you choose to treat them can be used as a guide for how to handle the rest of your template's elements.

Are your icons cartoony with bold lines? You'll then want to repeat that effect in other site elements, such as making sure navigation buttons or header backgrounds have their edges outlined. Are they somewhat photo realistic? Are they with drop shadows or reflections? Again, you'll want to think of ways to subtly repeat those elements throughout your site. This is a simple detail, but it brings a template design together, looking sharp and highly professional.

Again, we recommend you make a list and take notes during this process. If you apply a style to an icon and reuse it somewhere in your design, make a note of it so that you can reference it for future elements. For example: “All background header images, while being of different colors for different uses, get the 'iMac' highlight applied to them as used in the main icon set. Use custom action pallet “iMacMe” or, “All side elements have a bottom border with a color that fades up with a 90 degree gradient path.”

No matter how well you plan the layout in your mock-up phase, you may find later on (especially while coding) that there's an element you need to go back and design for. Having a style list for your elements will become an invaluable time saver. You'll have something to reference and won't waste time figuring out how the module element should be styled in relation to other similar elements or how you created a particular style effect.

Detail of rhuk_solarflare_ii template

Slice n' Dice

At this point, you know what modules you have to design, and you've thought about whether you're going to start from scratch or modify an existing template. You should have your color scheme and graphic styles defined and applied to your template's mock-up in an image file.

It's now time to start considering what parts of your mock-up get exported for the template and what parts are going to be all code.

If you're used to standard WYSIWYG or Photoshop Slice n' Dice design, you've got a little more to think about. You can't just slice your image up and export it with an HTML page. Joomla! templates don't work like that. Content is separate from layout. The majority of your images will need to be loaded using CSS.

You'll need to look at your design and start thinking in terms of what will be exported as a complete image, and what will be used as a background image. You'll probably find that your header image is the only thing that will be sliced whole. Many of your background images should be sliced so that their size is optimized for use as a repeated image.

If you notice that an image can repeat horizontally to get the same effect, then you'll only need to slice a small vertical area of the image. Same goes for noticing images that can repeat vertically. You'll only need to slice a small horizontal area of the image and set the CSS repeat rule to load in the image.

Detail rhuk_solarflare_ii slice samples

If you'd like more information on how to slice and work with background images, repeating and non-repeating for use with CSS, check out this article from adobe's site:


Your menu items will need to be exported as background images without graphic text. Joomla! generates the text for each link dynamically so it's best to style that text with CSS and have an eye-catching background image with one image that includes its rollover beneath it. Same goes for section headers, if you'd like them graphically highlighted, it's best to export a background image so that the dynamically generated html text can be displayed over the image.

Wellstyled.com has an excellent tutorial on how to use a single image technique to handle image background rollovers with CSS.

Now that you've placed the slices for each of your template image elements, export them using the smallest compression options available, and get ready to look at some code.

If you're working from an existing template and overwriting images, pull out that module check list and make sure that each slice is correctly named and assigned the same file type so it will overwrite the old template image.

Putting It All Together

At this point you should have the following:

  1. Module checklist—listing; all the elements your design will handle 
    • Image checklist—(if; you're going to leverage an existing template structure) list of all; image names, sizes, and what modules they belong to
  2. Color scheme hex; list—a list of your hex values for copying and pasting into your image; layout and code 
  3. Graphic-style notes—a; list of things you've done to your icons and standard ways to treat; repeating graphic elements 
  4. Full mock-up layout 
  5. Sliced and exported; images


In this article, we covered the key elements of a Joomla! template and what considerations to make when working with your mock up. We went over some basic techniques for image extraction and optimization as well as covered some tips and tricks to speed up the design process. You should now have your color scheme hex values defined and listed in a handy text file and your key image elements optimized and exported into their own images.

Joomla! Template DesignYou can continue to learn more about designing professional-quality Joomla! templates in the book Joomla! Template Design: Create your own professional-quality templates with this fast, friendly guide.

This well-crafted and easy-to-use book is a complete guide to creating Joomla! templates for your website. It guides you through setting up a basic workflow for Joomla! template design, debugging and validating the template code, creating drop-down menus, interactive forms, and dynamic forms for your site, and packaging up your finished template in a ZIP file for users.

For more information, please visit: www.PacktPub.com/Joomla-Template-Design-open-source-PHP-MySQL/book

About The Author

This article has been adapted from Chapter 2 from the book Joomla! Template Design: Create your own professional-quality templates with this fast, friendly guide by Tessa Blakeley Silver.

Tessa Blakeley Silver has her background in print design and traditional illustration. Over the years, she has evolved herself into the fields of web and multimedia development focusing on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that meet online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers). She was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.
Last Updated on Thursday, 04 June 2009 10:06
Your Cart is currently empty.

Latest Joomla & VirtueMart Tips

See all tips & examples

Identifying Key Elements for Joomla! Template Design|Joomla & VirtueMart Tips & How To's

Identifying Key Elements for Joomla! Template Design. This article is extracted from the Joomla! Template Design book.

template, color, image, design, joomla, site, module, modules, scheme, elements, use, work, text, css, rhuk, background, like, list, images, look, standard, layout, colors, templates, best, file, going, mock, graphic, http, position, solarflare, slice, hex, code, don, icons, style, slots, existing


We use cookies to improve our website and your experience when using it. Cookies used for the essential operation of the site have already been set.
To find out more about the cookies we use and how to delete them, see our privacy policy.

I accept cookies from this site.