Here's what I know about developing Templates for Joomla. You do not need to install a custom template to skin your Joomla website. I am so sick of hearing from friends and foes of Joomla alike "All Joomla Websites Look the Same." It's a lie! Check out www.joespub.com and www.simplesteps.org. Other than the 3 column layout (which isn't forced by Joomla), they don't have much in common. The presentation layer (what you see) and the application logic  (how Joomla websites work) are separate.

To create a Joomla site using any custom design, here's what I know about template development.

How To Get Started:

• Always start with a photoshop file that's 900-950 pixels wide by 500-900 pixels high that portrays exactly how you want your interface to look, down to the content. 
• Submit it to a company like psd2html.com, which I highly recommend, to have it cut into XHTML/CSS ("tabless div code" -- very chic) (they will call your stylesheet "all" remember to change it to "template_css.css for help Joomla)
• Learn enough about Joomla position tags and Joomla template construction (covered below) to construct , FTP and apply your Joomla template to all or some of your pages.  

Bare Necessities:

• A directory of any name FTPed to the /templates/ folder on your server.
• An index.php that constains your HTML + Joomla position tags
• templateDetails.xml file that contains your template name and instructions.

There may be "serious" Joomla developers out there that tell you that your templateDetails.xml needs to reference every image and related file in your template set up. To get started, I generally just use the rhuk_solarflare_II file and change:

<name> rhuk_solarflare_ii </name>
<creationDate> 10/20/05 </creationDate>
<author> rhuk </author>
<copyright>GNU/GPL</copyright>
<authorEmail> This e-mail address is being protected from spam bots, you need JavaScript enabled to view it </authorEmail> <authorUrl>http://www.rockettheme.com</authorUrl>

Recommended Template Development Set-up:

• /templates/yourtemplate/index.php - your "XHTML" or HTML or whatever your layout flavor is. You can store Javacript, Flash ... whatever you want in here, along side your Joomla position tags. Position tag syntax is <?php mosLoadModules( 'user1' ); ?> where 'user1' = any position name Joomla gives or you create.
• /templates/yourtemplate/templateDetails.xml - Instructions for Joomla. Just copy the one rhuk_solarflare_ii gives you and modify it.
• /templates/yourtemplate/images/ - all of the images that your index.php references.
• /templates/yourtemplate/css/template_css.css <- be sure to name it that. Some Joomla extensions make use of it.

Comments (0)