Drupal 7: Theming with Omega
-
Upload
eric-sembrat -
Category
Technology
-
view
2.966 -
download
1
description
Transcript of Drupal 7: Theming with Omega
Theming on Drupal 7 Working with Omega’s Responsive Framework
Eric SembratAdvanced Computing Services
Kennesaw State University April 2012
Introduction
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
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.
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.
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.
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.
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 make changes, 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 underlying magic 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.
Getting Started
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 from Drupal.org.
• Grab the stable recommended releases.
• Development releases may change between 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.
• You’ve created a theme!
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.
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.
AsideIt’s all about the CSS.
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.
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.
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.
The Meat of the Matter
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.
Theming within Omega
Theming within Omega
CSS Hierarchy
• Theming is determined by:
• Global.CSS
• [themename]-default.CSS
• [themename]-narrow.CSS
• [themename]-normal.CSS
• [themename]-wide.CSS
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 Omega.
• This will display all the available blocks Omega provides you, which are disabled if the block area is empty.
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.
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!
How to Theme Correctly
• Each page in Omega is composed of:
• Page
• Section
• Wrapper
• Zone
• Region
• Region-Inner
Hierarchy
Hierarchy
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.
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.
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
Looking for more information?
Where to Find Help
• Omega Documentation
• Omega Micro-Site
• W3Schools’ CSS Documentation
Eric SembratAdvanced Computing Services
Kennesaw State University April 2012