Luckily for us, Drupal is a well organized framework and provides template files on the level of fields, nodes, pages, as well as modules and others. This way you can override only the parts you need and benefit from all the default standards compliant output Drupal provides.
To delve deeper into tailoring website themes in Drupal 7 please check the elaborate Theming Drupal 7 Guide on their official website.
In this post, we cover a simple tip for Drupal theme developers to help them discover which theme files they can create in their custom theme template.
Template suggestions are alternate templates based on existing .tpl.php files. These suggestions can be used when a specified condition is met and the suggested template exists.
For example, if you create a file named page.tpl.php and place it into your theme's templates folder, Drupal will use that file instead of its default one for all pages. If you create a file named page--front.tpl.php now Drupal will use that page template for the home page specifically and the previous one for all the other pages.
You can see how powerful and well organized the system is. The only thing that remains is discovering how you can tell which template file names (suggestions) are available. Read on.
As of Drupal 7.33 we have a theme debug mode available in core. This mode can be used to see possible template suggestions and the locations of template files right in your HTML code as HTML comments.
To enable debug mode, open your settings file in "/sites/default/settings.php" and append the below line to it. Keep in mind that you might need to make this file writable beforehand. Do also make sure to remove or comment out this flag once you're done debugging.
$conf['theme_debug'] = TRUE;
Below is a sample debug output you can see after the website renders. It basically lists all the template suggestions from the most specific to the least specific and marks with an "x" the one that was chosen to render this specific field for example. We recommend using the "inspect element" functionality in your browser's developer tools on the element you need to theme. You'll find the debug output section written on top of your element.
<!-- THEME DEBUG --> <!-- CALL: theme('field') --> <!-- FILE NAME SUGGESTIONS: * field--field-image--slide.tpl.php * field--slide.tpl.php x field--field-image.tpl.php * field--image.tpl.php * field.tpl.php -->
Founder of SOFTKUBE, lead developer, and getting things done addict. Passionate about open source, user interface design, business development, and the tech world.
A small team of experts developing simple, usable, and high-quality web solutions. We blog about business, entrepreneurship, web development, and technology.