This document provides an overview of theming in Drupal 7 using the Omega framework, emphasizing its differences from previous frameworks and its adaptive design for various screen sizes. It details the steps to create a theme, the role of CSS in theme development, and the importance of Omega tools for local development. Additionally, it outlines the hierarchy of theming components and offers resources for further assistance.

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