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
69

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
24
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
92
Absolute Beginner's Guide to Site Building
Avatar for M Miller melmiller
1
120

Other Decks in Technology

See All in Technology
Retrospectiveを振り返ろう
Avatar for なかしょ nakasho
0
140
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
Avatar for 10xinc 10xinc
7
1.5k
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
Avatar for Leko leko
2
200
Observability — Extending Into Incident Response
Avatar for Narimichi Takamura nari_ex
1
590
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
Avatar for Akira Shimosako simosako
2
500
データとAIで明らかになる、私たちの課題 ~Snowflake MCP,Salesforce MCPに触れて~ / Data and AI Insights
Avatar for 株式会社カオナビ kaonavi
0
170
Azure Well-Architected Framework入門
Avatar for tomokusaba tomokusaba
1
150
DSPy入門
Avatar for TomuHirata tomehirata
6
660
GPUをつかってベクトル検索を 扱う手法のお話し ~NVIDIA cuVSとCAGRA~
Avatar for fshuhe fshuhe
0
280
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
Avatar for katsuhisa_ katsuhisa91
PRO
3
1.5k
東京大学「Agile-X」のFPGA AIデザインハッカソンを制したソニーのAI最適化
Avatar for ソニー株式会社 sony
0
170
serverless team topology
Avatar for kensh _kensh
3
250

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k

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?