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

Introduction to Drupal Theming

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
32
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
Bet AI Day 2026丨Production-Ready AI Agents — エンタープライズの実務を任せるための設計と運用
Avatar for LayerX layerx
PRO
2
1.2k
全社に広がるMCPサーバーを、 どう安全に管理するか MCPass開発の舞台裏
Avatar for k.muguruma mtpooh
3
220
[RSJ26] Flow as Flow: Modeling Robot Velocity Fields as Probability Velocity Fields
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
170
IHV like なユースケースへのOpenID Connect 関連仕様の適用事例
Avatar for OPTiM optim
0
440
EMの役割で 変わったこと・変わらなかったこと
Avatar for SansanTech sansantech
PRO
1
230
AI × Datadog MCP でコスト削減まで実現した Metric Streams の導入
Avatar for guchim three_mouth_ago
0
140
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
2
7.8k
顧客の要望は2次情報である 〜アンテナを張るFDEの構造論〜
Avatar for Noriaki Oji noriakioji
5
1.1k
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
3
8.3k
[2026-08-25]AIによる自動化と人の介入、その狭間で揺れる信頼性についての俺の思いを、波よ聞いてくれ
Avatar for tosite tosite
0
120
AIエージェントを雇う前に決める5つのこと
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
1
130
Hub & Spoke 環境のネットワークルーティングを分解してみる
Avatar for Tsuyataku tsuyataku
1
490

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
410
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
270
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k

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?