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
MobileActOsaka_250704.pdf
Avatar for AKAI Tadaaki akaitadaaki
0
130
ゼロからはじめる採用広報
Avatar for Yuta Horii yutadayo
3
960
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for jackal5647 aaguide
0
230
Glacierだからってコストあきらめてない？ / JAWS Meet Glacier Cost
Avatar for sasaki taishin
1
170
AWS Organizations 新機能！マルチパーティ承認の紹介
Avatar for yhana yhana
1
280
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
Avatar for iwamot iwamot
PRO
2
150
PO初心者が考えた ”POらしさ”
Avatar for (Ha)rady nb_rady
0
210
怖くない！はじめてのClaude Code
Avatar for Shinya Masadome（東京AI祭） shinya337
0
400
タイミーのデータモデリング事例と今後のチャレンジ
Avatar for Toshiki Tsuchikawa ttccddtoki
6
2.4k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
3
17k
AIは精算業務をどう変える？ 自律型エージェントが実現する未来のワークフロー / RAKUS AI Meetup-1
Avatar for Rakus_Dev rakus_dev
0
120
AIの全社活用を推進するための安全なレールを敷いた話
Avatar for ShoheiMitani shoheimitani
2
540

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k

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?