1

I´m working with an Omega 3.x Subtheme in Drupal 7. I´ve been reading the handbook of Omega, specially about the layered css files.

Even if I do understand that the layer structure of the default responsive css files is (from bottom to top): global → default → narrow → normal → wide, I can´t mach that to the Grid Settings UI, and I just can´t understand how "default" css file works, and for what layout.

These are the css files that I´ve got:

global.css = global

yoursubthemename-alpha-default.css = default

yoursubthemename-alpha-default-narrow.css = narrow

yoursubthemename-alpha-default-normal.css = normal

yoursubthemename-alpha-default-wide.css = wide

And these are the different default layout settings at the UI (/admin/appearance/settings/mytheme):

  1. Narrow Layout (weight 1) --> media query: all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape).
  2. Normal Layout (weight 2) --> all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape).
  3. Wide Layout (weight 3) --> all and (min-width: 1220px).

How about default css file? I´ve also noted that all mediaqueries are set: orientation:landscape, so how do I manage to apply different css files for portrait viewports?

Example:

I´ve got a phone (480 x 320), a Nexus 7" Tablet (1280x800), a 10" netbook (1024x600) and a 19" pc monitor (1366 x 768).

I´ve customized global, normal and wide css files, applying global.css to my phone (portrait and landscape), normal.css to my laptop and wide.css to my pc monitor.

cellphone orientation: portrait and landscape ---> css global file.

Works ok. It just takes the global file.

tablet orientation portrait ---> css ?? file.

It takes the global file, and it looks as the pgone, but bigger. I would like another template. I´ve tried the "default" css file, but it´s not "taken".

tablet orientation landscape ---> css ?? file.

I´ve copied all contents of "normal" to "narrow" css files, but that won´t work, because it´s a weird narrower result, even if its a copy of the normal css file.

netbook orientation landscape ---> css normal file

It works fine, it just takes the normal css file.

desktop monitor orientation landscape ---> css wide file

It works fine, it just takes the wide css file.

So, in other words, how do you apply the css templates to tiny viewports (cellphone), smaller ones (7" tablet), small ones (10" netbook), and bigger ones (big desktop monitor and maybe tv)?

Thanks for your help!

  • Before digging into how omega works, I think you are missing some of the fundamentals of what RWD, mobile first and media queries are all about. I would spend some time on google to understand these higher level concepts and then omegas CSS structure will make more sense. – Nigel Waters Jan 19 '13 at 23:19
  • Thanks for your reply. I´ve already done some research, read some amazing articles about RWD from Ethan Marcotte and about mobile first too. That´s why I started using Omega in the first place. Anyway, it seems that it was not enough, as I can´t get the "default" css template to work properly. – Rosamunda Jan 20 '13 at 0:22
  • 1
    There is a comment line at the top of every one of the default omega css files that explains where and when it is used. – 2pha Jan 20 '13 at 2:50
1

The way I see it you've got 2 options:

Option 1: Don't use multiple style sheets. You can have conditional elements in a single CSS file using CSS media queries like this:

// Default styles
.content {max-width:960px}

// Tablet styles
@media only screen and (min-device-width: 600px) and (max-device-width: 960px), screen and (min-width: 600px) and (max-width: 960px){
  .content {max-width:600px;}
}

// Phone styles
@media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
  .content {max-width:100%;}
}

That will even work on a desktop PC with a small window. For more info go here.

Option 2: There is a way to include those conditions in a link tag. That way you can divide up your CSS files for easy viewing. Like this:

< link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="mobile-view.css" />

You'll have to include it manually. I don't know if drupal_add_css will work with media property. You might have to use drupal_add_html_head.

0

If you'd like to do it the Omega way, look into using Context as well as Delta, as it's pretty powerful with Omega.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.