A talk given at the 7/7/2010 Drupal NYC meetup.

1. Color Me Flexible
New options for colorable D7 themes
by @stevenmerrill
steven@treehouseagency.com
http://dgo.to/@smerrill

2. The Color Module

3. The Color Module
• Core module

4. The Color Module
• Core module
• New D7 core themes must support it

5. The Color Module
• Core module
• New D7 core themes must support it
• Nearly unchanged from Drupal 5 to 6

9. What’s Changed?

10. What’s Changed?
• Mainly, colors in .png files.

11. What’s Changed?
• Mainly, colors in .png files.
• Lots of information available at
http://drupal.org/node/
108459 regarding exactly
what color.module can do and
how Garland is assembled.

12. What’s Changed?

13. What’s Changed?
• The stylesheet also gets
rewritten.

14. What’s Changed?
• The stylesheet also gets
rewritten.
• CSS files are processed by a
regex that splits up the file into
chunks whenever it finds the
pattern #aaaaaa or #aaa.

15. What’s Changed?
• The stylesheet also gets
rewritten.
• CSS files are processed by a
regex that splits up the file into
chunks whenever it finds the
pattern #aaaaaa or #aaa.
• The CSS parser stops when it
hits a comment with the text
“Color Module: Don’t Touch”.

16. Color Shifting
(Check out the _color_rewrite_stylesheet() and
_color_shift() functions in color.module to see this.)

17. Color Shifting
• A Drupal 5 or 6 theme’s color.inc file
specifies 5 colors: base, link, top,
bottom, text.
(Check out the _color_rewrite_stylesheet() and
_color_shift() functions in color.module to see this.)

18. Color Shifting
• A Drupal 5 or 6 theme’s color.inc file
specifies 5 colors: base, link, top,
bottom, text.
• These determine how colors shift:
(Check out the _color_rewrite_stylesheet() and
_color_shift() functions in color.module to see this.)

19. Color Shifting
• A Drupal 5 or 6 theme’s color.inc file
specifies 5 colors: base, link, top,
bottom, text.
• These determine how colors shift:
• Exact matches are replaced.
(Check out the _color_rewrite_stylesheet() and
_color_shift() functions in color.module to see this.)

20. Color Shifting
• A Drupal 5 or 6 theme’s color.inc file
specifies 5 colors: base, link, top,
bottom, text.
• These determine how colors shift:
• Exact matches are replaced.
• ‘a’ selectors are shifted towards
‘link’.
(Check out the _color_rewrite_stylesheet() and
_color_shift() functions in color.module to see this.)

21. Color Shifting
• A Drupal 5 or 6 theme’s color.inc file
specifies 5 colors: base, link, top,
bottom, text.
• These determine how colors shift:
• Exact matches are replaced.
• ‘a’ selectors are shifted towards
‘link’.
• ‘color: [blah]’ declarations are shifted
towards ‘text’.
(Check out the _color_rewrite_stylesheet() and
_color_shift() functions in color.module to see this.)

22. Color Shifting
• A Drupal 5 or 6 theme’s color.inc file
specifies 5 colors: base, link, top,
bottom, text.
• These determine how colors shift:
• Exact matches are replaced.
• ‘a’ selectors are shifted towards
‘link’.
• ‘color: [blah]’ declarations are shifted
towards ‘text’.
• All others are shifted towards ‘base’.
(Check out the _color_rewrite_stylesheet() and
_color_shift() functions in color.module to see this.)

23. D5 / D6 Shortcomings
Credit: http://www.flickr.com/photos/foxtongue/23281162/

24. D5 / D6 Shortcomings
• Not flexible enough!
Credit: http://www.flickr.com/photos/foxtongue/23281162/

25. D5 / D6 Shortcomings
• Not flexible enough!
• 5 colors tops
Credit: http://www.flickr.com/photos/foxtongue/23281162/

26. D5 / D6 Shortcomings
• Not flexible enough!
• 5 colors tops
• Special meanings for most
Credit: http://www.flickr.com/photos/foxtongue/23281162/

27. D5 / D6 Shortcomings
• Not flexible enough!
• 5 colors tops
• Special meanings for most
• Image recoloring is not always
the answer
Credit: http://www.flickr.com/photos/foxtongue/23281162/

28. D5 / D6 Shortcomings
• Not flexible enough!
• 5 colors tops
• Special meanings for most
• Image recoloring is not always
the answer
• Hardcoded preview HTML
and JavaScript
Credit: http://www.flickr.com/photos/foxtongue/23281162/

29. What Themers Want
Credit: http://www.flickr.com/photos/pinksherbet/3528623354/

30. What Themers Want
• More colors!
Credit: http://www.flickr.com/photos/pinksherbet/3528623354/

31. What Themers Want
• More colors!
• Customizable labels for said
colors
Credit: http://www.flickr.com/photos/pinksherbet/3528623354/

32. What Themers Want
• More colors!
• Customizable labels for said
colors
• Use of CSS3 gradients and
progressive enhancement
Credit: http://www.flickr.com/photos/pinksherbet/3528623354/

33. What Themers Want
• More colors!
• Customizable labels for said
colors
• Use of CSS3 gradients and
progressive enhancement
• “Quality meals at affordable
prices”
– (http://dgo.to/@johnvsc)
Credit: http://www.flickr.com/photos/pinksherbet/3528623354/

34. Improvements in D7
All these examples are in Bartik’s color.inc, which is now in D7 core. Huzzah!

35. Improvements in D7
• An unlimited number of
customizable colors with
labels that show up in the UI.
All these examples are in Bartik’s color.inc, which is now in D7 core. Huzzah!

36. Improvements in D7
• An unlimited number of
customizable colors with
labels that show up in the UI.
• ‘base’, ‘link’ and ‘text’ still
maintain their magic color-
shifting prowess.
All these examples are in Bartik’s color.inc, which is now in D7 core. Huzzah!

37. Customizable Previews
Same deal. Check our core CVS.

38. Customizable Previews
• Each theme may now provide
its own preview HTML, CSS
and JavaScript files.
Same deal. Check our core CVS.

39. Garland’s Preview HTML

40. Garland’s Preview HTML
• Three divs

41. Garland’s Preview HTML
• Three divs
• An h2

42. Garland’s Preview HTML
• Three divs
• An h2
•Ap

43. Garland’s Preview HTML
• Three divs
• An h2
•Ap
• An a

44. Bartik’s Preview

45. Bartik’s Preview
• A tad bit more.

46. Bartik, cont’d

47. Bartik, cont’d
• Hi-fidelity live preview

48. Bartik, cont’d
• Hi-fidelity live preview
• Includes your site’s logo

49. Bartik, cont’d
• Hi-fidelity live preview
• Includes your site’s logo
• JS magic at the top of
color.inc

50. Not In Use

51. Not In Use
• PNG recoloring

52. Not In Use
• PNG recoloring
• color.module gradients

53. Not In Use
• PNG recoloring
• color.module gradients
• base color shifting

54. CSS3!
We don’t need no stinkin’ PNG files.

55. Limitations / D8 Roadmap

56. Limitations / D8 Roadmap
• Colors must be unique to be
searched and replaced

57. Relevant Issues
• http://drupal.org/node/683026
• http://drupal.org/node/833154
• http://drupal.org/node/769922
• http://drupal.org/node/762462
• http://drupal.org/node/801446
• http://drupal.org/node/762474
I know you love reading issue queues.

58. Relevant Issues
• http://drupal.org/node/776684
• http://drupal.org/node/778880
• http://drupal.org/node/693504
• http://drupal.org/node/700170
• http://drupal.org/node/762468
• http://drupal.org/node/845742
I sure do.

59. Thanks
Community plumbing, baby.

60. Thanks
• @jensimmons and the whole international group
who worked on Bartik
Community plumbing, baby.

61. Thanks
• @jensimmons and the whole international group
who worked on Bartik
• Members of the Busy and Corolla groups who
chimed in on these issues
Community plumbing, baby.

62. Thanks
• @jensimmons and the whole international group
who worked on Bartik
• Members of the Busy and Corolla groups who
chimed in on these issues
• Dries and webchick for committing
color.module patches
Community plumbing, baby.

63. Questions?