Skip to main content
  • X Twitter
  • youtube
Home
Drupal 4U
Built for AI. Powered by Drupal.
  • Home
  • Showcases
  • Services
  • Blog
  • About
  • Contact

Breadcrumb

  1. Home
  2. Tips and Tricks
  3. Understand the elements of a theme

Understand the elements of a theme

Tips and Tricks
May 26, 2013
Profile picture for user drupal
By drupal
  • facebook-f
  • twitter
  • envelope
  • print
19

There are hundreds of themes available for free download on the Drupal website. Being able to modify a theme to suite your needs, it is essential to understand their basic elements:

A theme is made up of these major parts:

.info (required)

All that is required for Drupal to see your theme is a ".info" file. Should the theme require them, meta data, style sheets, JavaScripts, block regions and more can be defined here. Everything else is optional. The internal name of the theme is also derived from this file. For example, if it is named "drop.info", then Drupal will see the name of the theme as "drop". Drupal 5 and below used the name of the enclosing folder of the theme.

.css files

All custom CSS for the theme. Sometimes there is only one .css file often called style.css. But there are also many themes that have some or even many .css files for various spheres of the theme. To avoid problems with updates it makes sense to use a specific .css file to make the modifications to the standard .css coding of a theme.

template files (.tpl.php)

These templates are used for the (x)HTML markup and PHP variables. In some situations they may output other types of data --xml rss for example. Each .tpl.php file handles the output of a specific themable chunk of data, and in some situations it can handle multiple .tpl.php files through suggestions. They are optional, and if none exists in your theme it will fall back to the default output. Refrain from having complex logic in these files. In most cases, it should be straight (x)HTML tags and PHP variables. A handful of these templates exist in directories where core and contributed modules exist. Copying them to your theme folder will force Drupal to read your version.

template.php

For all the conditional logic and data processing of the output, there is the template.php file. It is not required, but to keep the .tpl.php files tidy it can be used to hold preprocessors for generating variables before they are merged with the markup inside .tpl.php files. Custom functions, overriding theme functions or any other customization of the raw output should also be done here. This file must start with a PHP opening tag "

Others

  • The logo and screen shot are not absolutely necessary for the theme to function, but they are recommended, especially if you are contributing your theme to the Drupal repository. Screenshots will show inside the theme administration page and the user account settings for selecting themes when the appropriate permissions are set. See the screenshot guidelines for more information.
  • To supply administrative UI settings or "features" beyond logo, search, mission, etc., a "theme-settings.php" file can be used. This is an advanced feature. More information can be found in the Advanced settings handbook page.
  • For color module support, a "color" directory with a "color.inc" file is needed along with various support files.
  • Source of Elements and Graphic: Overview of theme files

?>

Understand the elements of a theme
Themes

Read more articles

Newer
Use "Inspect Element" to troubleshoot potential Design/CSS problems
Older
"Clear all caches" when something goes wrong
  • Log in to post comments
Profile picture for user drupal
drupal
19
1
min read
A- A+
  • facebook-f
  • twitter
  • envelope
  • print

Contact Us

Get in touch for questions and our Drupal development, design and optimization services.

Contact Us

We aim to reply the latest within 48h.

Drupal 4U: Built for AI. Powered by Drupal.

We are a group of Drupal designers, developers and webmasters. We are Drupal experts! We provide comprehensive services that go beyond traditional web development, focusing on how AI understands, interprets, and cites your content. With our deep expertise in Drupal's architecture, we build the intelligent core of your digital presence, ensuring your brand remains authoritative and visible in a world where AI is the primary gatekeeper of information. Partner with us and let's future-proof your digital strategy together.

  • X Twitter
  • youtube

Drupal Services

  • Drupal Web Design
  • Drupal Development
  • Drupal SEO
  • Drupal GEO
  • Drupal Migration

Drupal 4U

  • Services
  • Showcases
  • Blog
  • About

Drupal Links

  • Official Drupal Website
  • Drupal Answers
  • Gaivas Themes Drupal 11
  • More Than Themes
  • Theme Forest
  • DXPR: Drupal for Marketers
2012 - 2025, Drupal 4U

Footer menu

  • Contact
Home
Drupal 4U
Built for AI. Powered by Drupal.
  • Home
  • Showcases
  • Services
  • Blog
  • About
  • Contact
Clear keys input element