(by 3 people)
This is a brief walkthrough on how to design a Joomla template without dreamweaver using Cascading Style Sheets (CSS). With CSS based templates, its very easy to get make a templates compared to designing with tables.
CSS based pages are really easy to use with CMSs though, and very versatile and more consistant stylistically. A good example of how versatile CSS can make a page, take a look at CSS Zen Garden.
The first step is to get an idea of what you want your site to look like. Do you want more than one column for your data? Do you want sidebars? a big header? footer?
All of the basic layouts, compatible with all the major browsers can be found at Dynamic Drive's CSS library.
These layouts are plain however. A great place to get CSS ideas from is eConsultant's CSS layouts list. They give you the CSS files you can start with to model your page and adjust to get exactly the look you want. A couple of my favorites are Layout Gala and MaxDesign which has very strightforward code, plaintext, has nice clean layouts you can use right away. Some of the sites like Ruthsarian Layouts are great places to learn what CSS can do when its really pushed, but the CSS files can be multilayered and complicated, so make sure you look at the css files behind your layout before you choose.
There are also lists on eConsultant for CSS popup menus, CSS tutorials and ajax tips if you want to go there.
Unfortunately at this time Squidoo does not allow me to actually portray PHP code on its webpages. This is a real problem to those making lenses on web technologies. so this is more of a resource page than a how to.
A good overview on making a table based template can be found on wikibooks.
Install Joomla
(1) to install Joomla on a website, and up load the files there, or
(2) if you are developing in a Windows system, you can use the Joomla Stand Alone Server (JSAS).
JSAS can be downloaded from http://jsas.joomlasolutions.com/, it installs with a double click.
- Webserver: Joomla requires access to a webserver with Apache, MySQL and PHP4 or better.
You can get an account to host a Joomla site for just a few dollars a month. This lens can help you pick one http://www.squidoo.com/isp/ - Download and install Joomla from Joomla's Home
Make sure you download the latest version (1.0.8 Full Stable version) - upload the zip file to your website and extract the folder in your www directory, rename the new folder to 'joomla'.
- Create a mysql database - how you do this will vary with your ISP, but the control panel will usually walk through this.
- point your browser to your new site http://www.mysite.com/joomla/index.php
The page will walk you through the 3 or 4 steps you need to do to get this working.
The Joomla Template
Under the MyTemplate directory, its a good idea to make at least two directories
* image/
* css/
These directories are only for files used specifically for your template.
Its good to have a directory for all css files you may use for your template, but not necessary. Its very likely that your template will need its own images, and more than one, so the image directory just helps keep things tidy, but its not necessary either.
You will have at least three files that make up your template:
* MyTemplate/index.php
* MyTemplate/css/site.css
* MyTemplate/template.xml
this page will briefly describe these files and what to do with them.
index.php is your actual webpage,
site.css is the css for your template
template.xml is read by joomla. this file tells joomla enough information to validate your template and make it available to the cms software.
The Anatomy of a Joomla Template
* Banner - often the top of the page, but it contains the site name and other first impression information.
* User1
* User2
* Main Body - this is where joomla puts all your stories.
* Left
* Right
* Footer
Options - you don't have to have them but they are useful.
* Search Box - joomla will run its own search index on your site
* Breadcrumbs(Pathway) - e.g. Home > Housewares > Kitchen > Hand Mixers
* Date - today's date
index,php
The webpage template is easy!
I'm having problems -squidoo won't let me put actualy php code on their site. this really hampers the usability for IT stuff.
the PHP Header
Banner
User1
User2
Main Body
Left
Right
Footer
Options:
Search Box
Breadcrumbs(Pathway)
Date
template.xml
um.. you'll need to have this information ready for when you make your template.xml file. Just imagine the XML tags.
Template Name: Myfirst
Date created: 16/04/2005
Author: Your name
License for distribution: GPL
Author Email: mail@something.com
Your URL: www.yourhomepage.com
Version: 1.0
Description: A little description.
Main Page name: index.php
Your thumbnail image name: template_thumbnail.png
Site Header image: images/image.gif
Template CSS file: css/template_css.css
CSS vs table based templates
just put the joomla php calls into each separate div.
the layout is completely based in the CSS then.
Go to http://www.csszengarden.com/ for an illustration of how imaginative application of CSS can change the same html page.
For a nice tutorial on using tables for a joomla template go to:http://www.mambosolutions.com/dw_tutorial/
Finishing your Template
finishing up your install.
Take a screenshot and crop it down in photoshop, you can save the file as a small png (150 x 100 pixel) and put it in the myfirsttemplate directory.
Or you can go to http://www.webshotspro.com/ - enter your url and come back the next day and get your thumbnail all made up for you.
Then make sure you add the thumbnail to the templateDetails.xml file.
Joomla Links
The Joomla and Mambo CMSes
Joomla forked from the Mambo CMS project in August 2005 and has become one of the most popular of the open source CMSs in the world since.
Joomla has been compatible with Mambo up to this point and there is a wide community of developers that have contributed modules and templates. In the summer of 2006 Joomla 1.5 will be coming out - it will be a substantial rewrite and you will have to reinstall from scratch. At this point it doesnt seem like 1.5 will affect template compatibility.
- The Joomla Project Home
- Download and install Joomla from here. You will need a webserver with PHP and a MySQL database. You will not need anything more than a control panel to do the install.
- CMS Matrix
- CMS Matrix allows you compare Joomla to over a hundred other CMSs available.
- OpenSourceCMS
- This awesome site lets you actually try most of the CMSs available including Joomla and Mambo. This link takes you to the Joomla install.
You can add or modify content and toodle around the administration page. The site resets every couple of hours to give a fresh install. - Joomla templates with Dreamweaver MX and MSAS
- JSAS/MSAS (Joomla/Mambo Stand Alone Server) is a CMS install on your laptop that useful for designing Joomla templates. This page is a tutorial for designing a template using MSAS with dreamweaver MX.
- Creatiing Mambo table based templates
- CSS has many advantages for templating, but this is a good guide to making Joomla Templates using HTML tables.
- Joomla documentation
- describes all the sections in Joomla
- The Thyme Calendar Plug In for Joomla
- Thyme is the only calendar that says it will integrate to Joomla/Mambo.
the only two books on Joomla and some Mambo Books
Building Websites with Joomla!
A step by step walkthrough about setting up a Joomla site, ending with a discussion of plug ins. Not a power user book, but helps you get started. Based on the Mambo book below.
Amazon Price: $40.49 (as of 11/22/2008) 
Building Websites With Mambo : A fast paced introductory tutorial
Amazon Price: $39.99 (as of 11/22/2008)
The Definitive Guide to Joomla
This book is promising, but has not yet been released.
Amazon Price: (as of 11/22/2008)
Mastering Mambo: E-Commerce, Templates, Module Development, SEO, Security, and Performance
The power user book for Mambo covering e commerce, internationalization, and setting up discussion forums. Some of the tips may not work well for Joomla after 1.5 comes out in the summer of 2006
Amazon Price: $35.99 (as of 11/22/2008)
