Creating a Sub-theme Using OpenPublic's Original Base Theme

Theme Configuration

We are going to create our first [OpenPublic|OpenPublic] sub-theme called "Ardi". In case you are wondering: Ardi is the name of the [first human ancestor| ever uncovered by archeologists, so it sounded like an appropriate name for the first theme you will create in [OpenPublic|OpenPublic].

Let's get started by creating a folder called "ardi" under sites/default/themes or sites/all/themes. Typically, in-house themes and modules are placed under "default" and themes and modules downloaded from under "all". But that's just a convenience rule. Let's create a file called "" inside the themes/ardi and enter following code in it:

There are several things worth noting in this configuration:

  1. "base theme = openpublic_theme" tells Drupal that the base (parent) theme of the new theme is openpublic_theme. This causes Drupal to "inherit' a whole bunch of settings from the theme, giving us significant amount of groundwork out of the box.
  2. Below that we define extra stylesheets (the first one, editor.css is for the WYSIWYG editor, the second, ardi.css is where we will define our custom styles), in addition to the ones inherited from openpublic_theme, so that we have a place where we can place additional style definitions.
  3. Following that, we define regions that we will use in the new theme. Regions, in Drupal, are placeholders for space where blocks can later be placed and arranged. The definition shown in this code is the exact same one as in openpublic_theme. For better or worse, Drupal does not inherit region definitions form a parent (base) theme, so you always need to define set of regions you will be using.We strongly recommended to always define the regions defined in openpublic_theme and, if necessary, you can add your own ones, as well. However, you in most cases, you should not have to.
  4. "stylesheets-conditional[INST:lte IE 8]" is an example of declaring an IE specific CSS file. [OpenPublic|OpenPublic] allows you to declare conditional stylesheets in this way without needing to add any special code to page.tpl.php. You can declare any valid IE condition inside the brackets. Documentation on IE conditions can be found here: [|]

Customizing Theme Through CSS

To activate the newly created theme, go to: [|] and both enable and set to default the Ardi theme:

Click on the "Save Configuration button, to save your changes.

Let's try messing with the CSS. Let's create a "css" folder under the ardi theme folder and ardi.css file in it, with the following code:

Refresh the page and notice that the outer background is now bright blue (instead of the original dark blue with the flag texture).

The HTML markup of the [OpenPublic|OpenPublic] core theme is abundantly injected with all kinds of CSS classes in all kinds of places, opening great possibilities for altering the design just with CSS changes.

In the next sections of the documentation we will cover, non-CSS-based theme changes as well.


Loading widget...
No files to show