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

Introduction to Drupal Theming

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for M Miller M Miller
November 30, 2012
Technology
0
70

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

Other Decks in Technology

See All in Technology
データマネジメント戦略Night - 4社のリアルを語る会
Avatar for Tatsuya Koreeda ktatsuya
1
420
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k
GitHub Advanced Security × Defender for Cloudで開発とSecOpsのサイロを超える: コードとクラウドをつなぐ、開発プラットフォームのセキュリティ
Avatar for yuriemori yuriemori
1
110
「お金で解決」が全てではない！大規模WebアプリのCI高速化 #phperkaigi
Avatar for すてにゃん stefafafan
5
2.4k
スケーリングを封じられたEC2を救いたい
Avatar for いのうえ senseofunity129
0
110
【社内勉強会】新年度からコーディングエージェントを使いこなす - 構造と制約で引き出すClaude Codeの実践知
Avatar for nwiizo nwiizo
27
13k
イベントで大活躍する電子ペーパー名札を作る（その２） 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
Avatar for you（@youtoy） you
PRO
0
210
「通るまでRe-run」から卒業！落ちないテストを書く勘所
Avatar for asumikam asumikam
2
780
ADK + Gemini Enterprise で 外部 API 連携エージェント作るなら OAuth の仕組みを理解しておこう
Avatar for Kaz kaz1437
0
220
Phase05_ClaudeCode入門
Avatar for overflow ,Inc overflowinc
0
2.4k
20年以上続く PHP 大規模プロダクトを Kubernetes へ ── クラウド基盤刷新プロジェクトの4年間
Avatar for Yuichi Sugiyama oogfranz
PRO
0
320
Phase09_自動化_仕組み化
Avatar for overflow ,Inc overflowinc
0
1.9k

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Design in an AI World
Avatar for tapps tapps
0
180
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
300
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
160
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
64
54k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.4k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.5k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.1k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
190
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k

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?