|Developer Documentation Overview / Developing Custom Themes|
Use these best practices for your custom Freemarker and Soy themes.
Think about your changes in terms of the UI regions they'll touch, then plan your themes as groups of templates corresponding to those UI regions. Also, make a list of the theme files you'll want to customize for each theme. Note that this could be different custom versions of the same file for different themes.
Use browser-based tools such as the Firefox Web Developer and Firebug plugins for the Firefox web browser. These tools are useful for figuring out which CSS classes you should edit to change a particular part of the UI. Here's a shot of Firebug displaying HTML markup and CSS style corresponding to a blog post title. Use the Admin Console to create and save your templates, but edit them with your own editor (preferably one that features syntax coloring). The Admin Console provides a way to edit these files, but it's pretty basic. After you save templates, you'll find them at a path like the following: