• With Drupal 7, we have chosen the Omega
theming framework for developing new and
• Omega operates differently compared to
Zen (our framework for D6 and early D7
• Project Site
What’s the Big Change
in Drupal 7?
• Theming has always been a combination of
CSS and HTML/PHP.
• Working with Omega is similar to
Moodle theming, Drupal 6 theming.
• The main difference is that you’re theming
to an adaptive site, which means that your
approach to theming should be altered
• What adaptive means is that the page
rendering is dependent on the browser
• Mobile versions.
• Small screen-sizes.
• Large screen-sizes.
• See Google Mail and DrupalCon 2012.
• With Omega, your theme building should
be primarily concerned with CSS and
• Site layouts are integrated into Omega (1
sidebar, 2 sidebar, no sidebar).
• Footers and headers (even prefaces and
post-scripts) are aplenty.
Just CSS? Great!
• What this means is that your themes will
be primarily composed of CSS ﬁles and
images, with little (if any) tinkering
of .tpl.php ﬁles.
• .tpl.php Files - the “templates” to pages
(such as headers, content).
• Elements should be hidden with CSS.
Your First Theme
• Building your ﬁrst theme with Omega is
going to be like going out on a ﬁrst date.
• You’re going to be nervous to make
changes, and jittery about making big
• You’re going to be careful in what you do.
• But you shouldn’t worry. Why?
Saving the Day
• Omega is built so that if you run into
issues, you can leave to go “answer an
• Omega provides you a framework so that
the core of the styling is never adjusted.
• That way, you can’t break the underlying
magic that makes the adaptive theming
• Omega (core)
• Alpha (core base-theme)
• Your Theme!
• These are included in the Omega project
download, so stop worrying and jump right
• Before we begin, download Acquia Dev
• It’s a package that builds a web-server for
your local machine (also known as an
• Install Drupal, set up your local user
• Download the Omega Project from
• Grab the stable recommended releases.
• Development releases may change
between commits, and future
functionality may not be present in
• Within the Omega package, there is a
folder called starterkits.
• Rename the omega-html5 folder to the
name of your theme.
• Do the same for the .info ﬁle and each of
the .css ﬁles in the /css folder.
• You’ve created a theme!
• Making these changes will allow your
subtheme to show up on your Drupal site
if you place the theme in the themes/
• Your subtheme requires Omega and
Alpha to be in themes/ as well, so add
• Omega Tools is a fantastic module for local
development that allows you to:
• Custom Setup of Omega Sub-Themes
rather than the process outlined.
• Exporting Theme Settings to .info.
• Reverting Theme Settings, if you make a
• I suggest working with a CSS compiler such
as LESS or SASS.
• This allows you to use custom variables
for colors and commonly-used attributes.
• It simpliﬁes CSS3 elements so that the
styling is optimized for all browsers.
• One word of caution for using compilers.
• Changes to CSS will take longer to make
due to having to recompile and place in
• SASS requires Ruby.
• Using Compass as your CSS editor may
save you a lot of headache.
• There are also plugins for Drupal that
take .sass or .less uncompiled styling and
compiles the styling on the server.
• Requires Ruby to be installed on the
Theming within Omega
• Theming (CSS work) in Omega is
• Your mobile CSS will be inherited
throughout the other layout sizes unless
you specify otherwise through
• Since mobile theming may be styled
differently, this can be a headache.
CSS Hierarchy Phase 2
• Theming is determined in this way:
• Mobile Theming CSS
• Default CSS
• CSS for Narrow layout.
• CSS for Normal layout.
• CSS for Wide layout.
What do I theme?
• Enable your Drupal Omega subtheme.
• Now, enable the Debugging Blocks for
• This will display all the available blocks
Omega provides you, which are disabled if
the block area is empty.
How do I ﬁnd
• Chrome + Inspector =Your best friend.
• From any page on Drupal with the
debugging elements exposed, right click on
the element and select Inspect Element.
• Theming just became 1000% easier.
• With this information, you can theme.
• Find out which element you want to
theme, open up the CSS ﬁle you want to
work with, and go to work!
How to Theme
• Each page in Omega is composed of:
• Which aspect you select depends on what
parts of the page you want the CSS to
• Wrappers are the binding glue of each
• Zones encompass only where text and
content can go.
Theming - Sizing
• What this means is that wrappers should
not be touched for width adjustment. Ever.
• Wrappers are controlled by the Omega
and Alpha themes for sizing and
• You should not be overwriting width: and
height: for these.
• Do it for Zones instead.
Hierarchy is Good!
• The hierarchy in Omega construction is
great news, since you likely will not have to
edit .tpl.php ﬁles to identify zones or
regions for styling.
• Omega has you covered!
• I will not be going over the basics of how
to do CSS styling in this presentation