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

/civicrm/admin/setting/url&reset=1

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:

• focus on providing an attractive and usable default look and feel "out of the box"
• CSS classes should be used to contextualize elements such that developers have the ability to easily override the design provided
• elements (such as radio buttons with an error) should be easily targeted based both on "type" (for example, "auto-suggest-box") and specific field name (for example "qa_first_name")
• relevant classes should be posted as far up the DOM as possible while staying relevant (e.g. "error" classes for a form field should be attached to an element that wraps both the field and it's label)

For the meantime here are a few quick tricks to make CSS theming easier:
almost everything that comes from CiviCRM (excluding blocks) is wrapped in a div with id="crm-container", so you can easily (and safely) override anything in your site's theme. An example would be if you wanted to override the display of H2 elements inside of CiviCRM to make them red, without affecting non-civicrm H2s. This could be accomplished:

SmartyDebug is your friend!

To view lots of really useful template variables go to

/civicrm/admin/setting/debug&reset=1

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.