Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Drupal Theming

Avatar for M Miller M Miller
November 30, 2012
Technology
0
68

Introduction to Drupal Theming

Presented at Drupal Camp Ohio on November 30, 2012. (with co-presenter Chris Gross)
Avatar for M Miller

M Miller

November 30, 2012
Tweet

More Decks by M Miller

See All by M Miller
Hack_Storybook_BADCamp_2022.pdf
Avatar for M Miller melmiller
0
22
Design in 30 Minutes
Avatar for M Miller melmiller
3
160
A Beginner's Guide to Drupal Site Building
Avatar for M Miller melmiller
0
91
Absolute Beginner's Guide to Site Building
Avatar for M Miller melmiller
1
120

Other Decks in Technology

See All in Technology
20250707-AI活用の個人差を埋めるチームづくり
Avatar for shnjtk shnjtk
6
3.9k
AI エージェントと考え直すデータ基盤
Avatar for na0 na0
2
820
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for jackal5647 aaguide
0
250
FOSS4G 2025 KANSAI　QGISで点群データをいろいろしてみた
Avatar for kou_kita kou_kita
0
400
LangChain Interrupt & LangChain Ambassadors meetingレポート
Avatar for os1ma os1ma
2
320
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
140
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
7.9k
タイミーのデータモデリング事例と今後のチャレンジ
Avatar for Toshiki Tsuchikawa ttccddtoki
6
2.4k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
Avatar for sergicalsix sergicalsix
1
240
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
Avatar for yut yu_kod
1
280
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
Avatar for Phil Huang pichuang
0
280
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
Avatar for ymrl ymrl
2
210

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
690
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k

Transcript

  1. INTRODUCTION TO DRUPAL THEMING Chris Gross & Melissa Miller

  2. OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH

    BUILD A SUB-THEME RESPONSIVE DESIGN
  3. None

  4. OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH

    BUILD A SUB-THEME RESPONSIVE DESIGN

  5. getfirebug.com chrispederick.com/work/web-developer/ Firebug Web Developer Toolbar

  6. acquia.com/downloads Dev Desktop

  7. Devel module drupal.org/project/devel

  8. OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH

    BUILD A SUB-THEME RESPONSIVE DESIGN
  9. None

  10. OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH

    BUILD A SUB-THEME RESPONSIVE DESIGN

  11. DON'T HACK CORE

  12. OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH

    BUILD A SUB-THEME RESPONSIVE DESIGN

  13. DON'T HACK CORE

  14. None

  15. Get More Themes drupal.org/project/Themes

  16. OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH

    BUILD A SUB-THEME RESPONSIVE DESIGN
  17. None
  18. None
  19. None
  20. None

  21. omega.developmentgeeks.com

  22. None

  23. 1. global.css

  24. 1. global.css 2. yourtheme-alpha-default.css

  25. 1. global.css 2. yourtheme-alpha-default.css 3. yourtheme-alpha-default-narrow.css

  26. 1. global.css 2. yourtheme-alpha-default.css 3. yourtheme-alpha-default-narrow.css 4. yourtheme-alpha-default-normal.css

  27. 1. global.css 2. yourtheme-alpha-default.css 3. yourtheme-alpha-default-narrow.css 4. yourtheme-alpha-default-normal.css 5. yourtheme-alpha-default-wide.css

  28. #page

  29. #page #section-header #section-content #section-footer

  30. #page #section-header #section-content #section-footer #zone-header #zone-preface #zone-content #zone-footer

  31. #page #section-header #section-content #section-footer #zone-header #zone-preface #zone-content #zone-footer #region-logo #region-menu

    #region-feature #region-content #region-sidebar #region-footer1 #region-footer2 #region-footer3

  32. Questions?