Theming notes for Drupal 7

by Gisle Hannemyr

A loose collection of notes about the different themes I've considered.

Table of contents

Introduction

The themes below are divided in three groups: Starter themes, Base themes and Ready-to-use themes. Each group is listed in alphabetical order.

Starter themes

Basic

Basic is a responsive HTML 5 Drupal 7 starter theme. It provides a grid system based upon Bourbon Neat.

Used by me on i18n.no:

Features:

Pros:

Cons:

Regions

The position of the 7 block regions is shown below:

Regions.

Setting up the environment

It requires ruby, sass bourbon and neat.

Refer to “Webmaster's notes” for setting up ruby and sass on RHEL6 and Ubuntu.

After getting the environment in place, go to the sass/components/ directory and install the latest versions of bourbon (3.1.8) and neat (1.5.0):

# bourbon install
# neat install
# bourbon version
# cat neat/_neat.scss

I also updated css/normalize.css to the latest version (3.0.0). Note that this should be the latest style-sheet regularly loaded. It contains the following setting, which basically let the browser control the monospace font.

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

Development

Now everything is ready. You edit the sass directory, and use this command to watch changes done in the sass directory, and output the result in the css directory:

# sass --watch sass:css &

Base themes

Bootstrap

Bootstrap It is maintained by Marc Carver.

For detailed notes see, the chapter in Drupal notes about the Bootstrap theme. First used by me on hannemyr.com. Also see hannemyr.com design document for tweaks (probably outdated).

Features:

Pros:

Cons:

Regions

The position of the 8 block regions is shown below:

Regions.

Logo

The default logo is 32 x 32 px.

Requirements

The version of jQuery in the Drupal 7 core is 1.4.4. Bootstrap requires a minimum jQuery version of 1.7 or higher. The preferred method to accomplish this task is to install the jQuery Update module (version 7.x-2.4 or later). This allows you to set local version and also to select an external CDN (such as Google) for an even newer version.

My current set set up uses JQuery ver. 1.10 and no external CDN.

Fusion

If you wanna go straight into base, but don't want to mess around with code too much, go with Fusion base theme.

Ready-to-use themes

Bartik

Bartik is the default theme for Drupal 7.

Best responsive

Best Responsive is a responsive HTML 5 Drupal 7 theme created by Devsaran. It is intended to be light-weight and professional looking. It comes with an integrated flex slider for the front page. The default layout is two columns that collapses to one column on small screens.

Used by me on diw.ifi.uio.no.no.

Features:

Regions

The position of the 12 block regions is shown below:

Regions.

However, some of content is not positioned into regions, but is inserted directly into templates/page.tpl.php. This is the case for:

The site slogan and flex slider is positioned above three preface blocks.

The copyright notice is positioned below the footer block.

By default, only the following regions have blocks:

The user menu block is not assigned a region by default, I have it as the second item (just below the search block) in the first sidebar.

Flex slider

The default flex slider slides alternates between three images. The default images is 960 px × 400 px (aspect ratio 2.4:1). Images will be re-sized to fit, but different heights will make page content jump during transitions.

Note that the images is re-sized client-side, so big images will add significantly to the page load on low bandwidth devices.

To replace the images, but new images into the images directory and modify the file names in templates/page.tpl.php.

Modification

The following details has been modified in the theme (instead of creating a sub-theme).

Style sheets

The file style.css has been modified.

Page template

The file templates/page.tpl.php has been modified.

Pixture reloaded

Pixture Reloaded is a highly configurable HTML 5 Drupal 7 colourable sub-theme maintained by Jeff Burnz. It is powered by Adaptivetheme and inherits all its features such as responsive design techniques, GUI layout engine and more.

Used on CreativeCommons.no. See design documents for tweaks.

Configuration of Pixture Reloaded is for a large part by means of the administrative interface. This means that edits done to the css files may be overridden by settings the administrative interface.

Final word

[mumble]

Last update: 2016-03-08 [gh].