This section covers topics related to Theming CiviCRM.
Setting up custom template directories
You can set custom paths for your resource (CSS etc..) files at
You can set a custom template path (for altering CiviCRM templates to your purposes) at
/civicrm/admin/setting/path&reset=1 (here you might set the "Custom Templates" field to path_to_your_installation/my_templates)
After setting a custom template path, you will want to look into the folder
/civicrm/templates/CRM - this is the default folder for all CiviCRM templates.
When you create the my_templates folder for your custom templates, the first thing you will want to do is put a folder called "CRM" inside of it. CiviCRM only finds templates in the custom templates directory if you follow the exact file structure inside CiviCRM's own templates directory (which always contains the "CRM" directory).
Principles of CiviCRM CSS
CiviCRM has a very active group of developers working to make the CiviCRM default templates as easily themeable as possible using CSS only (think http://www.csszengarden.com/)
Many of the ideas for these came from this post http://civicrm.org/node/642
Briefly, they are:
For the meantime here are a few quick tricks to make CSS theming easier:
SmartyDebug is your friend!
To view lots of really useful template variables go to
and turn debugging on (only for development/staging sites!)
adding "&smartyDebug=1" to the end of the URL when you are on a CiviCRM page will popup a SmartyDebug window with many CiviCRM variables and templating information.