Hello I posted a comment at the bottom of issue: http://drupal.org/node/1310742. But I think this problem is separate.

I am running Omega 7.x-3.1. I have created a sub theme with a custom grid. Everything is working well except that the Global stylesheet is loading after the sub theme stylesheets for default, narrow, normal and wide.

So I cannot override the styles applied global with styles applied in default, narrow, normal, and wide... because it loads after them the global styles always win. I have been through everything I can find about creating custom grid sub themes with Omega, I think everything is down right. I am running LESS but none of the posts I can find are relevant.

Here you see the CSS files load up with the wide, normal, narrow and default first... then global is always in the group with alpha-mobile.css alpha-alpha.css and formalize.css (even when I change the weight of global.css it loads with these files.)


<style type="text/css" media="all and (min-width: 767px)">
@import url("http://hauxsamaly-v.10/sites/default/files/less/50a778b61b26a8.01653663/sites/all/themes/salmon/css/salmon-salmon-alpha-default.css?mdmkrv"); </style>
<style type="text/css" media="all and (min-width: 767px) ">
@import url("http://hauxsamaly-v.10/sites/default/files/less/50a778b61b26a8.01653663/sites/all/themes/salmon/css/salmon-salmon-alpha-default-narrow.css?mdmkrv"); </style>
<style type="text/css" media="all and (min-width: 979px) ">
@import url("http://hauxsamaly-v.10/sites/default/files/less/50a778b61b26a8.01653663/sites/all/themes/salmon/css/salmon-salmon-alpha-default-normal.css?mdmkrv"); </style>
<style type="text/css" media="all and (min-width: 1200px) ">
@import url("http://hauxsamaly-v.10/sites/default/files/less/50a778b61b26a8.01653663/sites/all/themes/salmon/css/salmon-salmon-alpha-default-wide.css?mdmkrv"); </style>

<style type="text/css" media="all">
@import url("http://hauxsamaly-v.10/sites/all/themes/omega/alpha/css/alpha-mobile.css?mdmkrv");
@import url("http://hauxsamaly-v.10/sites/all/themes/omega/alpha/css/alpha-alpha.css?mdmkrv");
@import url("http://hauxsamaly-v.10/sites/all/themes/omega/omega/css/formalize.css?mdmkrv");
@import url("http://hauxsamaly-v.10/sites/default/files/less/50a778b61b26a8.01653663/sites/all/themes/salmon/css/global.css?mdmkrv");

</style>
<style type="text/css" media="all and (min-width: 767px) and (min-device-width: 767px)">
<style type="text/css" media="all and (min-width: 979px) and (min-device-width: 979px)">
<style type="text/css" media="all and (min-width: 1200px)">

(these last three are the sub-theme grid css files)

Everything works nicely (layout, grid, resizing, LESS, etc.) except the overrides for these CSS files..

I would be really grateful for any help in troubleshooting this issue... Thanks!

Comments

Po3t’s picture

Po3t commented
Priority: Major » Normal

Changing the priority since this really isn't a major issue. I'm not a maintainer for Omega, but this seems to work as designed to me. The global stylesheet is meant to affect every layout, so it SHOULD override the others. Why don't you just move the necessary css to the appropriate default / narrow / normal / wide css file? If you need something overridden in the non-global css files, you can always use the !important suffix. For example:

.class-to-be-overridden {
width:100px !important;
}

As long as the !important tag isn't in the global.css file, it will take priority over the value defined in the global.css file.

smerth’s picture

smerth commented

Hi Po3t,

Thanks for your reply. I choose the high priority because I thought it was a major functionality that doesn't work. And still do...

> re: !important - thanks for your comment, of course this works and I have used it just to make sure, but it is never preferred so I want to avoid it. I want my sub theme to work the way a standard Omega sub theme works out-of-the-box.

> I could use the selectors provided by Omega and put them all into global.css (.responsive-layout-wide, .responsive-layout-mobile, .responsive-layout-narrow, .responsive-layout-mobile) I tried that before posting but it is messy solution, I want to use the default.css, narrow.css, etc. -> as they were meant to be used...

Here is a clearer statement of the problem...

1) I place all the css for mobile (and all other responsive layouts) into global.css and they apply to all layouts. OK - I did that and that works.

If I understand correctly I am supposed to do the following:

IF, I want to over-ride the css in global.css for a selector in all responsive layouts except mobile I pace it in default.css
IF, I want to over-ride the css in global.css for a selector in ONLY responsive layouts narrow, normal and wide I put the overriding css into narrow.css
IF, I want to over-ride the css in global.css for a selector in ONLY responsive layouts normal and wide I put the overriding css into normal.css
IF, I want to over-ride the css in global.css for a selector in ONLY responsive layouts wide I put the overriding css into wide.css

To be clear - I tested this in a fresh sub theme on a fresh install of Omega on a fresh install of Drupal and that is exactly what happens.

Specifically, if I place the following declaration in global.css:

#zone .block {
display: none;
}

and the following declaration in normal.css

#zone .block {
display: block;
}

the .blocks in #zone do not display on mobile and narrow but do display on normal and wide.

If I move the declaration

#zone .block {
display: block;
}

to default.css, the blocks do not display on mobile but display on narrow, normal and wide.

That's what happens when I use a fresh install of Omega, with a fresh sub theme on a fresh drupal. That seems to be in agreement with everything I have read and watched.

Further if I query the DOM with firebug on the fresh install I find that the stylesheets load in the following order:

gobal.css <-- it loads first

default.css
narrow.css
narrow-grid css

default.css
normal.css
normal-grid css

default.css
wide.css
wide-grid css

You see that here...

<style media="all" type="text/css">
@import url("omega/alpha/css/alpha-reset.css?mdmosa");
@import url("omega/alpha/css/alpha-mobile.css?mdmosa");
@import url("omega/alpha/css/alpha-alpha.css?mdmosa");
@import url("trout/css/global.css?mdmosa");
</style>

<style media="all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)" type="text/css">
@import url("trout-alpha-default.css?mdmosa");
@import url("trout-alpha-default-narrow.css?mdmosa");
@import url("narrow/alpha-default-narrow-12.css?mdmosa");
</style>

<style media="all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)" type="text/css">
@import url("trout/css/trout-alpha-default.css?mdmosa");
@import url("trout/css/trout-alpha-default-normal.css?mdmosa");
@import url("normal/alpha-default-normal-12.css?mdmosa");
</style>

<style media="all and (min-width: 1220px)" type="text/css">
@import url("trout-alpha-default.css?mdmosa");
@import url("trout-alpha-default-wide.css?mdmosa");
@import url("wide/alpha-default-wide-12.css?mdmosa");
</style>

UNFORTUNATELY my sub theme does not work the way this unadulterated test above.

When I place the following declaration in global.css:

#zone .block {
display: none;
}

and the following declaration in normal.css

#zone .block {
display: block;
}

The .blocks in #zone do not display for mobile or any responsive size... they are hidden for all sizes (that is contrary to the above example of a fresh install and contrary to everything I have read.)

Furthermore, while the global.css in the fresh install above clearly loads before the responsive css thus allowing the responsive css to override the global.css, in my sub theme all the responsive css loads first, then the global.css loads, then the grid css loads.

Here is a firebug of the loading of stylesheets for my sub theme... loading order: all the responsive stylesheets > global.css and optional omega stylesheets > all the responsive grid css...

<style media="all and (min-width: 767px)" type="text/css">
@import url("salmon/css/salmon-salmon-alpha-default.css?mdmkrv");
</style>
<style media="all and (min-width: 767px) " type="text/css">
@import url("salmon-salmon-alpha-default-narrow.css?mdmkrv");
</style>
<style media="all and (min-width: 979px) " type="text/css">
@import url("salmon-salmon-alpha-default-normal.css?mdmkrv");
</style>
<style media="all and (min-width: 1200px) " type="text/css">
@import url("salmon-salmon-alpha-default-wide.css?mdmkrv");
</style>
<style media="all" type="text/css">
@import url("alpha-mobile.css?mdmkrv");
@import url("alpha-alpha.css?mdmkrv");
@import url("formalize.css?mdmkrv");
@import url("global.css?mdmkrv");
</style>
<style media="all and (min-width: 767px) and (min-device-width: 767px)" type="text/css">
@import url("salmon-default-narrow-24.css?mdmkrv");
</style>
<style media="all and (min-width: 979px) and (min-device-width: 979px)" type="text/css">
@import url("salmon-default-normal-24.css?mdmkrv");
</style>
<style media="all and (min-width: 1200px)" type="text/css">
@import url("salmon-default-wide-24.css?mdmkrv");
</style>

Here are some relevant points about my sub theme:

1) all compression is turned off
2) I am using LESS ( I have read a ton of posts about LESS and Omega and can't find anything of assistance.)
3) less is compiled with every page load (i.e.; its in developer mode)
4) I am using a custom grid

Because the fresh install of Omega works as I have outlined, I assume that the issue is with my implementation of the custom grid.

Again, I have follow all the posts and comments on implementing custom grids, that I can find... I cannot see where that might be an issue. However, here is my .info file for my subtheme, in case you see a problem... (minus the zone and region declaration which is long and tedious...)

name = Salmon
description = This is an Omega 3.0 HTML5 sub theme.  It offers a  24 column/1080px grid, custom ds grids, custom tmp.php files and lots of extra regions.
core = 7.x
engine = phptemplate
screenshot = screenshot.png
version = 3.0
base theme = omega

; OPTIONAL STYLESHEETS

css[global.css.less][name] = Salmon Theme global styles (mobile first!)
css[global.css.less][description] = LESS CSS stylesheet for Salmon Theme.
css[global.css.less][options][weight] = '10'	
settings[alpha_css][global.css.less] = 'global.css.less'

;  24 column/1080px GRID SCAFFOLDING STYLESHEETS

stylesheets[all and (max-width: 800px)][] = css/grid/salmon_default/narrow/salmon-default-narrow-24.css
stylesheets[all and (min-width: 800px)][] = css/grid/salmon_default/normal/salmon-default-normal-24.css
stylesheets[all and (min-width: 1200px)][] = css/grid/salmon_default/wide/salmon-default-wide-24.css

; IF YOU SET UP YOUR OWN GRID YOU NEED TO DECLARE THESE RENAMED STYLESHEETS

stylesheets[all and (min-width: 767px)][] = css/salmon-salmon-alpha-default.css.less
stylesheets[all and (min-width: 767px) ][] = css/salmon-salmon-alpha-default-narrow.css.less
stylesheets[all and (min-width: 979px) ][] = css/salmon-salmon-alpha-default-normal.css.less
stylesheets[all and (min-width: 1200px) ][] = css/salmon-salmon-alpha-default-wide.css.less

; IF YOU SET UP YOUR OWN GRID YOU NEED TO DECLARE SETTINGS

grids[salmon_default][name] = Salmon (1080px | 24 col)
grids[salmon_default][layouts][fluid] = Fluid
grids[salmon_default][layouts][narrow] = Narrow
grids[salmon_default][layouts][normal] = Normal
grids[salmon_default][layouts][wide] = Wide
grids[salmon_default][columns][24] = 24 Columns

; THEME SETTINGS (DEFAULTS)
										
settings[alpha_grid] = 'salmon_default'
settings[alpha_primary_salmon_default] = 'normal'
settings[alpha_responsive] = '1'

settings[alpha_layouts_salmon_default_primary] = 'normal'
															
settings[alpha_layouts_salmon_default_fluid_responsive] = '1'
settings[alpha_layouts_salmon_default_fluid_media] = '(max-device-width: 767px)'
settings[alpha_layouts_salmon_default_fluid_weight] = '0'			

settings[alpha_layouts_salmon_default_narrow_responsive] = '1'
settings[alpha_layouts_salmon_default_narrow_media] = 'all and (min-width: 767px) and (min-device-width: 767px)'
settings[alpha_layouts_salmon_default_narrow_weight] = '1'

settings[alpha_layouts_salmon_default_normal_responsive] = '1'
settings[alpha_layouts_salmon_default_normal_media] = 'all and (min-width: 979px) and (min-device-width: 979px)'
settings[alpha_layouts_salmon_default_normal_weight] = '2'

settings[alpha_layouts_salmon_default_wide_responsive] = '1'
settings[alpha_layouts_salmon_default_wide_media] = 'all and (min-width: 1200px)'
settings[alpha_layouts_salmon_default_wide_weight] = '3'

settings[alpha_viewport] = '1'
settings[alpha_viewport_initial_scale] = '1'
settings[alpha_viewport_min_scale] = '1'
settings[alpha_viewport_max_scale] = '1'
settings[alpha_viewport_user_scaleable] = ''

settings[alpha_libraries][omega_formalize] = 'omega_formalize'
settings[alpha_libraries][omega_equalheights] = '0'
settings[alpha_libraries][omega_mediaqueries] = 'omega_mediaqueries'

settings[alpha_css][alpha-reset.css] = '0'
settings[alpha_css][alpha-mobile.css] = 'alpha-mobile.css'
settings[alpha_css][alpha-alpha.css] = 'alpha-alpha.css'
settings[alpha_css][omega-text.css] = '0'
settings[alpha_css][omega-branding.css] = '0'
settings[alpha_css][omega-menu.css] = '0'
settings[alpha_css][omega-forms.css] = '0'
settings[alpha_css][omega-visuals.css] = '0'

settings[alpha_debug_block_toggle] = '0'
settings[alpha_debug_block_active] = '0'
settings[alpha_debug_grid_toggle] = '0'
settings[alpha_debug_grid_active] = '0'
settings[alpha_debug_grid_roles][1] = '0'
settings[alpha_debug_grid_roles][2] = '0'
settings[alpha_debug_grid_roles][3] = '0'

settings[alpha_toggle_messages] = '1'
settings[alpha_toggle_action_links] = '1'
settings[alpha_toggle_tabs] = '1'
settings[alpha_toggle_breadcrumb] = '0'
settings[alpha_toggle_page_title] = '1'
settings[alpha_toggle_feed_icons] = '1'
settings[alpha_hidden_title] = '0'
settings[alpha_hidden_site_name] = '0'
settings[alpha_hidden_site_slogan] = '0'

settings[collapsiblock_block] = 'section.block'
settings[collapsiblock_title] = 'h2.block-title'
settings[collapsiblock_content] = 'div.content'

Can you help me to get my subtheme to behave like the fresh install of a new Omega subtheme >>> global first then over-ridden by default (for all but mobile) and narrow, normal and wide for each of their respective media queires...

Sorry for the long post but I wanted to state the issue clearly and state the comparison between an out-of-box Omega subtheme and my implementation...

smerth’s picture

smerth commented
Status: Active » Fixed

OK.. I figured it out... For anyone else implementing a custom grid you will need to declare the responsive css files in the .info file. MY MISTAKE WAS not naming the files correctly. I named them as follows:

stylesheets[all and (min-width: 767px)][] = css/salmon-salmon-alpha-default.css.less
stylesheets[all and (min-width: 767px) ][] = css/salmon-salmon-alpha-default-narrow.css.less
stylesheets[all and (min-width: 979px) ][] = css/salmon-salmon-alpha-default-normal.css.less
stylesheets[all and (min-width: 1200px) ][] = css/salmon-salmon-alpha-default-wide.css.less

The correct naming is: 

stylesheets[all and (min-width: 767px)][] = css/salmon-salmon-default.css.less
stylesheets[all and (min-width: 767px) ][] = css/salmon-salmon-default-narrow.css.less
stylesheets[all and (min-width: 979px) ][] = css/salmon-salmon-default-normal.css.less
stylesheets[all and (min-width: 1200px) ][] = css/salmon-salmon-default-wide.css.less

The crazy thing is that with the mistaken naming everything works just as expected except the global overrides the responsive CSS. So you think everything is OK until you are deep into thumbing...

Anyway, hope this helps someone...

Also if you want to be able to toggle them on and off don't declare them as above, which does work but doesn't allow you to toggle them in the admin UI, instead declare them as follows:

css[salmon-salmon-default.css.less][name] = Default styles
css[salmon-salmon-default.css.less][description] = This file holds the CSS for all media calls except modile.
css[salmon-salmon-default.css.less][options][weight] = 0

css[salmon-salmon-default-narrow.css.less][name] = Narrow  styles
css[salmon-salmon-default-narrow.css.less][description] = This file holds the CSS for all Narrow, Normal and Wide media calls.
css[salmon-salmon-default-narrow.css.less][options][weight] = 1

css[salmon-salmon-default-normal.css.less][name] = Normal styles
css[salmon-salmon-default-normal.css.less][description] = This file holds the CSS for all Normal and Wide media calls.
css[salmon-salmon-default-normal.css.less][options][weight] = 2

css[salmon-salmon-default-wide.css.less][name] = Wide styles
css[salmon-salmon-default-wide.css.less][description] = This file holds the CSS for Wide media calls.
css[salmon-salmon-default-wide.css.less][options][weight] = 3

Cheers!

greenskunk’s picture

greenskunk
Location Great Valley, NY
commented

Glad you figured it out.

smerth’s picture

smerth commented
Title: global.css loads after and overrides default.css, narrow.css, normal.css and wide.css in a sub-theme with custom grid » Amendment

For anyone implementing a custom grid. Please ignore the last half of my statement above. The correct way to state the responsive css files is:

stylesheets[all and (min-width: 767px)][] = css/salmon-salmon-default.css.less
stylesheets[all and (min-width: 767px) ][] = css/salmon-salmon-default-narrow.css.less
stylesheets[all and (min-width: 979px) ][] = css/salmon-salmon-default-normal.css.less
stylesheets[all and (min-width: 1200px) ][] = css/salmon-salmon-default-wide.css.less

(salmon is my sub theme name)

Stating them the way global.css is stated (in order to get the toggle on/off in the UI) doesn't work properly. > default loads on mobile (global takes precedence so I missed the fact it was loading until I came to a specific bit of theming that didn't work right.)

Also, I think the way the media calls are stated in the brackets controls when these load (or maybe not,... maybe its controlled somewhere else.) I'll have to play with that to figure it out...

I tried reading the owner's manual but it was another language, coffee stains obscured the text and the dog ate it. Where is the owner's manual when you need it... ;-)

smerth’s picture

smerth commented
Title: Amendment » Problem setting up a custom grid

Hi everyone,

When I posted an update I accidentally changed to issue title.. I can't remember the original one so I am giving it a new one.. sorry if that confuses anyone...

S

greenskunk’s picture

greenskunk
Location Great Valley, NY
commented

After reviewing almost every post, I believe you had a naming issue with the responsive CSS files in your subtheme. I see in your first post that your theme's name is "salmon" but I don't understand why you prefixed the CSS files with "salmon-salmon" instead of just "salmon".
Omega is built to check for and use any files in the "css" directory of your subtheme that follow the syntax of 

THEMENAME-alpha-default.css
THEMENAME-alpha-default-narrow.css
THEMENAME-alpha-default-normal.css
THEMENAME-alpha-default-wide.css

See #4 on http://drupal.org/node/1298682

Since you are explicitly declaring the CSS files in your subtheme's .info file they appear.
stylesheets[all and (min-width: 767px)][] = css/salmon-salmon-alpha-default.css.less

Once again I'm glad you got it working and you learned a little more about Omega.

I'm interested in what you produce with your custom grid.

Have a great time with Drupal!
Jeremy

smerth’s picture

smerth commented

Hi Jeremy,

If you are creating a standard sub theme you name your responsive CSS files as in your above reply. Essentially what that does is tell the system to apply those CSS files when responding to media calls in accordance to the alpha-default-* grids, which are pulled from the alpha.theme. And those grids are all named by convention alpha-default-*.

When you implement your own grid you first build your grid (a bunch of CSS files and png images in a folder) and you name those CSS grid files after your theme. The naming convention is mythemename-default-* instead of: alpha-default-*.

So when you name the responsive CSS files the naming convension is: mythemename- followed by the reference to the newly named grid you have created, which is already named: mythemename-default-*. So the name becomes: mythemename-mythemename-default-*, for each of your responsive CSS files (default, narrow, normal, wide.)

I think people get confused on this point (I know I did.)

The mistake I made in the original post was naming my files
mythemename-mythemename-alpha-default-*

That alpha isn't right because your now pointing to the new grid you've made and not the alpha grid.

See this post: http://groups.drupal.org/node/164684

What am I building with a custom grid? When I decided to go with Omega as my go-to theme for Drupal projects I wanted to be able to implement any grid I choose. I cannot see having a standard go-to theme and not being in full control of gutters and column width,... everything really.

I know the next version of Omega will come out of the box with a ton of flexibility for grids, so maybe all this wrangling is a waste,... but Drupal is like that. The next best thing is always 6 months down the road... ;-)

greenskunk’s picture

greenskunk
Location Great Valley, NY
commented

smerth thank you for the explanation. have a great day

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.