This article refers to theming in Drupal 7, which is very different to Drupal 8. Some links have been stripped from this article due to age and inaccessibility.
OK so with all the best intentions comes the habits of mortal man. I failed miserably in publishing this article on Wednesday as I had suggested I’d do. However it is here now, and better than it would have been if I had rushed to meet a Wednesday “publishing deadline”. I am however sticking to my target of an average of 1 blog entry per week for a year(6th week in a row people - this definitely is some kind of record for me) Here we go theming with Omega. This is the first actual theme review of my blogging series on theming. For the earlier parts see below:
- Post 1 - Base Themes
- Post 2 - Theming MiniSeries - Project creep…
- Part 3 - Theming MiniSeries - The Process
What is Omega
Omega is an adaptive base theme that concentrates on providing more configuration options in the User Interface (UI) than in code. I am not going to elaborate too much about what Omega is or isn’t as there are a number of fine articles on the web describing it so much more elequantly than I can. However to be able to understand the code in this review, there are some basic concepts you’ll need to know, and ideally understand at a basic level to be able to read this review. As already stated previously I assume very little, but do assume you:
- Know what Drupal is
- Know what a theme is and how to install and activate one
- Have some understanding of CSS and HTML (Ideally HTML5 but it’s not essential)
- Have a willingness to learn, and investigate terms you don’t understand.
For those worrying abot not understanding terms, I will provide some explanation of each term for you, however this is not a “Learn Drupal” series. This is a “Why use Base Themes” series, and my “Learn Drupal” series will probably come on my corporate blog. A good place to pick up terminology is Drupalize.me’s [drupalize.me] fantasic series on theming with Omega in Drupal. Their Omega Terminology video [drupalize.me] is free too. The majority of the content on the site is behind a pay wall, but the prices are quite reasonable should you wish to access more of the information behind it (And if you are learning Drupal for your work, why not ask if your boss can contribute to the cost as part of training budgets? The company you work for will benefit in the long run!)
For this part of the mini series you need to understand the following Omega terms:
- A Page (Not specifically an Omega only term, but more a web term thats useful for demonstration purposes)
- A Grid (Again not specifically an Omega term)
- A Region
- A Zone
Please also note, this covers Omega 3.1, and not the forthcoming 4.0 release, which does away with a lot of the current omega features (But replaces them with better/improved alternatives). I will add a review of Omega 4 once it is released as a stable release.
A URL on a website produces a page of content. This is the bit between the , tags on a page.
A Grid (system, also known as gs) is a layout system used by a lot of designers, themers and developers to make content easier to position on a page. Omega is designed against a 960 Grid (960 pixels wide, or a 1024 pixel based display without any horizontal scroll), starting with 12 columns. Omega also allows 16 and 24 column layouts as well as a custom layout for your own number of columns (Although this is an advanced technique and requires some coding) For more information on grids and grid systems, I suggest you google it, as there are loads of really good articles out there. A good site for examples of various grid layouts is 960.gs [960.gs]. There is also a more responsive version now on unsemantic.com although I know of no Drupal base theme that uses this yet.
Regions are containers you put into a Page. You can have many regions to a page. If you think of a region like a row in a tableThis is slightly confusing to people who don’t know of Drupal modules such as Panels, so let me try to explain it like this. A Region could be (for instance) a header region where you put all your header information (In zones in the header), a content region for the main content you are trying to display as well as side bars etc, and a footer region for all footer information. In fact the above mentioned region are actual regions from the default Omega layout (There are also preface and postscript regions too). So a page contains regions. There can be many regions on a page and regions can vary in width from a minimum of 1 through to a maximum of 12 (by default) in Omega. By default regions typically span all 12 columns of the grid - although more complex layouts can have multiple regions in a row should you need it.
Zones are assigned to regions, and contain content. You assign Drupal Blocks, and nodes to them. They tend to be smaller than regions but don’t have to be. It is possible to have a zone as big as a region, but you can’t have one bigger than it’s containing region; at least not in Omega. Other themes may alllow you to do this, but it isn’t advisable!
So why should you use Omega? Well there are plenty of reasons to use Omega, not least because it’s one of the most popular base themes out there at the moment. One of the reasons I think this is, is it allows you to do so much from a front end perspective without necessarily having to write code. It’s very front end friendly (Unlike most of the other themes I am reviewing which rely a little more on coding ability) When combined with other modules such as Delta and Context [both D.O] there is SO much you can achieve with this theme. The Delta module allows you to create different layouts. A common use case here is the front page, as a lot of companies in particular like a different layout on the front page. You may also have different layouts for your smaller screen layouts (For instance your “Latest post teaser” block may have less information in it and therefore take up 4 columns instead of 8 or something similar. Or right hand side bar may go above your main content instead of below on a smaller resolution, which is what would naturally happen to a “right” side bar on Omega). This along with contexts provides a really powerful combination, which I have only found bettered using a tool such as panels (Or maybe even Panels and Display Suite [both D.O]) Now on my site I am building I have little need for different layouts, but it is very handy to know for future reference (Say for example if I decide to rebuild my company site in Omega - something I will consider should I decide Omega is the right theme for me) In a little under 10 minutes, with no code required I had the layout of my site exactly how I wanted it. Within 20 I had removed the areas I didn’t need (In code this is) by removing the region and zones. With a further 5 or so minutes work, I had a good mock up of my site available that I would be happy to show to a client as a “starting point” for the layout of their theme (Although I would stress it was nowhere near complete!) so they could start using their site to add content etc whist you (the themer) continued your work, updating as often as seems reasonable.
Because Omega is responsive out the box, you also get a pretty decent mobile site too. As long as your design is based on a grid system it’s usually VERY easy to move everything around as you progress down from “wide” (Omega parlence for anything over 1200 pixels wide), “Normal) (980 - 1024 wide) narrow (740 - 800 wide), and “mobile” (Which actually just uses the “global” stylesheet where you define CSS classes and identifers that cover everything, such as background colours etc) And yes, there are overlaps with “missing” pixel resolutions, but as with everything in Omega you can adjust the media queries to suit you. So if you wanted wide to start at (say) 1025 pixels wide and above you could.
Why not Omega
Well there are some times you don’t wanna use Omega. For example if you like clean markup as Omega (Like several other themes) is div heavy. Each region has it’s own div, each zome has it’s own divs. Zones and regions can (optionally) have wrapper divs, and so on! Whilst this is great for uniquely identifying paths to classes, clean markup themers would rather fewer tags and better more descriptive classes in my experience. Omega is also not for people who prefer to code everything. Whilst you can do things that way, it’s not Omega best practise. Omega also doesn’t adhere to several Drupal common practises (I hesitate in saying “best” practises, as I quite like some of these Omega-isms!) It puts all the preprocess and process functions in their own file, instead of using the Drupal default of template.php. And unlike the rest of Drupal, not everything is done in the .tpl.php files either, more is stored in the database (Harder to get to code, although the Omega Tools [D.O] solves this providing a settings exporter, and some Drush commands for Omega)
Omega is a great base theme that gives non coders great control and flexibility over their site. It’s responsive out the box, and provides a really powerful layout option. I must again stress this is Omega 3.1. Omega 4 is using new ways of doing layouts that are more inline with Drupal 8 practises, and is doing away with Regions and Zones. Whilst this may be a good thing from a best practises perspective, many use Omega for it’s UI friendlyness. I am yet to try Omega 4, but I hope for the UI people out there, it remains as friendly as it currently is. If you are a UI person first, coder second, give Omega a try. Coder first? You may want to look else where.
There are many features of Omega I haven’t mentioned here, such as several impressive JS libraries to show grid layout, empty blocks and equal heighting divs. These features have their own drawbacks though and I tend not to use them all (if any). I will address each of the featuresin Omega 4 once it’s released and I do it’s review. For the time being, if you want to learn more about Omega, let me know in the comments section and I will write a more complete review of Omega 3.1 too.
Next up in our theming mini series will be Zen. However the next 2 blog entries (Drupal related ones at any rate) will be about DrupalCamp London [drupalcamplondon.co.uk] and then the weekend long code sprint [groups.drupal.org - or G.D.O] taking place globally between 9th and 10th March. My intention is to write a summary of each day for DrupalCamp London, but I am yet to decide if I should publish this as 1 blog entry or 2. The weekend long codesprint will be a summary post.