Using the Drupal Theme Developer Module

Using the Drupal Theme Developer Module

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.

drupal theme developer modules

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

bar drupal theme developer

  • Check this box:
tutuploadsmedia_1283459212897.png

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

editing bar drupal theme developer

  • 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.
tutuploadsmedia_1283459279286.png
  • Here’s what happens when you click on a page element: you’ll see a red box around that particular element.
using drupal theme developer
  • The theme developer box will now show information about your chosen page element:
tutuploadsmedia_1283459617210.png

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

Author

  • Robbie Adair

    Robbie started her career in corporate training until starting her own custom training and media company almost seventeen years ago. In 2010, she began doing classroom training for OSTraining while running Media A-Team. She is often presenting about various tech topics such as Joomla, Fabrik, Web Development, Social Media, and Augmented Reality. She loves seeing that "ah-ha" moment in peoples eyes in her sessions and workshops. She lives in Houston, Texas, but enjoys all the travel for client work and speaking gigs.

0 0 votes
Article Rating
Subscribe
Notify of
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments
Drupal Developers
Drupal Developers
13 years ago

ya i have already use this one.. its much usefull to drupal theme developer, you given nice explaination.. thankyou very much..

1
0
Would love your thoughts, please comment.x
()
x