June 17th, 2013 · 20 comments
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.
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 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'
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:
; 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.
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:
background: <?php print $background; ?>;
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.
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.