Make a Subtheme of Bartik with the Color Appearance module wheel

How to make a subtheme of Bartik with the color appearance wheel?

By default making a sub-theme of Bartik in Drupal does not bring across the color wheel module, but with a slightly modified sub-theme set up, this can be enabled. The trick is to make a css directory and put your custom css in there and also copy across the existing bartik color css files.

1) So first up create a sub-theme of Bartik, make a directory and file it in:

sites/all/themes/sub-theme_name

2) Next make a 'YOURTHEMENAME.info'  file in your theme folder and add the following to it:

name = sub-theme_name
description = A really cool theme to do stuff in
core = 7.x
engine = phptemplate
base theme = bartik
version = 0.2
stylesheets[all][] = css/sub-theme.css
stylesheets[all][] = css/colors.css
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

3) Create a css directory in the sub-theme directory named "css"

sites/all/themes/subtheme_name/css/

4) Create you custom css file that will override Bartiks css - this file is declared in the .info file above - make sure the declared name and the css file name are the same - this example uses sub-theme.css

5) Copy across the "color" directory from:

themes/bartik/color

to

sites/all/themes/subtheme_name/color

6) Copy

themes/bartik/css/colors.css

to

sites/all/themes/subtheme_name/css/colors.css

7) Now under Appearance>Settings>sub-theme_name you'll get your color wheel.

8) Any further css styling you do in your custom css file:

sites/all/themes/subtheme_name/css/sub-theme.css