There is one module that makes designing for Drupal 7 much, much easier: Theme Developer.

You can think of Theme Developer as a Drupal-specific version of Firebug or Chrome Developer Tools. Using Theme developer you can click on any element of your Drupal site and get a breakdown of how it was built.

Theme Developer has some downsides: it's not been updated in a while, and (like anything related to the Devel module) shouldn't be used on live sites. But, it can still be a useful tool for Drupal 7 themers.

• Install the Devel module, the simplehtmldom API module and the Theme Developer module. Be careful - you must use simplehtml API version 7.x-1.12.
• Go to Administer > Site Building > Modules. Enable all the modules you uploaded.

• In the bottom-left corner of the screen, you will see a small "Themer Info" area:

• Check this box:

• Up in the top-right corner of the site you'll see a larger black box:

• The bar does a pretty good job of explaining what to do! Just like Firebug, or Chrome Dev Tools, you can inspect areas of your Drupal site.

• Here's what happens when you click on a page element: you'll see a red box around that particular element.

• The theme developer box will now show information about your chosen page element:

Here are some of the details you'll see:

• Template called: the name of the file which is controlling the layout of this element
• File used: the location of the file controlling the layout
• Candidate template files: if you'd like to create an override for this part of the page, these are suggested file names.
• Preprocess functions: These functions connect what happens in the module code to what gets sent to the theme

If you want to use the candidate template files, easiest thing to do is copy the "Template called" file, rename it and save it in your template folder. This is what the files mentioned in this example would do:

• block-user-1.tpl.php ... if you create this file, it will only provide a template for this particular block
• block-user.tpl.php ... if you create this file, it will only provide a template for this user blocks
• block-left.tpl.php ... if you create this file, it will only provide a template for blocks in the left div.
• block.tpl.php ...if you create this file, it will provide a template for all blocks

This video offers a great explanation of the Theme Developer module:

{wistia}d1i8fayk3x{/wistia}