Sub-themes are just like any other theme, with one difference: They inherit the parent theme's resources. There are no limits on the chaining capabilities connecting sub-themes to their parents. A sub-theme can be a child of another sub-theme, and it can be branched and organized however you see fit. This is what gives sub-themes great potential.

A sub-theme must have a different internal name (i.e., the name used by Backdrop) from its parent theme. This name must not contain any spaces or other special characters. The name of your sub-theme must start with an alphabetic character and can only contain lowercase letters, numbers and underscores.

There are two ways you can create a sub-theme: you can build it up manually, or use the Devel Subthemer module to build the sub-theme by filling out a form on the website. We'll start by describing the manual process, which includes a lot of the "why" for the various elements of a theme.

Building a sub-theme manually

Let's suppose this sub-theme's internal name is "my_subtheme".

Create a theme directory
The sub-theme to-be should be located in its own directory. This folder should have the same name as the internal name of the sub-theme (e.g., my_subtheme).

The sub-theme folder should be located inside the folder BACKDROP_ROOT/themes/ so that your theme's files are in BACKDROP_ROOT/themes/my_subtheme.

Create an .info file or copy and modify the parent theme's .info file
To declare your theme to be a sub-theme of another, you must put a my_subtheme.info file inside your my_subtheme folder. The easiest way is usually to copy thetheme_name.info file from the parent theme ("theme_name" stands for the internal name of the parent theme), and to rename it as my_subtheme.info. Then you need to add the following line to my_subtheme.info file to declare its parent or "base theme": base theme = theme_name Change "theme_name" to the internal name of the parent theme (that is, the name of the parent theme's .info file, usually all lower case).

In your subtheme .info file:

name = My sub-theme
description = This is a sub-theme of theme Basis, made by John for the web site example.com (red, responsive).
backdrop = 1.x
base theme = basis

Copy color module settings if needed
As the sections below indicate, the sub-theme inherits most properties of the base theme. The important exceptions are core version and color info. You probably want to copy the core version declaration.

If your base theme supports the color module and you'd like your sub-theme to support it, you probably also want to copy the color folder from your base theme and add the line from your base theme's info file to your sub-themes info file that loads the appropriate css files and looks like this (different themes may use different css files, not all themes with color module support will have a file called colors.css):

stylesheets[all][] = css/colors.css

and then copy the colors.css from your base theme to the css folder of your sub-theme.

Add your own style
All style sheets defined in the parent theme will be inherited, as long as you declare at least one stylesheet in your sub-theme's .info file. You must declare at least one stylesheet in your sub-theme for any of the parent theme's stylesheets to be inherited.

If you want to override one of the parent theme's style sheets, specify a style sheet with the same filename in the sub-theme. For instance, to override page_style.css inherited from a parent theme, add the following line to your sub-theme's .info file:

stylesheets[all][] = page_style.css

You will also need to create the page_style.css file; if you simply wish to disable the imported styles, you can create an empty file.

Override javascript if needed
All JavaScripts defined in the parent theme will be inherited. Similar to style sheets, specify a JavaScript file with the same filename in the sub-theme's .info file if you wish to override the parent javascript. For instance, to override bold_script.js inherited from a parent theme, add the following line to your sub-theme's .info file

scripts[] = bold_script.js

You will also need to create the script.js file; if you simply wish to disable the imported scripts, you can create an empty file.

Add your custom code in template.php
Create a template.php file in the root of your subtheme directory if you wish to add custom code.
Anything defined in the parent theme's template.php file will be inherited. This includes theme function overrides, preprocess functions and anything else in that file. Each sub-theme should also have its own template.php file, where you can add additional functions or override functions from the parent theme. There are two main types of functions in template.php: theme function overrides and preprocess functions. The template system handles these two types in very different ways.

Theme functions are called through theme('[hook]', $var, ...). When a sub-theme overrides a theme function, no other version of that theme function is called.

On the other hand, preprocess functions are called before processing a .tpl file. For instance, [theme]_preprocess_page is called before page.tpl.php is rendered. Unlike theme functions, preprocess functions are not overridden in a sub-theme. Instead, the parent theme preprocess function will be called first, and the sub-theme preprocess function will be called next.

There is no way to prevent all functions in the parent theme from being inherited. As stated above, it is possible to override parent theme functions. However, the only way to remove a parent theme's preprocess function is through hook_theme_registry_alter().

Override template files
Create a /templates folder in the root of your subtheme if you wish to override the parent themes template files. Add a template file with the same name in your sub-theme folder to have it override the template from the parent theme.
Backdrop provides a large set of files that themes can use to inherit properties. By specifying a particular file name and or structure, this allows the theme to override or inherit a template.

Any .tpl.php files from the parent theme will be inherited. You can add template files with more specificity — for instance, node--blog.tpl.php building on an inherited node.tpl.php.

A single hyphen is still used to separate words: for example, "user-picture.tpl.php" or "node--long-content-type-name.tpl.php", so the double hyphen always indicates a more targeted override of what comes before the "--". See Converting 6.x themes to 7.x for more info.

Add your own screenshot
The parent theme's screen shot will be inherited; specify a new image file in your sub-theme's .info file to override it.

Copy the parent theme's color module settings.
Color.module support within the color directory is not inherited.

Copy the parent theme's settings
Theme-settings.php are not inherited, unless you copy the settings declarations from the parent theme's .info file.

Using Devel Subthemer module

You can use the Devel Subthemer module to carry out many of the steps above automatically. To use it:

  1. Download the Devel Subthemer module and copy it to your modules directory.
  2. Enable the module at the module administration page.
  3. To create a subtheme, go to admin/config/development/devel-subthemer and fill out the form as required.
  4. The subtheme will be created and then copied to the themes directory.
  5. From there, you can further modify the sub-theme, adding your own CSS, JavaScript, and overriding templates as desired.