RESOURCES: Template and css tutorials

User avatar
Joomla! Explorer
Joomla! Explorer
Posts: 300
Joined: Wed Aug 17, 2005 10:12 pm
Location: Denmark

RESOURCES: Template and css tutorials

Post by Joomlawebber » Mon Feb 06, 2006 3:00 pm

This list has been made thanks to the input of the community.
The purpose of this list is to give Joomla users a place to find template and css tutorials.
This will help current users to be more successful, new users to get started faster, and potential users to better evaluate Joomla.

Template Tutorials

DW Tutorial
Currently this template tutorial is for the current release ( mambo 4.5.2 ) and will be updated accordingly( plans to do a div only (tableless) version next)
In this guide, we will be creating a 100% width 'autostretch' 3 column table layout. This will introduce you to the directory structure of a template, includes all copy/paste code snips for including the mambo specific elements in the template (module positions, mainbody, pathway, etc)

I also give specific instruction to use my dreamweaver template extension, but also you can optionally use the FREE plugin for HTML Kit, which is does the same job. Links are to be found in the tutorial.

Template Creation
Great template tutorial from Ben at ... ation.html

Template overwiew from Absalom Media
A tutorial on how to cut up a 2 column Photoshop template and arrange it, using semantic CSS design principles, into a template: ... orial.html

Template explained ... explained/

Making a 3 column Joomla Theme for your joomla website
Another great tutorial from Compassdesigns ... omlatheme/

Joomla template explained step by step
As part of the Official Joomla Documentation program, Compass Design has developed a 54 page Joomla Template Tutorial: ... -tutorial/. As well as at the official Joomla Dev site ( it is also available in various formats, Word, PDF and HTML. This tutorial takes you through the steps of making a tableless Joomla template using CSS developed by Dan Cedarholm.

Css Tutorials

Css tutorial from Ben at ... rview.html

Css tutorial from Lady-Beetle
Great css overwiev made in flash ... temid,253/

Css tutorial from Absalom Media ... orial.html

Css tutorial in german

CSS cross-reference by referencing file ... 9&Itemid=2

Mambo/Joomla CSS Quick Referenece

A Blank Template CSS file for Joomla
Another tutorial from Compassdesigns ... mplatecss/

Favico.ico Maker

How to display your web site logo on the address bar and in the favorites list
Last edited by Tonie on Fri Sep 28, 2007 7:09 pm, edited 1 time in total.
If there is a bird flue, what happened to the egg flue?


Return to “Tips & Tricks - Moving”