24 column grid/gutter widths [#1174324]

The 24 column grid widths - or more specifically the gutter widths - seem to be different from the ones detailed on the 960gs site.

Compare http://960.gs/demo_24_col.html with the overlay that you get when you turn on grid debugging in the 24 column omega grid. In Omega, the gutter widths seem to be 20px (10+10) rather than 10px (5+5). Is this deliberate? Is there any way to get the smaller gutters?

Thanks,

Comment	File	Size	Author
#8	omega-960_grid_24_col.psd	932.9 KB	smitherrama

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

fubhy CreditAttribution: fubhy commented 31 May 2011 at 16:42

Status:

Active

» Closed (fixed)

When we generated the grids for the Default Grid system in Omega (720px, 960px and 1200px) we wanted to have the same gutter widths across all layouts and just alter the column widths. This is why you see this behavior with the standard grids that ship with Omega 3.x.

However, there is no need to cry :*( !

We got a solution for you :-) !

In Omega 3.x you can generate and include your own custom grids! This is quite easy and pretty straight forward but is not documented anywhere just yet. Please take a look at the alpha.info file (/sites/all/themes/omega/alpha/alpha.info) and search for "grids[]" => This is where the grids that ship with the standard Omega Package are defined. Please also take a look at "/sites/all/themes/omega/alpha/css/grid" => This is where the CSS for the grids resides.

So in order to include your own custom grid system with all the different responsive and column layouts you would just have to follow that pattern in your subtheme.info file aswell as in your subtheme's CSS folder.

Comment #2

mrfelton CreditAttribution: mrfelton commented 31 May 2011 at 16:48

Yep - I'm 80% there now...

I used http://www.spry-soft.com/grids/ to generate a custom grid layout, but something worth noting is that if you do that, you also need to do a search/replace to replace underscores with hyphens :)

Thanks

Comment #3

fubhy CreditAttribution: fubhy commented 31 May 2011 at 17:04

Yep. That plus some other tweaks. Please check out the grids inside of the /alpha/css/grid folder. They lead you to the right css markup that you need! :)

Comment #4

knalstaaf CreditAttribution: knalstaaf commented 9 November 2011 at 14:26

Version:	7.x-3.x-dev	» 7.x-3.0-rc2
Status:	Closed (fixed)	» Active

I'm afraid I'm a little lost here.

I have a design based on the standard 960° grid as well (24 columns, column width: 30px, gutter: 10px). Here are the steps I followed:

I had a look at /sites/all/themes/omega/alpha/alpha.info and copied all the grids[] lines into my subtheme.info (with no modifications).
I had a look at the css files in /sites/all/themes/omega/alpha/css/grid and copied the code from alpha-default-normal-24.css to my /sites/all/themes/subtheme/css/subtheme-alpha-default-normal.css. I made some modifications there, but they didn't seem to come through (even after clearing the cache).
Went to the Variable Grid System generator (excellent page, thanks for that), created the standard 960° grid as mentionned above, replaced the underscores with hyphens, and saved it as /sites/all/themes/subtheme/css/subtheme-alpha-default-normal.css. Same problem, the theme doesn't seem to respond to these changes.

Is there anything I overlooked, or something I'm using the wrong file for? What are the "other tweaks" mentionned in #3?

I'm using a Narrow and Normal layout (Wide and Fluid are disabled).

Comment #5

dhalbert CreditAttribution: dhalbert commented 14 November 2011 at 00:40

Status:

Closed (works as designed)

» Active

See this writeup in the Omega wiki: Creating and Setting up a Custom Grid for Omega 3.x

I had a look at /sites/all/themes/omega/alpha/alpha.info and copied all the grids[] lines into my subtheme.info (with no modifications).

Modify them to say [subtheme_default] instead of [alpha_default].

I had a look at the css files in /sites/all/themes/omega/alpha/css/grid and copied the code from alpha-default-normal-24.css to my /sites/all/themes/subtheme/css/subtheme-alpha-default-normal.css

I think you copied them into the wrong level. You need to copy them into /sites/all/themes/subtheme/css/grid/subtheme_default/{wide,narrow, etc.}/. In other words, mimic the directory structure you find in the original griddirectory.

Note you must also rename the subtheme/css/subtheme-alpha-default.css and subtheme/css/subtheme-alpha-default-{narrow,normal,wide}.css files to subtheme/css/subtheme-mytheme-default*.css. This is because you have changed the alpha-default grids name to subtheme-default.

The link at the beginning of this comment is very helpful. I also wrote up a reference to it at http://drupal.stackexchange.com/questions/13561/how-to-overwrite-omega-9...