Your SlideShare is downloading. ×
Color Me Flexible
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Color Me Flexible

1,050
views

Published on

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

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

Published in: Technology, Art & Photos

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,050
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

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?