• Save
Color Me Flexible
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Color Me Flexible

  • 1,622 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,622
On Slideshare
1,506
From Embeds
116
Number of Embeds
5

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 116

http://treehouseagency.com 68
http://localhost 23
http://coderwall.com 14
http://www.phase2technology.com 10
http://www.treehouseagency.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

















































Transcript

  • 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
  • 6. What’s Changed?
  • 7. What’s Changed? • Mainly, colors in .png files.
  • 8. 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.
  • 9. What’s Changed?
  • 10. What’s Changed? • The stylesheet also gets rewritten.
  • 11. 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.
  • 12. 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”.
  • 13. Color Shifting (Check out the _color_rewrite_stylesheet() and _color_shift() functions in color.module to see this.)
  • 14. 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.)
  • 15. 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.)
  • 16. 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.)
  • 17. 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.)
  • 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: • 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.)
  • 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. • ‘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.)
  • 20. D5 / D6 Shortcomings Credit: http://www.flickr.com/photos/foxtongue/23281162/
  • 21. D5 / D6 Shortcomings • Not flexible enough! Credit: http://www.flickr.com/photos/foxtongue/23281162/
  • 22. D5 / D6 Shortcomings • Not flexible enough! • 5 colors tops Credit: http://www.flickr.com/photos/foxtongue/23281162/
  • 23. D5 / D6 Shortcomings • Not flexible enough! • 5 colors tops • Special meanings for most Credit: http://www.flickr.com/photos/foxtongue/23281162/
  • 24. 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/
  • 25. 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/
  • 26. What Themers Want Credit: http://www.flickr.com/photos/pinksherbet/3528623354/
  • 27. What Themers Want • More colors! Credit: http://www.flickr.com/photos/pinksherbet/3528623354/
  • 28. What Themers Want • More colors! • Customizable labels for said colors Credit: http://www.flickr.com/photos/pinksherbet/3528623354/
  • 29. 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/
  • 30. 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/
  • 31. Improvements in D7 All these examples are in Bartik’s color.inc, which is now in D7 core. Huzzah!
  • 32. 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!
  • 33. 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!
  • 34. Customizable Previews Same deal. Check our core CVS.
  • 35. Customizable Previews • Each theme may now provide its own preview HTML, CSS and JavaScript files. Same deal. Check our core CVS.
  • 36. Garland’s Preview HTML
  • 37. Garland’s Preview HTML • Three divs
  • 38. Garland’s Preview HTML • Three divs • An h2
  • 39. Garland’s Preview HTML • Three divs • An h2 •Ap
  • 40. Garland’s Preview HTML • Three divs • An h2 •Ap • An a
  • 41. Bartik’s Preview
  • 42. Bartik’s Preview • A tad bit more.
  • 43. Bartik, cont’d
  • 44. Bartik, cont’d • Hi-fidelity live preview
  • 45. Bartik, cont’d • Hi-fidelity live preview • Includes your site’s logo
  • 46. Bartik, cont’d • Hi-fidelity live preview • Includes your site’s logo • JS magic at the top of color.inc
  • 47. Not In Use
  • 48. Not In Use • PNG recoloring
  • 49. Not In Use • PNG recoloring • color.module gradients
  • 50. Not In Use • PNG recoloring • color.module gradients • base color shifting
  • 51. CSS3! We don’t need no stinkin’ PNG files.
  • 52. Limitations / D8 Roadmap
  • 53. Limitations / D8 Roadmap • Colors must be unique to be searched and replaced
  • 54. 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.
  • 55. 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.
  • 56. Thanks Community plumbing, baby.
  • 57. Thanks • @jensimmons and the whole international group who worked on Bartik Community plumbing, baby.
  • 58. 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.
  • 59. 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.
  • 60. Questions?