Easily Add Color Support To A Drupal Theme With DesignKit

Adding color support to a Drupal theme allows site owners/administrators to modify the theme's color scheme directly from a settings page, rather than having to edit any CSS.

Drupal color schemes

I'm currently assessing color integration options for Neptune and have found DesignKit to be a quick, easy, and flexible alternative to direct color module itegration (as used by Garland and Bartik). On the flip side, there are a couple of caveats (see below).

This tutorial will focus on implementing basic color configuration, although DesignKit also supports image configuration and more advanced color configuration (including color blending/shifting).

Setup

Setup is a three step process:

  • Step 1: Install the DesignKit module
  • Step 2: Edit the theme's .info file
  • Step 3: Copy and edit 'designkit.tpl.php'

In short:
we use the theme's .info file to define color settings which will appear as fields on the theme's settings page (allowing users to select colors) and we then use a copy of 'designkit.tpl.php' to define what elements should be made what color.

Step 1: Install the DesignKit module

Install DesignKit as per any standard module.

Step 2: Edit the theme's .info file

We'll add two color setting fields - one to select the theme's background color and one to select the theme's link color.

Open the theme's .info file (in this case 'neptune.info') and append the following:

; DesignKit

; Background color
designkit[color][background][title] = "Background"
designkit[color][background][description] = "Background color."
designkit[color][background][default] = "#ffffff"

; Link color
designkit[color][links][title] = "Links"
designkit[color][links][description] = "Link color."
designkit[color][links][default] = "#488fac"

Now clear the site cache.

Then go to the theme's settings page (/admin/appearance/settings/THEMENAME) and scroll down to the 'Colors' fieldset (which may be collapsed by default).

The color setting fields have been added and clicking on a field exposes a color picker for that particular field.

DesignKit settings

Step 3: Copy and edit 'designkit.tpl.php'

The DesignKit module folder contains a 'designkit.tpl.php' file. Copy this file into your theme folder. Open the copied 'designkit.tpl.php' file and add the following:

body {
  background: <?php print $background; ?>;
}
a {
  color: <?php print $links; ?>;
}

When this file is processed, any PHP variable (e.g. $background) whose name matches that of a color setting defined in the theme's .info file (in step 2) will be replaced with the corresponding color setting's value (e.g. #ffffff).

That's it! Now clear the site cache again and test.

Caveats

Unlike direct color module integration, DeisgnKit doesn't currently support color scheme presets or show a preview on the theme settings page (although setting up a preview is a more custom process anyway, as the preview would likely want to reflect an individual theme).

DeisgnKit also outputs its CSS (generated from 'designkit.tpl.php') in a <style> block directly in the <head> and not in a linked stylesheet. There is an open issue regarding this.

4 comments

Drupal Theme Garden July 1st, 2013 @ 4:57pm

Nice article, but ...
Aren't linked stylesheet better approach than style-block in the head?

samuel sandeeep July 30th, 2013 @ 11:27am

Nice article, thanks for sharing this information.Looking forward for more posts like this.

peter March 7th, 2014 @ 2:12pm

nice article

vocal technology August 27th, 2014 @ 7:11pm

Keep this going please, great job!

Add a new comment