Questions on Theming: Build your own or use an existing theme?

Congratulations on your initial success with drupal!!

It's of course up to your client whether they want to use a stock theme (one of the many free ones from http://drupal.org/project/themes, or a purchased one from http://www.topnotchthemes.com/ or another company that sells inexpensive themes) or have a custom theme. The projects that I usually work on involve creation of a custom theme, and I suspect that is true for most sites that one would label as "professional", in that if a company or organization is going to put a non-trivial amount of funding into their website, then one of the things they're likely to want is for their website to have a unique, branded, look-and-feel. However, if your client doesn't need a unique, branded, look-and-feel, there's no reason you can't use a stock theme and still create a high-quality website.

The Zen theme is specifically designed as a base-theme for the professional designer/developer to use when creating a custom theme. The recommended approach for doing this is to place the "zen" folder in the sites/all/themes directory, not modify anything in this folder, pick a name for your about to be created custom theme (I'll unimaginatively use the name "foo" in this example), create a folder for your about to be created custom theme (e.g., "sites/all/themes/foo" or "sites/default/themes/foo" or "sites/[your_domain_name]/themes/foo"), copy the files within "sites/all/themes/zen/STARTERKIT/" into your "foo" folder, and proceed to customize within that folder only. This is detailed out more fully within "zen/README.txt".

The reasons for this approach:

1) Best practice is to never put anything into drupal's root folder (except into the "sites" folder) other than the files you unpack when downloading core drupal. This lets you upgrade minor drupal versions (for example, from 6.11 to 6.12, from 6.12 to 6.13 when it comes out) most easily -- the new drupal version can simply replace the old, with the exception of the "sites" folder.

2) The "sites/all" folder is specifically there for placing contributed projects (e.g., modules like "views", and themes like "zen") that are not part of core drupal.

3) Not modifying anything within the "sites/all/themes/zen" folder means you can upgrade to newer versions of zen when they become available.

4) Whether you want to place your custom theme ("foo") into "sites/all/themes/", "sites/default/themes/", or "sites/[your_domain_name]/themes/" is a matter of preference. "sites/all" makes sense if it's a theme you plan to re-use across more than one site or contribute to drupal.org. If it's really a custom theme only for the one website you're making, then placing it in either "sites/default", or "sites/[your_domain_name]" (whichever is the one that contains the "settings.php" file for your website), helps keep the "sites/all" folder less cluttered with code that is only meaningful for a single website. The organizational system you use especially comes into play if you're managing multiple websites with a shared drupal code-base.

5) By making "foo" a sub-theme of "zen", you only need to copy files into "foo" that you want to be different than what's in "zen/zen". If, for example, you don't need "block.tpl.php" or "block-editing.css" to be any different in your custom theme than zen's implementation, then you don't need these files within "foo". This lets you keep your "foo" folder cleaner, and only containing code that makes your theme unique. It also means that if you upgrade to a newer version of zen, you get the benefit of any changes made to files that you haven't overriden within "foo". This is usually a good thing, although in some cases, can also be annoying if you weren't expecting an upgrade to "zen" to cause any visible changes to your theme.

Anyway, I highly encourage this method for creating a custom theme. You could, of course, create a custom theme entirely from scratch, or as a sub-theme of a different theme, but I think it makes sense to only do one of those if there's a compelling reason. The drupal community is clearly gravitating towards using zen as the standard base theme, which is evidenced by its usage page.

There are a couple starter themes on the Drupal themes page. The one I am currently using is Framework. In the past I had just customized a lot of the existing themes, but this can be just as time consuming as building from a simple template like Framework. I have also converted a static HTML document into a Drupal theme and it turned out pretty good and wasn't too difficult. I am not so familiar with PHP, so I used snippets of code from different themes to get the dynamic portions working. Here's a great article on creating your own themes from scratch. http://www.gomediazine.com/tutorials/create-a-killer-band-site-with-drup...

I would recommend starting fresh -

Here is my normal workflow:

I always keep the Garland (default theme) - I often times delete the other themes (make sure not to delete theme "engine" folder) to keep things super simple.

• build a mock up of my site design in Photoshop or Illustrator
• re-create your design in normal XHTML and CSS
• start with a simple "tmp_page.html" - keep all images in a "/images" subfolder and all your CSS in a "style.css" page
• create a directory for your new theme in "sites/all/themes/"
• add your "tmp_page.html", "/images" and "style.css" to the new theme directory
• double check your tmp page in all browsers (its a long url ex: http://mysite.com/sites/all/themes/mytheme/tmp_page.html"
• When you are committed to this tmp page code - its time to add the Drupal
  <?php
snippets
?>
  that inject the Drupal functions into your theme
• Add the most common ones first (you can look at the Garland theme "page.tpl.php"
• Main sections are (HTML Doc and Type Header, Menu, Sidebar Left, Sidebar Right, Content, Footer and most importantly "Closure"
• At minimum you need to have template.php, page.tpl.php, node.tpl.php - you can borrow code straight from Graland theme (with some slight modifications) to help get you up and running.
• Later you might want to customize: block.tpl.php, comment.tpl.php - maybe some different node types: node-ADDTYPEHERE.tpl.php
• Head back to themes - Activate your new theme
• Hopefully all worked out - or at least gives you a good starting point - from here - you fine tune - getting rid of things you don't need - adding things you do need.

What takes me the longest is not actually the Themeing - but the design in Photoshop and converting that to usable XHTML and CSS (especially x-browser testing)

• enjoy the new site.

I started with a fairly simple theme that was already created and I made changes to it. I changed sizes, colors, etc. I also add in all the items that I regularly use.

Once I was done, I had a base theme that can be used to create just about any theme.

I found it was faster to do it that way, plus it means I don't miss any classes/ids that are important to the look of the site.

Jenni Simonis
http://www.forwardsupport.com