3

I have an HTML5 Omega 3 subtheme. I'm using the responsive grids, and Omega's (Alpha's) -wide -normal etc. css files are working.

But I can't get mine to. I have read the handbook and the wiki to no avail.

In mytheme/css I have

global.css
mytheme-alpha-default-normal.css
mytheme-alpha-default-wide.css

In my mytheme.info file I have

css[global.css][name] = my global stuff
css[global.css][description] = blah
css[global.css.less][options][weight] = 10

css[mytheme-alpha-default-normal.css][name] = my normal stuff
css[mytheme-alpha-default-normal.css][description] = blah
css[mytheme-alpha-default-normal.css][options][weight] = 10

css[mytheme-alpha-default-wide.css.less][name] = my wide stuff
css[mytheme-alpha-default-wide.css.less][description] = blah
css[mytheme-alpha-default-wide.css.less][options][weight] = 10

And I've enabled these in the Omega settings for the theme.

What happens is that all these stylesheets are loaded like the global one -- without any media query conditions at all, just like they were all global styles.

I've tried un-checking them. This just removes them. I've tried removing them from the .info file; this just removes them entirely too.

Can anyone help?

1 Answer 1

4

There's something odd about what you wrote in your question, because you mention *.less files. I'd expect to see just .css. Are they really .less?

But more importantly, you should not add css[] lines in the .info file for your width-specific css files. That makes them regular CSS files that will always be loaded. They will be listed in the list of CSS files, and can be turned on and off, as you see.

Take a look at the starter-theme .info file (e.g., starterkit_omega_html5.info), and you'll see that there are css[] lines there only for global.css, and not for any of the width-specific files.

Take those lines out. Omega will automatically generate loads for the width-specific files. It looks for the files based on the name pattern, and loads them with the appropriate media queries.

If the width-specific files do not appear at all in your page output with media queries, then there may be something wrong with your naming of the files. One common problem is that if your theme name has an underscore (e.g. "my_theme"), then the filenames must have dashes ("my-theme").

One other oddity to know is that the width-specific files for all the widths narrower than the browser width are loaded. So, for instance, if your browser is at "normal" width, the global, narrow, and normal width CSS files will all be loaded, in that order.

MORE:

Don't forget to check the box "Enable the responsive grid" in the theme settings, and also check the box "Use this layout with the responsive grid" for each width you want to include

You should see something like this in every page that's output:

....
@import url("http://yoursite.com/sites/all/themes/mytheme/css/global.css?lxt4yy");</style>

<!--[if (lt IE 9)&(!IEMobile)]>
<style type="text/css" media="all">@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default-normal.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css?lxt4yy");</style>
<![endif]-->

<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)">@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default-narrow.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/omega/alpha/css/grid/alpha_default/narrow/alpha-default-narrow-12.css?lxt4yy");</style>
<!--<![endif]-->

<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)">@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default-normal.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css?lxt4yy");</style>

<!--<![endif]-->

<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 1220px)">@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/mytheme/css/mytheme-alpha-default-wide.css?lxt4yy");
@import url("http://yoursite.com/sites/all/themes/omega/alpha/css/grid/alpha_default/wide/alpha-default-wide-12.css?lxt4yy");</style>
<!--<![endif]-->
3
  • Thanks for answering. Oops, meant to strip the .less stuff out before posting. I am using less, but I still get the problem with vanilla .css files. My theme has no underscores in its name. the naming is exactly as you see, except that the name is my client's name (one word, all lowercase letters). Commented Feb 12, 2012 at 11:04
  • I added more debugging info above. Compare your .info file with the starterkit one. It should be very similar. Maybe start again with the starterkit one. The starterkit .info needs almost no changes unless you are doing major surgery on the grid. Try creating a new completely vanilla subtheme of Omega, and see if responsiveness works there. If it does, compare your subtheme with the vanilla one. Commented Feb 12, 2012 at 15:26
  • *blush* noob (I'm not, really, which makes it worse!) error. I had been confused about the machine name for the theme, thinking that it was set by the directory name or the 'name' field in the .info file. It's not. It's set by the whatever in whatever.info. Thought I'd checked everything, thanks for patience + help. Working now :-) Commented Feb 12, 2012 at 20:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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