Using Base Themes

Last updated November 11, 2012. Created by neal.basumullick on November 24, 2010.
Edited by Francewhoa. Log in to edit this page.

What is a Base Theme?

A base theme as a foundation allows for faster and easier Drupal theming.  These themes lack CSS styling, but provide theme regions and sometimes advanced features.  Base themes were made to enable faster theme creation, allowing the designer to focus on building code from concept.

In general, base themes are designed with little style and are designed to get you started with theme building. See Drupal’s sub-themeing.

Consider a base theme to be a wireframe, with all refinements contained within each sub-theme.  Sub-themes can be especially helpful when working on a multi-site installation, as a lot of the design resources can be shared. Site-specific changes can be set to a specific sub-theme, but any shared resources can be edited once to be applied across all the installations.

Sub-themes inherit the parent base 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.

Use a base theme if:

• You want a blank canvas that provides a framework for theme development

• You want to start standards compliant

• You do not want to re-code the same common features for menus, lists, footers, callout text, etc.

• You want your layout to be preset

• You are looking for an enhanced version of Drupal’s template system

• You want to take advantage the extra documentation usually packaged with base themes

• You want to start with solid SEO optimization and code/file simplicity

• You want a single starting point which provides simplified collaboration when building themes within a team

Don’t use a base theme if:

• You expect to start with advanced CSS (separate layout.css and print.css, etc.)

  • Note: Fusion and a few other base themes offer these features, so be sure to check each theme’s feature lists.

• You want to avoid bloated base themes.  The default Zen starter kit, for example, includes 17 enabled style sheets, which can led to issues in Internet Explorer.

• You want to maintain total control over the entire theming process

Getting started with base themes

Fusion

As an example, let's assume you choose to start with Fusion as a base theme.  First, download and unpack Fusion.  Try following the directions below, but your best sources for guidance are the documentation pages for Zen and Fusion.

1. Begin by renaming the fusion_starter folder to any name you want

2. Rename the .info fine in the same folder

3. Update the .info file with a name and description

4. On this line stylesheets[all][] = css/fusion-starter-style.css, replace the “fusion-starter” part with your theme’s name

5. Rename the css file under /css to match your theme

6. Upload and enable Fusion

Creating a sub-theme

To declare your theme to be a sub-theme of another, it is necessary to alter the sub-theme's.info file. Add the following line to the sub-theme's .info to declare its parent or "base theme." Change "themeName" to the internal name of the parent theme (that is, the name of the parent theme's .info file).

base theme = themeName

Style Sheets

If you declare at least one style sheet in the sub-theme's .info file, all style sheets defined in the base theme will be inherited.

• Overriding: Specify a style sheet with the same filename in the sub-theme. For instance, to override style.css inherited from a parent theme, add the following line to your sub-theme's .info file:

stylesheets[all][]   = style.css

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

Screen shots and Logos

The parent theme's screen shot will be inherited. The parent theme's logo (logo.png/logo.jpg) willnot be inherited.

• Overriding:  Specify in the .info file for your theme

Regions

Sub-themes do not inherit custom regions from a parent theme. If you are using custom regions, you should copy the region declarations from the parent theme's .info file. Be sure your sub-theme's page.tpl.php file matches the sub-theme's region settings.

What is a Starter Theme?

A starter theme provides the same spartan layout as a base theme, but usually with additional functionality and graphics options.  In addition, starter themes are intended to be edited directly rather than through sub-themeing.

General features of Base and Starter themes:

• Well documented php and css files.

• Lots of easy-to-access classes and ids for CSS developers.

• Classes on body include items like "logged-in", "not-logged-in", "front", "not-front", as well as the node type ("node-type-story", "node-type-blog", etc) for single node pages. This can allow CSS developers to do things like have a different color for a given page item for non-logged-in users, have a larger header section on the front page, or put a different background color on a given node type.

• Automatic (table-less) column resizing for 1, 2, and 3-column layouts.

• Separate layout.css file to allow for changing the type of column layout (holy grail, jello mold, etc).

• A print.css file optimizes print display automatically when sent to a printer — removes, sidebars and nav elements, optimizes font size, adds text to links showing href, etc.

• Header and Footer sections marked up with header and footer elements

• Navigation marked up with nav elements

• Sidebars marked up with aside elements

• Nodes marked up with article elements containing header and footer elements

• Comments marked up as articles with header/footer elements, nested within node elements

• Blocks marked up with section elements

Examples of Base and Starter Themes:

• AdaptiveTheme  - Uses the Skinr module

• Basic – Originally a version of the Zen theme, but now a new starter theme

• Blueprint – Uses theBlueprint CSS framework. By default, the grid is 950px wide, with 24 columns

• Boron – a base theme for Drupal which converts the core template files to HTML5 markup. Like other minimal base themes, such as Zen and Stark, it includes only a few lines of layout-driven CSS, and markup that is search engine optimized. There is also a Boron for Zen base theme.  (All the benefits of Zen, with all the HTML5 goodness of Boron.)

• Cassette - A Zen starting kit 

• Clean - A base theme with a focus on minimal implementation.

• Foundation - A liquid layout theme that handles layout for one, two, and three columns.

• Framework - a blank canvas for theme developers. Use Framework as a user friendly starting point to help facilitate your theme development.

• FuelDeLuxe - A D6 starter theme.

• Fusion – Powerful base theme which provides the basis for top-notch themes such as Acquia Slate.  Often used in conjunction with the Skinr module.

• Genesis – A flexible starter theme

• NineSixty (960 Grid System) - This theme is based on the 960 Grid System. Details on its background can be found in a journal entry by Nathan Smith.

• Nixer - a fast, lightweight yet professional CSS-only theme for Drupal. Uses a minimalist yet contemporary design, it is usable out of the box or can be easily customized.

• Precision – based on the exact same principles as the 960 grid system, but with a more fine grained grid and some minor feature additions.

• Zen - A powerful, yet simple, HTML5 starting theme with a responsive, mobile-first grid design. If you are building your own standards-compliant theme, you will find it much easier to start with Zen than to start with Garland or Stark. This theme has fantastic online documentation and tons of helpful code comments in its PHP, HTML, CSS and Sass.

• Zen nineSixty - Zen with grids

See also

Drupal Starter Themes Comparison