Theme development - Drupal 7

Writing theme .info files

The .info file is a static text file for defining and configuring a theme. Each line in the .info file is a key-value pair with the key on the left and the value on the right, with an “equals sign” between them (e.g. name = my_theme).

Semicolons are used to comment out a line. Some keys use a special syntax with square brackets for building a list of associated values, referred to as an “array”. If you are unfamiliar with arrays, have a look at the default .info files that come with Drupal and read the explanations of the examples that follow. Even though the .info file extension is not natively opened by an Application, you can use TextEdit on a Mac or Notepad on a Windows computer in order to view, edit, and save your changes.

Theme name requirements

The name should start with an alphabetic character, can contain numbers and underscores, but not hyphens, spaces or punctuation. The name will be used by Drupal in forming various functions in PHP and therefore it has the same limitations.

Do not choose names that are already used by installed modules, as all installed components must have unique names.

One of the best practices is to use prefixes when naming a site’s custom theme, to guarantee unique names for themes. A site named example.com might use theme names such as ex_themename.

Because the .info file is cached, you must clear the cache before any changes are displayed in your site.

The .info file can also specify which theme settings should be accessed from the Drupal administration interface, as you will soon see.

Encoding

The file must be saved as UTF-8 without a Byte Order Mark (BOM).

Contents

Drupal understands the keys listed below. Drupal will use default values for the optional keys not present in the .info file. See the examples set for core themes.

name required
description recommended
screenshot
version discouraged
core required
engine
base theme
regions
features
theme settings
stylesheets
scripts
php

Theme .info File

name = MyCompany Theme
description = A Bootstrap Sub-theme.
core = 7.x
base theme = bootstrap

;;;;;;;;;;;;;;;;;;;;;
;; Regions
;;;;;;;;;;;;;;;;;;;;;

regions[navigation]     = 'Navigation'
regions[header]         = 'Top Bar'
regions[highlighted]    = 'Highlighted'
regions[help]           = 'Help'
regions[content]        = 'Content'
regions[sidebar_first]  = 'Primary'
regions[sidebar_second] = 'Secondary'
regions[footer]         = 'Footer'
regions[page_top]       = 'Page top'
regions[page_bottom]    = 'Page bottom'

;;;;;;;;;;;;;;;;;;;;;
;; MyCompany Custom Regions
;;;;;;;;;;;;;;;;;;;;;
regions[footer_menu_left] = 'Footer menu left'
regions[footer_menu_right] = 'Footer menu right'

;;;;;;;;;;;;;;;;;;;;;
;; CSS
;; these css files will be included on every page
;;;;;;;;;;;;;;;;;;;;;

stylesheets[all][] = css/bootstrap.min.css
stylesheets[all][] = css/MyCompany.css

;;;;;;;;;;;;;;;;;;;;;
;; JS
;; this JS file will be included on every page
;;;;;;;;;;;;;;;;;;;;;

scripts[] = js/MyCompany.min.js