INTRODUCTION TO DRUPAL THEMING Chris Gross & Melissa Miller - - PowerPoint PPT Presentation

▶

Apr 18, 2023 477 likes •805 views

INTRODUCTION TO DRUPAL THEMING Chris Gross & Melissa Miller OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH BUILD A SUB-THEME RESPONSIVE DESIGN OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH BUILD A

SLIDE 1

INTRODUCTION TO DRUPAL THEMING

Chris Gross & Melissa Miller

SLIDE 2

OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH BUILD A SUB-THEME RESPONSIVE DESIGN

SLIDE 3

SLIDE 4

OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH BUILD A SUB-THEME RESPONSIVE DESIGN

SLIDE 5

getfirebug.com chrispederick.com/work/web-developer/

Firebug Web Developer Toolbar

SLIDE 6

acquia.com/downloads Dev Desktop

SLIDE 7

Devel module

drupal.org/project/devel

SLIDE 8

OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH BUILD A SUB-THEME RESPONSIVE DESIGN

SLIDE 9

SLIDE 10

OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH BUILD A SUB-THEME RESPONSIVE DESIGN

SLIDE 11

DON'T HACK CORE

SLIDE 12

OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH BUILD A SUB-THEME RESPONSIVE DESIGN

SLIDE 13

DON'T HACK CORE

SLIDE 14

SLIDE 15

Get More Themes

drupal.org/project/Themes

SLIDE 16

OVERVIEW GETTING STARTED ANATOMY OF A THEME START FROM SCRATCH BUILD A SUB-THEME RESPONSIVE DESIGN

SLIDE 17

SLIDE 18

SLIDE 19

SLIDE 20

SLIDE 21

mega.developmentgeeks.com

SLIDE 22

SLIDE 23

1. global.css

SLIDE 24

1. global.css
2. yourtheme-alpha-default.css

SLIDE 25

1. global.css
2. yourtheme-alpha-default.css
3. yourtheme-alpha-default-narrow.css

SLIDE 26

1. global.css
2. yourtheme-alpha-default.css
3. yourtheme-alpha-default-narrow.css
4. yourtheme-alpha-default-normal.css

SLIDE 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

SLIDE 28 #page

SLIDE 29 #page #section-header #section-content #section-footer

SLIDE 30 #page #section-header #section-content #section-footer #zone-header #zone-preface #zone-content #zone-footer

SLIDE 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

SLIDE 32

Questions?