Drupal 7 Omega Theme "Recipe"

Anonymous's picture

Hey guys. I'm putting my efforts into Omega and Drupal 7 right now. I was wondering if any of you have any recipes for an Omega theme/responsive web design setup. I'm looking for modules that are "HAVE to haves" and "are nice to haves" (including WYSIWYG/image upload, and modules for SEO). Are there tutorials that you found got you on the right track?

Hey guys. I'm putting my efforts into Omega and Drupal 7 right now. I was wondering if any of you have any recipes for an Omega theme/responsive web design setup. I'm looking for modules that are "HAVE to haves" and "are nice to haves" (including WYSIWYG/image upload, and modules for SEO). Are there tutorials that you found got you on the right track?

Also, I'm trying to make images responsive and am not succeeding. I have a sub-theme, and am adding to global.css the following:

img, object, embed { max-width: 100%; }

#section-header { width: auto; height:auto; background: url("../images/head960.jpg") no-repeat top #95b2bd; }

For #section-header I've tried deleting the width/height settings, setting them to 100%, no height, etc. My image stays the same size regardless. Maybe there's a setting in my subtheme I'm missing? Any thoughts? I currently have nothing in the other CSS files yet. I'm avoiding using one of the other starter Omega subthemes (Respond or Alphorn, for example) because I find they are more complex than I want to go - I want to try and keep this as simple as possible. Having said that, I would be willing to try one if it's REALLY thought to be the best. Here are my settings:

Grid system is set to default 960
Enable responsive grid is checked on
Allow customizing viewport... on
Initial scale 1.0
minimum scale 1.0
Max 1.0
Scalable by user...on
primary layout - narrow
use this layout with responsive... on
all and (min-width: 150px) and (min-device-width: 150px), (max-device-width: 960px) and (min-width: 150px) and (orientation:landscape)

Another part is that I can't seem to get the page to shrink past 740px width. I'm wanting to have the minimum be 150px, say, for mobile.

I've looked at a few tutorials out there and at the Omega handbook and so on, but, as is so Drupal, I'm drowning in information. Figured I'd try my local neighbours to see what has worked for you!

There's a lot I've mentioned here, I know. Hopefully it all makes sense.

Thanks in advance!

Sonia Wilkinson



adamwhite's picture

Hi Sonia!

I've definitely been putting together a little stack of modules which I use on project after project on Omega. I'll throw together a list and post it here or you. I'll check out the responsive images stuff you posted as well, as I've had various levels of luck with that depending on the application.

More soon. Cheers.

What I did for responsive images and is Mobile.css required?

SoniaWilk's picture

Hi Adam! Thanks for the reply, and I look forward to your input! I've been playing around with the css and Omega settings and such, and am making progress, to a degree. The modules I'm using for the "responsive images" and WYSIWYG are:

I've got the various image sizes working and it seems to work well. What I DON'T like about it is we have to use pixels not percentage (at the time of this post, anyway), so all the images have to be the same width and/or height. Not a big deal for the current website because it's small, but for other sites I could see wanting to go by percentage just so every page doesn't look exactly the same. Haven't looked into whether that is possible through various means yet, such as back-end hacking or whatever. What I DO like about it is the images actually load the appropriate size (small for mobile, larger for desktop, etc) so the mobile is not loading a large, re-sized image, and I did it without having to create all the different sized images manually.

Back to OMEGA...Do you find you have to create a mobile.css file (adding it to the info file, of course) so you can choose that as the "Default (960px) layout settings" option? Even though they say global.css replaces it? Because I'm still not getting the mobile version when I shrink my page down, or view it on my smartphone. I get the narrow version (740 wide) instead.

Thanks in advance for your help!!

@ Sonia or anyone - I can

Juc1's picture

@ Sonia or anyone - I can make node field images responsive with http://drupal.org/project/cs_adaptive_image but can anyone please tell me how can I make wysiwyg (such as tinymce / IMCE) images responsive? I am guessing it might be applying media queries to the image class in the css file.


I cannot help with that, I'm afraid...

SoniaWilk's picture

Hi Juc1, I haven't used responsive images, yet. It turns out the Responsive Images Module I mentioned was wreaking havoc with Omega (my pages were in a processing loop), so I deleted that module. It's not a huge priority for me right now, but it will be, so I'd be interested to hear other's responses on this. Sorry I can't be more help - other than "don't use Responsive Images Module with Omega". ;)


I am trying the same thing

angus_muir's picture

What I am currently trying to see how that works is through the CSS.

When adding in an image I am adding a class name, and through the CSS am setting a maximum width according to the media query.

e.g., /*
* Image Size
.image-large {max-width: 300px;}

Design Suite vs Panels

SoniaWilk's picture

Hey guys! I'm putting this under "omega" as that's the theme I'm plugging along with. I figure it's highly related because of the grid system. I just took a look around at panels, after Pierre (sp?) mentioned it at our latest meetup. I also came across something I haven't heard of before - Design Suite (http://drupal.org/project/ds) - which looks really interesting! I guess there is the 3rd option of using CSS and Omega solely. Any recommendations on which is the better way to go?

This is handy info. . . .

jpw1116's picture


Maybe someone with more hands-on experience can also talk about SASS/Compass to augment CSS.

Something like this:



SoniaWilk's picture

Thanks for sending those links! Yes, I was talking to someone about SASS/Compass briefly. I didn't realise it related to this discussion. I have to say that at a glance it looks like a whole new way of coding, which would frankly be one more headache I don't need. Is it actually simpler than it looks? (didn't have a whole lot of time to dig further just now). I'd be interested to hear some opinions on best practices on this.

CSS Preprocessors are definitely worth it

Richard Ayotte's picture

It might be one more headache to learn but it'll eliminate a few headaches later. I've been using LESS which is another preprocessor and I've never looked back. It's really not that bad to learn either.

I find developing in LESS a little quicker because I don't need to recompile after everychange but some like SASS because it's syntax might be slightly better.


Thanks, Richard--exactly. . . .

jpw1116's picture

And if it's as fast as you like to drive, Sonia, then the sites will be done in no time! ;-)

Really, it would be great if the next meetup covered more of these options, plus any best practices. If they haven't changed already by then.


SoniaWilk's picture

Do preprocessors replace panels/design suite? Or work in conjunction with? You're right, JPW, it would be great to cover all these options in a meeting. There are so many options, it's extremely confusing as to which way to go. I've spent countless hours over the last few years going down WRONG paths!

I'm totally up for trying new things (you have to to work with the website developement to begin with, right?). I'm just tired of wasting time on those wrong paths. It sounds like SASS/Compass and LESS are either/or options, really. I'll take a look around at the differences.

Side note: Hope I didn't give you any grey hairs with the driving!! I was in a spunky new car, when usually I get a 11 yo van...I was like a horse who's been shut in waaayy too long!! LOL

jpw1116's picture

I have been trying to eke at least somewhat of a dynamic, categorized chart to choose among all the alternatives in modules and system tools.

Preprocessors that slick up your CSS are on there, in the theme layer, separate from the layout modules. Panels is more for drag-n-drop page layout, Display Suite for nodes/entities; both to alleviate some of the coding you would normally do in your theme templates. And then you have a whole distribution like Panopoly, that packages Panels and other tools for in-place page building.

At least, that's the way I've been treating them in my chart. They all contribute to the same end but you're right, they are confusing. Keep looking them up online; others have articulated the differences way better than I have.

I still think it would really help if the docs for each and every Drupal module/tool/whatever started by defining the problem it's trying to solve, the category in which it belongs, and what distinguishes it from similar ones. Just sayin'.

BTW, your driving was perfectly fine. Even in the traffic jam/detour.