Omega/Delta Workshop


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Omega/Delta Workshop

  1. 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. 2. Getting ReadyOmega Documentation: Modules:● Omega Tools● Delta● Context● CtoolsRecommended Tools:● 960 gridder:● Firebug:
  3. 3. Installing Omega Base Theme● Through Drupal Interface● FTP AccessNever enable Omega or Alpha base theme!Important:Make sure "Clean URL" is enabled and Pathmodule is enabled.
  4. 4. Omega - Primary Featurestaken from ● Fully Responsive Grid layouts based on 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. 5. Default Omega Layout ConfigurationHEADER 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. 6. Default Omega Layout ConfigurationCONTENT 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 RegionFOOTER SECTION FOOTER ZONE Footer First Region Footer Second Region
  7. 7. Analyze MockupsUse 960 gridder to figure out the grids layout
  8. 8. Branding Region Menu Region Preface First Region Header First RegionSidebar FirstRegion Postscript First Sidebar Second Footer First Region
  9. 9. Branding Region Tools Menu Menu Region Header Second Region Preface First Region Main Menu Primary MenuSidebar First Content Region Footer First Region
  10. 10. Strategy Workshop Theme (for Secondary Page) Workshop Home Workshop Employment (for Home Page) (for Employment Page)
  11. 11. Layout for Secondary PageHEADER SECTION BRANDING ZONE Branding Region Menu RegionCONTENT SECTION CONTENT ZONE Header Second Region Sidebar First Preface First Region Region Content RegionFOOTER SECTION FOOTER ZONE Footer First Region
  12. 12. Layout for Home PageHEADER SECTION BRANDING ZONE Branding Region Menu Region MENU ZONE Menu Region HEADER ZONE Header First Region Header Second RegionCONTENT SECTION CONTENT ZONE Sidebar First Sidebar First Postscript First Region Region RegionFOOTER SECTION FOOTER ZONE Footer First Region
  13. 13. The Fun Begins!
  14. 14. Creating Omega SubthemeOpen Firefox, go to, turn on 960 gridderLogin to your drupal siteUsing Omega Tools (beginners) ● click on "Create new Omega SubthemeDrush (advanced users) ● cd sites root directory ● enter "drush omega-subtheme mysubthemename"Manually (only if the two options fail!)
  15. 15. 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
  16. 16. MenusCreate 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
  17. 17. BlocksCreate three blocks:● Header Image● Secondary Image● Copyright StatementPagesCreate two pages:● Home● About Us
  18. 18. 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
  19. 19. 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
  20. 20. Apply UMD Wrapper● generate code for wrapper go to>Web Guidelines- >UMD Web Wrapper Code Generator● Copy & Paste the code into file <your theme directory>/templates/html.tpl.php
  21. 21. Customize Omega ThemeNeeds to modify!