What are your choices when looking for a Joomla Template Maker? Are you a subscriber to Joomla template clubs, but are looking for a way to produce Joomla templates yourself? Are you getting requests to build templates from a designer's Photoshop file? Well there is good news. You have options.
Artisteer has created very cool tool to build Joomla templates. (as well as Wordpress, Drupal, DotNetNuke, and Blogger). Plus you do not need to use Photoshop or Dreamweaver (but it helps). This tool can be used by anyone. You don't need a lick of programming or template development knowledge. The templates are yours, you own the design. The only caveat is that you can not sell the templates if you include Artisteer photo objects within your header (Header -> Foreground Photo), as those photos are licensed from a third party for your own use or in your consulting work. You must use your own images if you decide to sell templates produced with Artisteer.
Artisteer offers "suggested" designs so you can easily just slide through different layouts, backgrounds, headers, color schemes, widths, fonts, etc. Any novice could easily produce a template using the built in design assets (images, layouts, etc) and export it as a Joomla 1.5 template zip file. It installs exactly like a commercial template with the Joomla installer.
But this is not how we use it. We never use Artisteer's suggested pre-canned templates or images. We manually define every design from scratch. But we decided to build some baseline standard templates as a starting point so we can quickly modify them for the intended project. Artisteer gives you amazing parameter control over every area of a template like headers, menus, modules etc. Honestly, we tend to build simple, fast, Web 2.0 style templates with the tool. Here is a Joomla Youth Association Website that we built using Artisteer.
The templates have done very well with SEO. They natively support SEF plugins, have nice support of "H" tags and have pretty good code. The CSS files are faiirly large and could be optimized. We own Artisteer and we use it every week.
Another request that we get often is to take a template design, usually built in Photoshop or Fireworks, and convert that to XHTML and CSS. This type of Joomla template making is really the best for native Joomla! 1.5 templates, especially if you have a particular design in mind or have already hired a designer to create your look and feel.
The first step we take is to convert a Photoshop PSD file into a Joomla! template, is take a good look at the design and export all the layers as single images. We do it in a way that we know we will be able to incorporate into our CSS file to be the most file size effecient, as well as make our coding job easier.
It's important to choose correct export formats as well. The most commonly used file format for image slices are either PNG or GIF. GIF files are generally a good format, but if you have a lot of colors in a single slice, because GIF only supports up to 256 colors, then you should use a 24-bit PNG (8-bit PNGs are also 256 colors only). Both formats support transparency which makes them partcularly flexible.
Once all the slices of your design are saved as single images, you need to look at your design as merely a set of blocks inside of other blocks. These blocks in coding language are divs. The most common way to begin building the actual layout is to fire up Dreamweaver or some other code editor application and create an index.php file and a template.css file.
Getting back to the blocks, you'll need a single block that contains your entire site. This is commonly referred to as the "wrapper" or "container" div. All your other divs will go inside of this div. Following a pretty generic header, horizontal menu, 3 column, footer layout, you'll then put in a single block to represent the header position. When thinking of Joomla!, you might create a few more div blocks to hold a module position or two. That is entirely up to you.
Menuing is often a difficult part of the coding process. For beginners, the best way to deal with the CSS part of the coding a Joomla! menu is to install a Joomla! extension, such as SwMenuFree, to handle the creation and implementation of the CSS in a very user-friendly way. We don't always use this tool, but it is certainly the easiest method to building a menu into your template. So, simply add another block (div) under the footer for module position which will contain your Joomla! menu.
The trickiest part of Joomla! development is collapsable module columns and positions. This is done using a PHP "IF" statement. The statement checks with the Joomla! API to see if there is a module currently published, if the response is "true", then you will load, for example, a left column. Then the middle, content area, and then do another check to see if there is a right column to be loaded as well.
The final step would be a block to represent your footer. Of course, you will have to continue to write div statements and matching CSS to define heights, widths, position settings etc...for your template to come together.
Most people familar with coding to some extent are also familar with "proper" coding techniques. That is, code validation. Validating your code is important as it helps to ensure your code will operate in a standards compliant browser (although, with IE, all bets are off). The problem with validating a Joomla! template is that often, it's not the template, but content, plugins, components, or modules, that have invalid code that will invalidate your template. The best solution here is to validate your PHP and CSS files as files, and not by passing a code validator the URL to your Joomla! site. This way you can check to make sure your template is valid, but the validation process isn't effected by badly coded extensions.
This is a general workflow of template production in the Joomla! environment. There are many resources on developing a Joomla! template from scratch. Click here for a Joomla tutorial. Keep in mind that Joomla! template development is just like regular XHTML and CSS website development, except instead of embedding content you embed Joomla! API calls.
