Theming on Drupal 7
Working with Omega’s Responsive Framework
Eric Sembrat Advanced Computing Services Kennesaw State University
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).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 alteredAdaptive?
•
What adaptive means is that the page rendering is dependent on the browser size.•
Mobile versions.•
Small screen-sizes.•
Large screen-sizes.Adaptive!
•
With Omega, your theme building should be primarily concerned with CSS andstyling.
•
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 files and images, with little (if any) tinkeringof .tpl.php files.
•
.tpl.php Files - the “templates” to pages (such as headers, content).Getting Started with
Omega
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 makechanges, and jittery about making big moves.
•
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 emergency call”.•
Omega provides you a framework so that the core of the styling is never adjusted.•
That way, you can’t break the underlyingmagic that makes the adaptive theming work.
Hierarchy
•
Omega (core)•
Alpha (core base-theme)•
Your Theme!•
These are included in the Omega project download, so stop worrying and jump right in.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.Lemme Download
•
Download the Omega Project fromDrupal.org.
•
Grab the stable recommended releases.•
Development releases may changebetween commits, and future
functionality may not be present in milestones.
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.Theming 102
•
Making these changes will allow yoursubtheme to show up on your Drupal site if you place the theme in the themes/
folder.
•
Your subtheme requires Omega andAlpha to be in themes/ as well, so add them.
Omega Tools?
•
Omega Tools is a fantastic module for localdevelopment 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.Aside
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 theCSS Compilers
•
One word of caution for using compilers.•
Changes to CSS will take longer to makedue 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.CSS Compilers
•
There are also plugins for Drupal thattake .sass or .less uncompiled styling and compiles the styling on the server.
•
Requires Ruby to be installed on the server.Theming within Omega
•
Theming (CSS work) in Omega ismobile-first.
•
Your mobile CSS will be inheritedthroughout the other layout sizes unless you specify otherwise through
declaration.
•
Since mobile theming may be styled differently, this can be a headache.CSS Hierarchy
•
Theming is determined by:•
Global.CSS•
[themename]-default.CSS•
[themename]-narrow.CSS•
[themename]-normal.CSS•
[themename]-wide.CSSCSS Hierarchy Phase 2
•
Theming is determined in this way:•
Mobile Theming CSS•
Default CSS•
CSS for Narrow layout.•
CSS for Normal layout.What do I theme?
•
Enable your Drupal Omega subtheme.•
Now, enable the Debugging Blocks forOmega.
•
This will display all the available blocks Omega provides you, which are disabled ifHow do I find
information?
•
Chrome + Inspector = Your best friend.•
From any page on Drupal with thedebugging elements exposed, right click on the element and select Inspect Element.
What’s Next?
•
With this information, you can theme.•
Find out which element you want totheme, open up the CSS file you want to work with, and go to work!
How to Theme
Correctly
•
Each page in Omega is composed of:•
Page•
Section•
Wrapper•
Zone•
Region•
Region-InnerTheming
•
Which aspect you select depends on what parts of the page you want the CSS toapply to.
•
Wrappers are the binding glue of each sections.•
Zones encompass only where text and content can go.Theming - Sizing
•
What this means is that wrappers shouldnot be touched for width adjustment. Ever.
•
Wrappers are controlled by the Omega and Alpha themes for sizing andadaptability.
•
You should not be overwriting width: and height: for these.Hierarchy is Good!
•
The hierarchy in Omega construction isgreat 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 presentationLooking for more
information?
Where to Find Help
•
Omega Documentation•
Omega Micro-SiteEric Sembrat Advanced Computing Services Kennesaw State University
