Creating a Drupal theme

posted by Ishmael Sanchez on Jan 08, 2010

Sometimes an existing Drupal theme just will not do. Or possibly you might have a designer that has PSD or InDesign file of exactly how you want your site to look. At this point you could try to find an existing theme that mostly works and just tear apart the CSS and HTML and customize it until you get the look you want. Or you could create a sub-theme from a starter theme like Zen or Genesis and start creating the refining the HTML and CSS to match your design.

There is nothing wrong with either of the approaches I mentioned above, and I have built sites using both methods (although for maintenance purposes sub-themes are preferred). Recently though, I want more control over my themes. So I have created a couple custom themes and thought I would share my process for doing this.

  1. Develop a design file (Or have someone do it for you)
  2. Convert the design file into pure HTML and CSS
  3. Create the theme folder, info file, and other basic assets
  4. Modify the HTML and convert into template files (page.tpl.php, node.tpl.php, block.tpl.php, etc)
  5. Customize output by overriding theme functions (template.php)
  6. Add any custom variables (template.php)
  7. Refine HTML and CSS (Don't forget about styling the admin pages)

Resources

Post new comment

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.

Ishmael Sanchez