Integrate Color Module Support Into Bartik Subtheme

Last modified: 
Sunday, March 29th, 2015

Here is a quick rundown on how to create a Drupal 7 Bartik subtheme with integrated color.module support.

This presumes you are ceating a Bartik subtheme MySubtheme at sites/default/themes/bartik_mysubtheme.

Create the directory to house your new theme

mkdir -p sites/default/themes/bartik_mysubtheme/css

I'm using the -p flag here to create bartik_mysubtheme/ along with a css/ folder already in it. We're going to need that css/ folder later.

Create file

vim sites/default/themes/bartik_mysubtheme/

Add the following and save the file.

name = My Bartik Subtheme
description = A subtheme of Bartik with color.module support.
core = 7.x
base theme = bartik

; color.module needs this.
stylesheets[all][] = css/colors.css

; Here are keeping all the same regions as Bartik.
regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

Copy the Bartik color/ folder to your subtheme

cp -a themes/bartik/color/ sites/default/themes/bartik_mysubtheme/

Copy the Bartik color.css to your subtheme's css folder

cp -a themes/bartik/css/colors.css sites/default/themes/bartik_mysubtheme/css/

Add the Color process functions to template.php

vim sites/default/themes/bartik_mysubtheme/template.php
* Add support for the color.module.

 * Override or insert variables into the page template for HTML output.
function bartik_mysubtheme_process_html(&$variables) {
  // Hook into color.module.
  if (module_exists('color')) {

 * Override or insert variables into the page template.
function bartik_mysubtheme_process_page(&$variables) {
  // Hook into color.module.
  if (module_exists('color')) {

Edit mytheme/color/

Update the second argument to theme_get_setting() to match your subtheme.

// Put the logo path into JavaScript for the live preview.
drupal_add_js(array('color' => array('logo' => theme_get_setting('logo', 'bartik_mysubtheme'))), 'setting');

Copy logo.png

The file will now look for the file logo.png in your subtheme folder. If you don't already have one, you can copy Bartik's over easily enough.

cp -a themes/bartik/logo.png sites/default/themes/bartik_mysubtheme/

Flush the Caches

drush cc all


Adding Color module integration to your Drupal 7 Sub theme

The operator of this site makes no claims, promises, or guarantees of the accuracy, completeness, originality, uniqueness, or even general adequacy of the contents herein and expressly disclaims liability for errors and omissions in the contents of this website.