There is one module that makes designing for Drupal much, much easier. That is the Theme Developer module. It allows you to click on almost any part of your site and see precise details on how it is built.
To get it working, we need two modules: the Devel module and the Theme Developer module. To get started, download both of them and upload them to your /sites/all/modules/ folder.
Upload and Enable the Modules

Go to Administer >> Site Building >> Modules >> check all 5 Devel boxes and click "Save configuration".

Go to the front of your site and look in the bottom-left hand corner. You'll see a black box called "Themer Info". Check that box.

Up in the top-right corner of the site you'll see a larger black box. It does a pretty good job of explaining what to to!
Examine Your Site

Hover over any part of your site and you'll see a red box around that particular element.

1) Template called: the name of the file which is controlling the layout of this element
2) FIle used: the location of the file in #1
3) Candidate template files: if you'd like to create an override for this part of the page, these are suggested file names. The easiest thing to do is copy the file in #2, renaming it and saving 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
4) Preprocess functions: These functions connect what happens in the module code to what gets sent to the theme
Drupal Theme Developer Module
This video comes courtesy of Moshe Weitzman.
Read more: http://www.ostraining.com/newsletters/drupal/using-the-drupal-theme-developer-module/
Using the Drupal Theme Developer Module






