Your First OpenPublish (Sub)Theme

Theme Configuration

We are going to create our first OpenPublish 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 OpenPublish.

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 drupal.org: under "all". But that's just a convenience rule. Let's create a file called "ardi.info" inside the themes/ardi and enter following code in it:

There are several things worth noting in this configuration:

  1. On line 3 we tell Drupal that the base (parent) theme of the new theme is openpublish_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. On lines 9 and 12 we define extra stylesheets (one for all media and one for just print media), in addition to the ones inherited from openpublish_theme, so that we have a place where we can place additional style definitions.
  3. On lines 14-19 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 openpublish_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 openpublish_theme and, if necessary, you can add your own ones, as well. However, you in most cases, you should not have to.

Customizing Theme Through CSS

To activate the newly created theme, go to http://yourdomain.com/admin/build/themes and both enable and set to default the Ardi theme:

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

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

Refresh the page and notice that the outer background is now blue (instead of the original gray. Except we used the CSS !important clause to override the default stylesheet defined in openpublish_theme. This is not the best way to override styles. A preferred way would be to indicate more specific style definition than originally defined, thus giving new definition higher priority in the browser priority list:

Notice the trick: by indicating that the element is a div with an id of "outer-wrapper" we made the definition more specific than the original one (which matched an element with the id of "outer-wrapper") and thus overrode the initial definition without resorting to the "!important" keyword.

The HTML markup of the OpenPublish 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.

Why are menus, in a newly installed OpenPublish, "fake"?

In a freshly installed OpenPublish, you will quickly notice that menu links do not do much - they seem to not lead anywhere. This is because default implementation of menus is for demonstration purposes only. They are not intended to be used "as-is" but should be further customized per specific requirements of a project.

By default, the menu items lead to articles listing pages filtered by taxonomy terms. Default taxonomy terms are from Calais Document Category vocabulary and assume that you have configured Calais API key after installation and are indexing content with OpenCalais.

If you don't do any of that, you can just enter terms in the Topic vocabulary (see: admin/content/taxonomy) and update menu links to point to appropriate URLs. For instance if "entertainment" is a term in Topics vocabulary, you can create a menu item pointing to: articles/entertainment and it will list all articles tagged with "entertainment".

You can also completely change the destination URLs of the menu items from Drupal's menu administration system accessible at: http://yourdomain.com/admin/build/menu. The menu system called Primary Links is the one driving the bluish menu in the base OpenPublish theme.

Documentation

Loading widget...
No files to show
{{node.name}}
({{node.children.length}})
{{node.date}}
{{node.modified}}
{{node.filesize}}
{{node.filename}}