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.
In this chapter, 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.
We’ll be working with Adobe Photoshop, but most of these techniques can be used in any image editor that has some standard filters, lets you work with layers, and create “slices” for easy image export.
Note
If you’re on a budget and in need of a good image editor with slicing options, we recommend you use GIMP with the add-on Perlotine filter. There are a couple add-on filters for GIMP that export image slices, but the Perlotine filter has worked the best for me in the past. GIMP is free, Open Source and available for all operating systems. Get it from http://gimp.org/. You’ll find the Perlotine add-on here: http://registry.gimp.org/list?name=perlotine
In Chapter 1 we reviewed a high-level overview of what templates consist of and what the Joomla! CMS application produces at run time (when it loads the site with the page data into the template). We’ll now look a little deeper into how those parts work together so that you can start making decisions about your template’s design.
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 when you create your visual design.
First, let’s look at the following figure to see how our basic template affects the Joomla! PHP output:
Figure 2.1 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 you would like to 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.
Figure 2.2 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.
Figure 2.3 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.
Figure 2.4 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.
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.
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.
Figure 2.5 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.
Figure 2.6 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.
Figure 2.7 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! Administration 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 templates Joomla! 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 “massage” it into any new creation you can imagine.
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.
Note
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’ experience of 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.
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 peruse 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 in a pinch, but you’ll probably want an image a bit bigger than the thumbnail. 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.
Figure 2.8 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.
Figure 2.9 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 fun.
Figure 2.10 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.
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 smooth 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
rhuktemplate, 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.
Note
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 later on find (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.
Figure 2.11 Detail of rhuk_solarflare_ii template
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.
Figure 2.12 Detail rhuk_solarflare_ii slice samples
Note
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:
http://www.adobe.com/devnet/dreamweaver/articles/css_bgimages.html
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.
Note
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.
At this point you should have the following:
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
Color scheme hex list— a list of your hex values for copying and pasting into your image layout and code
Graphic-style notes— a list of things you’ve done to your icons and standard ways to treat repeating graphic elements
Full mock-up layout
Sliced and exported images
In this chapter, 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. We’re now ready to take on our template. Let’s get coding!