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.

5 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

Lynchburg Realtors October 28th, 2014 @ 7:40pm

Oh my goodness! Incredible article dude! Thank you, However I am
having problems with your RSS. I don't understand the reason why
I cannot subscribe to it. Is there anybody getting similar RSS
problems? Anyone that knows the solution can you
kindly respond? Thanks!!

the memory heal... October 29th, 2014 @ 11:32pm

" This is the "consuming fire" of God mentioned in the Holy Scriptures. If I had those two in my life, I settled much faster and I felt happy. Then follow it with adequate protein intake (also include vitamin rich foods in your diet). It will also take away the redness and inflammation like Lavender and Chamomile. Whether it exists is beside the point: the Self, or soul as an essence has never been perceived objectively by anyone.

Add a new comment