This document discusses how modules can help with theming in Drupal without needing to learn CSS. It recommends several modules that can assist with common theming tasks like color, typography, layout and images. Color and Font Your Face allow changing theme colors and fonts easily. Display Suite provides a drag and drop interface for layouts. Gallery Formatter turns image fields into galleries. While theming directly in code is difficult, modules get users 90% of the way to a theme. The document encourages learning from the large Drupal community for help with remaining challenges.

1. No CSS Needed:
A Sitebuilders' Guide to
Theming
@sparklingrobots

2. Hi, I'm Tara.
Tara King
@sparklingrobots
Sparkling Robots Design
Cruiskeen Consulting

3. Our journey:
1) Why is theming so hard, and how
are modules easier?
2) Which modules can help with
theming?
3) How can you start learning more?
4) How can Drupal help people like us,
and how can we help Drupal?

4. Our journey:
1) Why is theming so hard, and
how are modules easier?
2) Which modules can help with theming?
3) How can you start learning more?
4) How can Drupal help people like us, and how
can we help Drupal?

5. Why is theming so hard?
php, CSS, HTML, SASS, SMACSS,
jQuery, mobile-friendly ...and more

6. How are modules easier?
CHEAP, FAST, OR GOOD:
CHOOSE TWO.
It's fast! It's cheap!
It's not terrible!

7. Why are modules easier?
Modules get you 90% of the way
toward a theme much faster
than learning front-end
development gets you 100% of
the way.

8. Why is this better?
● It's the Drupal way! You
take advantage of
contributed code, it's
easier to maintain, and
it's free.

9. Why Drupal?
● Views
● Time-sensitive content
● Media handling
● ...Overall flexibility!

10. Our journey:
1) Why is theming so hard, and how are
modules better?
2) Which modules can help
with theming?
3) How can you start learning more?
4) How can Drupal help people like us, and how
can we help Drupal?

11. Modules are easy.
1) Color
2) Font-your-face
3) Background Images
4) Display Suite
5) Gallery Formatter/
Lightbox2

12. Elements of Design
1) Color
2) Typography
3) Texture
source: some DrupalConPDX session

13. Color
"The Color module allows you to
easily change the color of links,
backgrounds, text, and other theme
elements."
source: https://drupal.
org/documentation/modules/color

14. Color
"I have tried for weeks to make garland just be black. I
am new also but I tried many things. I have seen
others looking for the same. I can tell you that there is
not likely an easy answer.... I kept thinking I was very
close, but I give up. Too much wasted time. "
-darrellleerogers on drupal.org

15. Let's recolor Bartik!

16. Let's recolor Bartik!
The old way:
Use search and replace in the
subtheme to put your new
colors in the theme files. Grow
frustrated when you realize
you missed a slight variant.
Or....learn SASS.

17. Color: the new way.

18. Color!

19. Color?

20. Color help!
www.colorschemedesigner.com

21. Color-enabled themes.
-Bartik (D7 default)
-Tej (Omega subtheme) drupal.org/project/tej
-Sky drupal.org/project/sky
-Corporate Clean drupal.org/project/corporateclean
-Gratis drupal.org/project/gratis
-Mix and Match drupal.org/project/mix_and_match

22. Elements of Design
1) Color
2) Typography
3) Texture
source: some DrupalConPDX session

23. @font-your-face
Typography
"@font-your-face provides an
administrative interface for
browsing and applying web fonts
from a variety of sources."
source: https://drupal.org/project/fontyourface

24. @font-your-face
● Typekit.com
● Google Fonts
● Font Squirrel
● Fontdeck
● Fonts.com
● Adobe Edge Web Fonts
● Local fonts
source: https://drupal.org/project/fontyourface

25. The old way:
Use the CSS @font-face
rule.
Let's use a new typeface!

26. @font-your-face

27. @font-your-face

28. @font-your-face:
Group selectors

29. @font-your-face

30. @font-your-face:
Custom Selectors

31. @font-your-face:
Custom Selectors

32. @font-your-face

33. Where we started:

34. Where we are now:

35. Elements of Design
1) Color
2) Typography
3) Texture
source: some DrupalConPDX session

36. Background Images
Texture
"Background images allows users to
add background images to html
elements on pages of the site."
source: https://drupal.org/project/bg_image

37. Elements of
Drupal Design
1) Color
2) Typography
3) Texture
4) Layout
source: some DrupalConPDX session and me

38. Layout
1) Display Suite
2) Gallery Formatter/
Lightbox2

39. Layout
1) Display Suite
2) Gallery Formatter/
Lightbox2

40. Display Suite
"Display Suite allows you to take full control
over how your content is displayed using a
drag and drop interface. Arrange your
nodes, views, comments, user data etc. the
way you want without having to work your
way through dozens of template files. "
source: https://drupal.org/project/ds

41. Default Layout.

42. Default Display
Options.

43. Display Suite.
Pick your layout:

44. Display Suite.
New options in "Manage display":

45. Display Suite.

46. Display Suite.
Free intro to Display Suite!
drupalize.me/series/display-suite-drupal-7
Kristof De Jaeger

47. Layout
1) Display Suite
2) Gallery Formatter/
Lightbox2

48. Gallery Formatter
"Gallery formatter will turn any
image field into a jQuery Gallery."
source: https://drupal.org/project/galleryformatter

49. Gallery Formatter

50. Gallery Formatter

51. Lightbox2
"The Lightbox2 module overlays
images on the current page."
source: https://drupal.org/project/lightbox2

52. Gallery Formatter + Lightbox2

53. Our journey:
1) Why is theming so hard, and why do I think
modules are better?
2) Which modules can help with theming?
3) How can you start learning
more?
4) How can Drupal help people like us, and how
can we help Drupal?

54. Advanced Beginner
Tools
● Omega
● Panels
● Context

55. Advanced Beginner
Tools
Omega - "Omega 3 is best suited to those who
like to build their themes through the user
interface. The theme’s layout can be modified
through the theme settings and then
contextually changed (different layouts/settings
for various portions of a site)."
source: https://drupal.org/project/omega

56. Advanced Beginner
Tools
Panels - "The Panels module allows a site
administrator to create customized layouts for
multiple uses. At its core it is a drag and drop
content manager that lets you visually design a
layout and place content within that layout."
source: https://drupal.org/project/panels

57. Advanced Beginner
Tools
Context - "Context allows you to manage contextual
conditions and reactions for different portions of your
site. For each context, you can choose the conditions
that trigger this context to be active and choose
different aspects of Drupal that should react to this
active context."
source: https://drupal.org/project/context

58. Our journey:
1) Why is theming so hard, and why do I think
modules are better?
2) Which modules can help with theming?
3) How can you start learning more?
4) How can Drupal help people
like us, and how can we help
Drupal?

59. Drupal is
pretty
confusing...

60. ...but it's also
pretty great.
source: me

61. Drupal has 27,782
developers.
Let them help you!
source: drupal.org

62. Confession time.

63. ??

64. Thank you.
@sparklingrobots
tara@sparklingrobots.com