[Drupal] How to create a colorize theme by using Drupal 7 color module
BY rohith.pv
5 years ago
0 comments comment

This is an article about how you can create a custom color switching theme with the help of Drupal 7 color module. Color module is a Drupal core module comes with Drupal and you can use this module to colorize your theme. Garland is a Drupal theme which uses color module to colorize its various content. If you want to know more about how to create a colorized theme by using Drupal 7 color module read on.

Before you start using the color module, you need to create a custom theme for your Drupal installation. After you create a custom theme follow the steps.

  1. Create a directory called "color" inside your custom theme directory.
  2. Create a file called color.inc inside your color directory.
  3. Add an image file called base.png. Drupal color module requires this file so we have to create one. You can use this link to create a base.png file.
  4. Next create a CSS file, which you can create inside your theme/color directories. Only thing you have to specify is the correct path in .info file, because all color styles will be in a separate file. Now you can start editing your color.inc file.

In color.inc file you have to specify an array with some settings. This array contains all settings that you want to give to color module.

Creating a color.inc file.

First thing you have to write is items and labels. For example see the code below.


$info = array();

$info['fields'] = array(
  'bg' => t('Background'),
  'text' => t('Text'),
  'titles' => t('Titles'),

Next thing you have to do is to define color schemes for the theme. You can use the above array to create a color scheme. Here you have to give color code for each color so that color module will replace color from our CSS. One more thing here you have to use lowercase letters for colors otherwise color module get the color you specify. Here you can create as many schemes you want and you can separate them with names. Now I will show you how to create color schemes. You can add this code in the same color.inc file

$info['schemes'] = array(
  'default' => array(
    'title' => t('Default'),
    'colors' => array(
      'bg' => '#ffffff',
      'text' => '#777777',
      'titles' => '#333333',
  'orange' => array(
    'title' => t('Orange'),
    'colors' => array(
      'bg' => '#008CFF',
      'text' => '#ffffff',
      'titles' => '#ffffff',

Now you have to tell which style sheet you are going to use. You have to create a CSS file called colors.css inside your theme directory. Once you specify this file inside your color.inc, this file will be called by Drupal color module.

$info['css'] = array(

You must also define this style sheet in your theme.info file. So add

stylesheets[all][] = colors.css

Now lets look into CSS styles. Here I am going to show you only a few color changes in body and titles. In colors.css you have to specify the colors those we already defined in "default" scheme. See a sample colors.css below.

body { 
  background-color: #ffffff; color: #777777; 

h1, h2 { 
  color: #333333; 

Next you have to alter some function which is specified in Drupal color module. For this use the following code in your theme template.php file.

function YOURTHEME_process_html(&$variables) {
 if (module_exists('color')) {

function YOURTHEME_process_page(&$variables, $hook) {
 if (module_exists('color')) {

Replace "YOURTHEME" with name of your theme. Now you are created a color.inc file but there are some other advanced settings you can write. But now I am not going to write all that because it cannot be covered in this small article.

Now clear your Drupal cache and enable color module if you have not.

After enabling your custom theme, go to your theme settings page and there you can see colorizing options for your theme. just play with the color picker and choose a nice color combination. If you have some error related to preview just clear the Drupal cache. That's it! you are created a theme with colorizing settings and you can change your site heading/background color whenever you like :)



on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Drupal Technical StumbleThis Leave a reply Your email address will not be published. Required fields are marked * Sean (not verified) access_time 27 May 2020 - 00:47 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon... How can I fix this? Thanks, Sean webmaster access_time 27 May 2020 - 00:47 In reply to Icon doesn&#039;t show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 27 May 2020 - 00:47 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks. Add new comment

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Leave a reply Your email address will not be published. Required fields are marked * Anonymous (not verified) access_time 27 May 2020 - 00:47 Hello. I'm trying to make example.com show as www.example.com, and I'm running into difficulties. I'm on Apache 2.0 and using the following lines in my httpd.conf file: RewriteEngine on RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com$ [NC] RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [L,R=301] When I go to http://xxxxxxxxxx.com, I get http://www.xxxxxxxxxx.com (as expected). However, when I go to http://xxxxxxxxxx.com/node/1 (it's a Drupal site), I get a 404 thrown and the URL changes to xxxxxxxxxx.com/var/www/drupal/node/1. Same thing with www.xxxxxxxxxx.com/node/1. Any suggestions? I want to run without Drupal's .htaccess file (instead incorporating these calls into my httpd.conf file). webmaster access_time 27 May 2020 - 00:47 In reply to Rewrite including filesystem path by Anonymous (not verified) I think the problem is with the base path which results in the redirection to /var/www/ part. The best approach I would think is to start with drupal htaccess and then strip out parts and move to httpd SNVC (not verified) access_time 27 May 2020 - 00:47 This is definitely a good guide. Thanks for this. wellyson access_time 27 May 2020 - 00:47 This is really nice and helpful. Add new comment

on 08th February 2008 / by webmaster
Attachment Size slashdotit.tar.gz 173.55 KB Similar to the StumbleThis module that we had created earlier we have created another bookmarking Drupal Technical Slashdotit Leave a reply Your email address will not be published. Required fields are marked * Shlomi Fish (not verified) access_time 27 May 2020 - 00:47 Hi! I'm interested in this module, but Drupal 6.2 complains that it's incompatible with it. Can you please update it or tell me how? Regards, Shlomi Fish shlomifish.org webmaster access_time 27 May 2020 - 00:47 In reply to Can you update it for Drupal-6.x? by Shlomi Fish (not verified) Sure we are working on this currently and will post an update soon. Also we will post this module on www.drupal.org as well Cheers Anoop John Team Zyxware Anonymous (not verified) access_time 27 May 2020 - 00:47 Hello! Nice Article very interesting, thanks Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.