I’ve done some theme customization for Drupal, and I’ve used drupal as “just a user” for years. Recently, I took on a project to take a designer’s theme and make it work with Drupal. I’m pleased to say that, minus a couple of little quirks, it’s been relatively simple. Here are a couple of tips for those starting out:
- Use CSS for the main layout. If you must use tables for some small part to get it just right, fine — but the high-level layout should be CSS. There are a million reasons for doing this that have nothing to do with drupal, but in addition, the way drupal manages the pieces that it manages (like menus and blocks created in the admin interface) encourages CSS use.
- Don’t hard code anything that you don’t have to. Use the ‘base_path()’ and ‘path_to_theme()’ functions in page.tpl.php so that if you decide to base another theme off of this one by making a copy of the theme directory, it’ll ‘just work’, instead of having to go through and change every reference to every ‘img src’ in all of your files.
- Get to know Drupal. You might be thinking you have a div that’s being hidden or isn’t showing up at all. In reality, it might be that you have a drupal block that your current login has no permissions to use, or a menu item that doesn’t apply to the current login, in which case it won’t show up in the menu listing. Also, you might have drupal’s caching enabled, which it shouldn’t be if you’re building a theme or doing development in general. To turn off caching, go to Admin->Site Configuration->Performance, disable caching, and then click on the ‘clear cache’ button.
- Also under ‘get to know drupal’: depending on where your images are referenced, you need to use different paths. So, if your images are all in a directory under your theme dir called ‘images’, then images referenced in page.tpl.php need to be relative to the drupal top-level directory (so, ‘/sites/all/themes/<theme>/images/<imgfile>’). But in styles.css, you can use a directory relative to the styles.css file (so, ‘/images/<imgfile>’). I’m not 100% sure what the difference is, but presumably page.tpl.php gets ‘include’d into the main PHPTemplate theme engine code, which is somewhere else under the drupal top-level dir, which is why you need the full path. Correct me or clarify this in the comments if you know for sure.
- Try to make time to learn about the Advanced Theme Creation Kit and/or Zen, which might make theme creation much simpler and faster. I did mine from scratch, and it’s ok, but if I had the time I’d rather learn to make use of these tools.
- Pick up Drupal 6 Themes from Packt Publishing. It’s a great resource for learning this stuff, in spite of the absolutely awful code formatting in places, and some minor-but-annoying errors. Get it anyway. The conceptual parts of the text are fantastic, and the errors aren’t insurmountable. You can download a PDF eBook (with copy/paste enabled!) at the Packt website.
- Use the CSS reference at w3schools.
Some general development practices can’t hurt either. Use some kind of version control for your theme, like SVN, CVS, Mercurial, Bazaar, git, or whatever. This will make it easy to revert to earlier copies of your work if you blow things up, and if you can host the SVN service somewhere that’s not on your development machine, it can also serve as a backup (though you should be backing up your machines anyway).
If you have other tips, leave a comment!