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
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.
Omega - Primary Featurestaken 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.
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
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
Analyze MockupsUse 960 gridder to figure out the grids layout
Branding Region Menu Region Preface First Region Header First RegionSidebar FirstRegion Postscript First Sidebar Second Footer First Region
Branding Region Tools Menu Menu Region Header Second Region Preface First Region Main Menu Primary MenuSidebar First Content Region Footer First Region
Strategy Workshop Theme (for Secondary Page) Workshop Home Workshop Employment (for Home Page) (for Employment Page)
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
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
Creating Omega SubthemeOpen Firefox, go to devel.arhu.umd.edu, 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!)
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
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
BlocksCreate three blocks:● Header Image● Secondary Image● Copyright StatementPagesCreate two pages:● Home● About Us
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