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.

20 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.

runescape Cheat November 1st, 2014 @ 8:20am

Definitely believe that which you stated. Your favorite reason seemed to be on the web the easiest thing
to be aware of. I say to you, I definitely get annoyed
while people consider worries that they plainly do not know about.
You managed to hit the nail upon the top and also defined
out the whole thing without having side effect , people can take a signal.

Will probably be back to get more. Thanks

Mirta November 6th, 2014 @ 12:02am

Very shortly this website will be famous among
all blogging and site-building people, due to it's
fastidious articles

Also visit my web-site shadow fight cheats - Mirta -

71 film complet November 7th, 2014 @ 12:25am

De manire gnrale, lee meilleur Convertisseur MKV en MP4, nous
pouvons facilement convertir MKV en MP4, et l'effet peut tre garanti.

For instance, the spendthrifts of the world whether orr not they
be Argentina, Venezuela, thee PIIGS oof the Euro-Zone or tthe socialist-democratic Party
in DC appear to desire us to now believe that constructing pockets in this dimension, in our market, in the global economic system is a great point, and that
inflation may manage any difficulties which are unintended results, we'll merely oout run thhe area debris of awful economic procedures.

Prend en charge le grondement et des extensions mémoire,
sans aucune interaction utilisateur particulière n'est
requise.

fotos del amor November 7th, 2014 @ 10:00pm

Incredible quest there. What happened after?
Take care!

mobile compatibility November 8th, 2014 @ 9:28pm

Greetings! I know this is kinda off topic but I'd figured I'd ask.
Would you be interested in exchanging links or maybe guest authoring a blog article or
vice-versa? My website addresses a lot of the same topics
as yours and I believe we could greatly benefit from each other.
If you are interested feel free to send me an e-mail.
I look forward to hearing from you! Awesome blog by the way!

streaming online November 12th, 2014 @ 9:14pm

No matter if some one searches for his required thing, therefore he/she desires
to be available that in detail, so that thing is maintained over here.

http://techietr... November 14th, 2014 @ 4:19am

The way I see 3rd edition as being inadequate is that the numbers
become stupid very early on. Well hit the PSN for some gems like
Pixeljunk monsters (great for “multiplayer study breaks”), the new Pixeljunk Shooter,
or the excellent Braid. Completing achievements are the best
way in earning gems in Clash of Clans.

My web page :: http://techietricks.net

willbo.scottjar... November 14th, 2014 @ 5:14pm

Good response in return of this difficulty with genuine arguments and describing the whole thing about that.

Crystle November 16th, 2014 @ 7:34pm

The Truth About Cellulite has both pros and cons.
However, the cons seem to be extremely minor and easy to overcome, making
them far less weighty than all the positives the e-book brings with it.

The reality is that there isn't any more need for you
to invest in various lotions, creams, pills, moisturizers and scrubbers, spending hundreds of dollars
and things that don’t perform and can actually harm you as well.
Instead, join the thousands of men and women across the
world that have tried the Truth About Cellulite, including myself, and rejoice in the
fact that your cellulite will soon be a thing
from the past. The greatest of all, since it's your own work and actions that will reduce this cellulite, you
will promptly feel better about yourself and notice your self-confidence building back up to
the right levels. And best of all, the system can be used by men and women alike.

I say give it a go!

m88 November 20th, 2014 @ 3:22pm

Way cool! Some extremely valid points! I appreciate you penning this write-up and also the rest of thee site is also very good.

Here is my site: m88

thegenomeinstit... November 26th, 2014 @ 1:46am

This is my first time go to see at here and i am truly happy to
read everthing at single place.

realmind.net November 26th, 2014 @ 7:45am

Very quickly this site will be famous among all blog
visitors, due to it's good posts

google apps log... November 28th, 2014 @ 9:49am

But they have very less threshold for clicks due to "mistakes".
For the initial place it elevates your ranking status.
Blogger also offers a simple to operate interface in order to easily develop a blog if
you live not necessarily technically inclined.

Anabolen kopen November 28th, 2014 @ 6:57pm

Hello I am so grateful I found your web site, I really found you
by accident, while I was looking on Yahoo for something else, Anyhow I
am here now and would just like to say thanks for a fantastic post and a all round interesting blog (I also love the theme/design),
I don't have time to read through it all at the moment but I have saved it and also added in your RSS feeds,
so when I have time I will be back to read much more,
Please do keep up the awesome job.

Lamborghini Ave... December 11th, 2014 @ 6:59am

There are numerous firms which can give you with the exotic autos with low cost.
In 1966, the Lamborghini Miura was created. The company
has its offices located in three places such as
Beverly Hills, Santa Monica and Hollywood.

Add a new comment