The document outlines steps for configuring the Omega theme and related modules like Delta and Context to create customized responsive themes for a Drupal site, including installing Omega as a base theme, configuring zones and regions, creating menus and pages, setting up Delta and Context configurations for different layouts, and customizing stylesheets.

1. Omega & Delta Workshop
● Quick Intro to Omega
● Omega Configuration (for secondary page)
● Delta & Context Configuration (for home page)
● Save CSS for last
● Stick with Omega basics!
● Touch on responsive design but not doing it

2. Getting Ready
Omega Documentation: http://drupal.org/node/819164
Recommended Modules:
● Omega Tools
● Delta
● Context
● Ctools
Recommended Tools:
● 960 gridder: http://peol.github.com/960gridder
● Firebug: http://getfirebug.com

3. Installing Omega Base Theme
● Through Drupal Interface
● FTP Access
Never enable Omega or Alpha base theme!
Important:
Make sure "Clean URL" is enabled and Path
module is enabled.

4. Omega - Primary Features
taken from http://drupal.org/project/omega
● Fully Responsive Grid layouts based on 960.gs standards.
● 12, 16, 24 Column Layouts built in.
● Performance enhancements, making Omega the best performing base theme to date.
● HTML5 and XHTML Starterkits
● Content first layouts with push/pull classes.
● Quickly disable groups of and individual regions and zones.
● Every region/zone size and placement configurable.
● Apply custom CSS classes to any region/zone.
● Enable/Disable CSS from both Omega, Drupal core and contributed modules.
● Create contextual layouts with the Delta module.

5. Default Omega Layout Configuration
HEADER SECTION
USER ZONE
User Bar First Region User Bar Second Region
BRANDING ZONE
Branding Region
MENU ZONE
Menu Region
HEADER ZONE
Header First Region Header Second Region

6. Default Omega Layout Configuration
CONTENT SECTION
PREFACE ZONE
Preface First Region Preface Second Region Preface Third Region
CONTENT ZONE
Sidebar First Sidebar Second
Content Region
Region Region
POSTSCRIPT ZONE
Postscript First Postscript Second Postscript Third Postscript Fourth
Region Region Region Region
FOOTER SECTION
FOOTER ZONE
Footer First Region
Footer Second Region

7. Analyze Mockups
Use 960 gridder to figure out the grids layout

9. Branding Region
Menu Region
Preface First Region
Header First Region
Sidebar First
Region
Postscript First Sidebar Second
Footer First Region

10. Branding Region Tools Menu
Menu Region
Header Second Region
Preface First Region
Main Menu
Primary Menu
Sidebar First Content Region
Footer First Region

11. Strategy
Workshop Theme
(for Secondary
Page)
Workshop Home Workshop Employment
(for Home Page) (for Employment Page)

12. Layout for Secondary Page
HEADER SECTION
BRANDING ZONE
Branding Region Menu Region
CONTENT SECTION
CONTENT ZONE
Header Second Region
Sidebar First Preface First Region
Region
Content Region
FOOTER SECTION
FOOTER ZONE
Footer First Region

13. Layout for Home Page
HEADER SECTION
BRANDING ZONE
Branding Region Menu Region
MENU ZONE
Menu Region
HEADER ZONE
Header First Region Header Second Region
CONTENT SECTION
CONTENT ZONE
Sidebar First Sidebar First
Postscript First Region
Region Region
FOOTER SECTION
FOOTER ZONE
Footer First Region

14. The Fun Begins!

15. Creating Omega Subtheme
Open Firefox, go to devel.arhu.umd.edu, turn on 960 gridder
Login to your drupal site
Using Omega Tools (beginners)
● click on "Create new Omega Subtheme
Drush (advanced users)
● cd site's root directory
● enter "drush omega-subtheme mysubthemename"
Manually (only if the two options fail!)

16. Omega Configuration
● Enable and set as default theme
● Start with Secondary Page
○ Grid Settings
○ Zone & region configuration
○ Debugging
○ Toggle libraries
○ Toggle styles
○ Toggle advanced elements
● Save configuration

17. Menus
Create three menus:
○ Main Menu:
■ Undergraduate
■ Graduate
■ Faculty & Staff
■ Alumni
■ Visitors
○ Tools Menu:
■ Employment
■ Login (path: user/login)
■ Logout (path: user/logout)
○ Primary Menu:
■ Home
■ About Us
■ Admissions
■ Academic Programs

18. Blocks
Create three blocks:
● Header Image
● Secondary Image
● Copyright Statement
Pages
Create two pages:
● Home
● About Us

19. Delta & Context
● Creating theme for Home Page
○ Click on Delta tab
○ Click on Add
○ Enter Title, pick a theme
○ Configure Home Page layout
● Click on Modules
○ Search for Contextual

20. CSS
● Omega 3.x page structure: http://ivanchaquea.
com/docs/omega-page-structure.png
● CSS Layers: global->default->narrow-
>normal->wide
● global.css = global
● yoursubthemename-alpha-default.css = default
● yoursubthemename-alpha-default-narrow.css = narrow
● yoursubthemename-alpha-default-normal.css = normal
● yoursubthemename-alpha-default-wide.css = wide

21. Apply UMD Wrapper
● generate code for wrapper
go to www.umd.edu->Web Guidelines-
>UMD Web Wrapper Code Generator
● Copy & Paste the code into file <your theme
directory>/templates/html.tpl.php

22. Customize Omega Theme
Needs to modify omega.info!