Integrate Color Module Support Into Bartik Subtheme

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 bartik_mysubtheme.info file

vim sites/default/themes/bartik_mysubtheme/bartik_mysubtheme.info

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')) {
    _color_html_alter($variables);
  }
}

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

Edit mytheme/color/color.inc

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 color.inc 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

References

Adding Color module integration to your Drupal 7 Sub theme