This presentation provides an introduction to the Omega theming frameworks and how Omega themes are generated and structured.

1. Theming on Drupal 7
Working with Omega’s Responsive Framework
Eric Sembrat
Advanced Computing Services
Kennesaw State University
April 2012

2. Introduction

3. Drupal 7
• With Drupal 7, we have chosen the Omega
theming framework for developing new and
custom themes.
• Omega operates differently compared to
Zen (our framework for D6 and early D7
sites).
• Project Site

4. 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
slightly.

5. Adaptive?
• What adaptive means is that the page
rendering is dependent on the browser
size.
• Mobile versions.
• Small screen-sizes.
• Large screen-sizes.
• See Google Mail and DrupalCon 2012.

6. Adaptive!
• With Omega, your theme building should
be primarily concerned with CSS and
styling.
• Site layouts are integrated into Omega (1
sidebar, 2 sidebar, no sidebar).
• Footers and headers (even prefaces and
post-scripts) are aplenty.

7. Just CSS? Great!
• What this means is that your themes will
be primarily composed of CSS files and
images, with little (if any) tinkering
of .tpl.php files.
• .tpl.php Files - the “templates” to pages
(such as headers, content).
• Elements should be hidden with CSS.

8. Getting Started with
Omega

9. Your First Theme
• Building your first theme with Omega is
going to be like going out on a first date.
• You’re going to be nervous to make
changes, and jittery about making big
moves.
• You’re going to be careful in what you do.
• But you shouldn’t worry. Why?

10. Saving the Day
• Omega is built so that if you run into
issues, you can leave to go “answer an
emergency call”.
• 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
work.

11. Hierarchy
• Omega (core)
• Alpha (core base-theme)
• Your Theme!
• These are included in the Omega project
download, so stop worrying and jump right
in.

12. Getting Started

13. Precursors
• Before we begin, download Acquia Dev
Desktop.
• It’s a package that builds a web-server for
your local machine (also known as an
‘AMP’).
• Install Drupal, set up your local user
account.

14. Lemme Download
• Download the Omega Project from
Drupal.org.
• Grab the stable recommended releases.
• Development releases may change
between commits, and future
functionality may not be present in
milestones.

15. Theming 101
• 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 file and each of
the .css files in the /css folder.
• You’ve created a theme!

16. Theming 102
• Making these changes will allow your
subtheme to show up on your Drupal site
if you place the theme in the themes/
folder.
• Your subtheme requires Omega and
Alpha to be in themes/ as well, so add
them.

17. Omega Tools?
• 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
colossal mistake.

18. Aside
It’s all about the CSS.

19. CSS
• 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 simplifies CSS3 elements so that the
styling is optimized for all browsers.

20. CSS Compilers
• One word of caution for using compilers.
• Changes to CSS will take longer to make
due to having to recompile and place in
your theme.
• SASS requires Ruby.
• Using Compass as your CSS editor may
save you a lot of headache.

21. CSS Compilers
• 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
server.

22. The Meat of the Matter

23. Theming within Omega
• Theming (CSS work) in Omega is
mobile-first.
• Your mobile CSS will be inherited
throughout the other layout sizes unless
you specify otherwise through
declaration.
• Since mobile theming may be styled
differently, this can be a headache.

24. Theming within Omega

25. Theming within Omega

26. CSS Hierarchy
• Theming is determined by:
• Global.CSS
• [themename]-default.CSS
• [themename]-narrow.CSS
• [themename]-normal.CSS
• [themename]-wide.CSS

27. 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.

28. What do I theme?
• Enable your Drupal Omega subtheme.
• Now, enable the Debugging Blocks for
Omega.
• This will display all the available blocks
Omega provides you, which are disabled if
the block area is empty.

29. How do I find
information?
• 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.

30. What’s Next?
• With this information, you can theme.
• Find out which element you want to
theme, open up the CSS file you want to
work with, and go to work!

31. How to Theme
Correctly
• Each page in Omega is composed of:
• Page
• Section
• Wrapper
• Zone
• Region
• Region-Inner

32. Hierarchy

33. Hierarchy

34. Theming
• Which aspect you select depends on what
parts of the page you want the CSS to
apply to.
• Wrappers are the binding glue of each
sections.
• Zones encompass only where text and
content can go.

35. 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
adaptability.
• You should not be overwriting width: and
height: for these.
• Do it for Zones instead.

36. Hierarchy is Good!
• The hierarchy in Omega construction is
great news, since you likely will not have to
edit .tpl.php files 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

37. Looking for more
information?

38. Where to Find Help
• Omega Documentation
• Omega Micro-Site
• W3Schools’ CSS Documentation

39. Eric Sembrat
Advanced Computing Services
Kennesaw State University
April 2012