Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Introduction to Drupal Theming

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

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

More Decks by M Miller

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

Other Decks in Technology

See All in Technology
M5Stackで作る BLEマウス GPSログの世界
Avatar for tomokusaba tomokusaba
PRO
0
440
古い指輪から広がった JAVA コミュニティ とのつながり
Avatar for Daisuke Yamazaki yamad
0
130
Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
Avatar for Shoichi Ochi occhi
1
720
分析の民主化を支えるメタデータ整備の実践
Avatar for KAKEHASHI kakehashi
PRO
4
1.4k
ソフトウェア ファクトリー - 再現性のあるソフトウェアの工場づくり / Software factory
Avatar for Takahiro Ikeuchi iktakahiro
6
5k
Classmethod Company Deck
Avatar for Satoshi7 satoshi7
1
730
エンタメ企業のM&Aを支えるデータ基盤 ― 統合から店舗のリアルタイム分析まで / Data Engineering Summit 2026
Avatar for GENDA genda
0
190
実践！ SRE × AI - ABEMA における AIOps -
Avatar for tetsuya28 tetsuya28
8
3.1k
"優秀な誰か"の下位互換にならないために
Avatar for Yuto Nagai(Future) yut0naga1_fa
1
1.8k
1つのリクエストを追って理解する - llm-dのP/D分離
Avatar for akhino akhino
1
160
DGX Spark でどこまでハッキングができるのか？
Avatar for kash1064 kash1064
3
1.4k
AI × アーキテクト 第1・2章｜生成AIの課題とアーキテクトの素養
Avatar for Daisuke Motoki daidaidai
0
180

Featured

See All Featured
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
4
540
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
2
6.3k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
520
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6.1k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
142
7.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.5k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
260
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
460

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?