Subtheme's alpha styleheets are being loaded before default ones

Try replacing your _ with a - . Should work after that.

My CSS files are getting loaded, but then overridden by Alpha's default ones.

Here's the media query that loads the "normal" layout:

<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://MYSITE/sites/default/themes/MYTHEME/css/aac-d7-alpha-default.css?lto59q");
@import url("http://MYSITE/sites/default/themes/MYTHEME/css/aac-d7-alpha-default-normal.css?lto59q");
@import url("http://MYSITE/sites/default/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-24.css?lto59q");
</style>

Why is Alpha's CSS loaded last and how can I override it?

Seeing the same behaviour here:

- Created a subtheme using Drush
- The subtheme's themename-alpha-default-xxx.css files are being loaded before Alpha's default ones, making it impossible to override that CSS.

Is this a bug in Omega/Alpha or a configuration issue?

Clarifying title.

I ran into the same problem, trying to override alpha's default css but I still haven't figured a proper way of doing so.

Could be related to #857372: css loading order for subthemes?

When I put dsm($css) in alpha_css_alter() on line 134 of path_to_theme/omega/alpha/template.php, I see that the weights of the stylesheets seem incorrect, causing them to be loaded in the wrong order. For instance:

- 'normal::sites/all/themes/custom/custom_theme/css/custom-theme-alpha-default.css' has a weight of 2.02
- 'normal::sites/all/themes/custom/custom_theme/css/custom-theme-alpha-default-normal.css' has a weight of 2.022
- 'sites/all/themes/contrib/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css' has a weight of 2.024

Not sure where those weight are being determined though.

Poking around some more, I think the cause may be found in alpha_grid_css(), line 445 of path_to_theme/omega/alpha/includes/alpha.inc: this is where the grid's CSS files array is created.

I don't have time right now to look into this further, will try to come back to this later.

Attached patch changes alpha_grid_css(), so that alpha's default grid stylesheets are loaded before the subtheme's. Need a maintainer to look at this, since I'm not sure if this change has consequences I'm not aware of, or if it could/should be done in another way or in a different place.

Patch against latest 7.x-3.x.

Has this been reviewed yet? I've been running into this same issue so it would be great to have a fix!

I couldn't get it to work but perhaps I applied the patch wrong.

Let me try and understand the issue here, It sounds like there may be different ones happening:

1. The grid files are being loaded last in the stack after the default and mediaquery specific files (normal in this case). What is being overwritten in the grid that you're trying to do in your global/default/normal? If you're wanting to do a custom grid then you're going about it incorrectly if you're doing it by editing the css files. There is a tutorial in the groups.drupal.org Omega Framework group wiki that shows how to load custom grids.

2. If you're running into a stylesheet other than your grid overriding the default/normal then that's another issue altogether. It can depend on where you're adding your css file (template or the .info) and also how you're loading it there as well.

Can you clarify which of these two you're falling into? We can then start tracing the root of the issue from there. I don't think the maintainers are going to want to change the way the grid loads as that function is working as it should and customizing the grid requires other steps at the current time.

Cheers!

Cellar Door

Thanks Cellar Door for the helpful reply. I think we're talking about the first option you described.

My end goal is the following:

I'm using Omega's basic 960 grid, but need to tweak some things for it to work for the site I'm building. After I installed Omega and created my subtheme, I saw the following stylesheets being loaded:

<!--[if (lt IE 9)&(!IEMobile)]>
<style type="text/css" media="all">@import url("http://example.com/sites/all/themes/my_new_subtheme/css/my-new-subtheme-alpha-default.css?ly25j8");
@import url("http://example.com/sites/all/themes/my_new_subtheme/css/my-new-subtheme-alpha-default-normal.css?ly25j8");
@import url("http://example.com/sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css?ly25j8");</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://example.com/sites/all/themes/my_new_subtheme/css/my-new-subtheme-alpha-default.css?ly25j8");
@import url("http://example.com/sites/all/themes/my_new_subtheme/css/my-new-subtheme-alpha-default-narrow.css?ly25j8");
@import url("http://example.com/sites/all/themes/omega/alpha/css/grid/alpha_default/narrow/alpha-default-narrow-12.css?ly25j8");</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://example.com/sites/all/themes/my_new_subtheme/css/my-new-subtheme-alpha-default.css?ly25j8");
@import url("http://example.com/sites/all/themes/my_new_subtheme/css/my-new-subtheme-alpha-default-normal.css?ly25j8");
@import url("http://example.com/sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css?ly25j8");</style>
<!--<![endif]-->

<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 1220px)">@import url("http://example.com/sites/all/themes/my_new_subtheme/css/my-new-subtheme-alpha-default.css?ly25j8");
@import url("http://example.com/sites/all/themes/my_new_subtheme/css/my-new-subtheme-alpha-default-wide.css?ly25j8");
@import url("http://example.com/sites/all/themes/omega/alpha/css/grid/alpha_default/wide/alpha-default-wide-12.css?ly25j8");</style>
<!--<![endif]-->

I assumed that overriding Omega default grid's CSS had to be done by editing the my-new-subtheme-alpha-default.css - which is why I thought it was being loaded incorrectly (ie. before Omega's default stylesheets, making it impossible to override anything in those default stylesheets).

If I understand you correctly, the way to achieve what I want is to create my own custom grid, as explained in http://groups.drupal.org/node/164684? This grid would then mainly be a copy of Omega's 960 grid, changing things where needed.

Hope this is clear. Thanks!

Exactly! The grid files NEED to be loaded last so that it can create a uniform style and prevent people from creating variations that would break it. The best way as it stands now is to follow the steps on the wiki and create your own grid give it a unique name and modify the settings accordingly.

Ideally there will be a grid UI feature for the settings allowing you to customize the grid settings there but until then this is the best way. It also helps to keep your stylesheets cleaner from grid markup.

Another side note (I just told someone else about this in another issue) if you use your grid classes on blocks you can easily create block based grid width too. So you can have your region be 6 columns and in it your 2 blocks put a class of grid-3 on and they'll move as the grid moves as well :)

Happy theming!

Cool, thanks again for the help.

Just as a note for other people stumbling on this issue:

Do not apply the patch in #9, instead see http://groups.drupal.org/node/164684 for a proper way to create your own grid.

Changing over to fixed

I'm having this problem when using Omega with WYSIWYG module + TinyMCE.

I think the problem is that body {min-width: 960px;} in alpha-default-normal-12.css is also applying to the TinyMCE iframe body, resulting in a horizontal scrollbar that I can't get rid of.

Weird — I thought that parent document css is not supposed to apply to the contents of an iframe. But in Chrome when I inspect the iframe body, it says it's getting the min-width from alpha-default.

Anyway, I'm not trying to customise the grid — just trying to make WYSIWYG work. :)

Any advice?

I'm having this problem, as well. I'm still running Omega 3.0. I followed the instructions in http://groups.drupal.org/node/164684, to no avail. It's now recognizing mytheme-alpha-default.css, but the grouping is still the same, and the grouping for any of the grids[] stylesheets specified in my .info file is loaded after the grouping that includes the css[] files. This suggests there is something programmatic at work in Omega, that groups grids[] after css[], thereby causing this problem.

I am running Omega 7.x-3.1. I have created a sub theme with custom grid. Everything is working well except that the Global stylesheet is loading after the sub theme: default, narrow, normal and wide stylesheets. So I cannot override the styles applied to mobile through global with styles in default, narrow, normal, and wide...

I have been through a lot of post about how to correctly create a custom grid sub theme. I am have been through everything I can find relating to LESS and Omega. I cannot find anything to sort out this issue...

Can anyone help?

I am running Omega 7.x-3.1. I have created a sub theme with custom grid. Everything is working well except that the Global stylesheet is loading after the sub theme: default, narrow, normal and wide stylesheets. So I cannot override the styles applied to mobile through global with styles in default, narrow, normal, and wide...

I have been through a lot of post about how to correctly create a custom grid sub theme. I am have been through everything I can find relating to LESS and Omega. I cannot find anything to sort out this issue...

Can anyone help?

Yes thanks for the link but this is alot of work. The point is I want my child theme to override the base theme. If it breaks the layout then the problem must be with my bespoke child theme. What's the point of creating a child theme if I have to manually add the responsive overrides in my child theme. This is nuts!

Maybe I should just hack the base theme with the changes I want?!

Ok I think I have finally figured out an approach that allows me to override the default grid setting as defined by the base theme and its dependency alpha 's grid layout without having to start a new base theme from scratch. This was the bit that I was missing. Omega uses the CSS3 Media Queries Javascript plugin:

http://code.google.com/p/css3-mediaqueries-js/

As I understand it this has certain benefits over standard css3 media queries including support for the ie stable of browsers. I guess this also overrides the use of using traditional media queries which could also explain why I was having issues getting them to work? One thing this does is it adds a class to the body tag depending on the viewport size i.e. .responsive-layout-normal etc. This allows you to write media queries either in global.css or the specific stylesheet specific to that viewport size and write css that overrides the base themes grid layout as defined by alpha (framework theme?).

Also it looks like the media queries are set up from the standard theme ui and configured there. Again this took me a while to figure out as I did not expect to see them there but in the theme's .info. This also explains the first div in my document that looks like this:

<div id="omega-media-query-dummy"><style media="all">#omega-media-query-dummy { position: relative; z-index: -1; }</style><!--[if (lt IE 9)&(!IEMobile)]><style media="all">#omega-media-query-dummy { z-index: 1; }</style><![endif]--><style media="all and (min-width: 620px) and (min-device-width: 630px), (max-device-width: 630px) and (min-width: 620px) and (orientation:landscape)">#omega-media-query-dummy { z-index: 0; }</style><style media="all and (min-width: 960px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 960px) and (orientation:landscape)">#omega-media-query-dummy { z-index: 1; }</style></div>