how to overwrite omega 960 grid margin?

Question

What is the correct way to overwrite the Omega theme stylesheet, so that the margin of .grid-1 is 0 instead of 10px?

I tried to specify this style:

.grid-1 {
  margin-left: 0;
  margin-right: 0;
}

in two stylesheets: /sites/all/themes/mytheme/css/mytheme-alpha-default-normal.css -> this one is not loaded at all

/sites/all/themes/mytheme/css/global.css -> this one is overwritten by alpha-default-normal-12.css

The alpha-default-normal-12.css is always at the top of all loaded stylesheets, so it looks like it can't be overwritten. And it contains the styles for all .grid-x margins.

So, how to specify my own margin for a grid?

Answer 1

The best explanation of how to do a custom grid in Omega I have found is in the Omega documentation wiki: Creating and Setting up a Custom Grid for Omega 3.x. As the Omega documentation matures, I hope this will move into the main documentation.

The basic idea is below (but see the link above for more details):

1. Copy the appropriate grids entries from alpha.info into mytheme.info. There will be no grids entries initially in your mytheme.info if you have created a subtheme in the normal way. You will be copying various grids[alpha_default] entries. Then edit those entries to be grids[mytheme_default].

2. Generate a new CSS grid file at http://grids.heroku.com/ or http://www.spry-soft.com/grids/. Just use this as a model for the next step, as it does not correspond exactly to the way Omega CSS grid files are written. The class naming conventions are a little different ("_" vs "-", for instance.

3. Copy the css and png files you need from sites/all/themes/omega/alpha/css/grid/alpha_default/{normal,wide,narrow,..}/alpha-default-*-*.{css,png}. to sites/all/themes/mythemes/css/grid/mytheme_default/{normal,wide,narrow,..}/mytheme-default-*-*.{css,png}. You will not need all the files unless you are planning to provide a complete set of narrow, normal, and wide 12 and 16-column grids. Just put in the ones you need.

4. If you are changing the default number of columns from 12, don't forget to edit the number-of-column defaults for all the different regions given further down in mytheme.info. Otherwise your pages will look wrong because they are using the original default settings.

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

I did all this recently for a design I was given that was 960px wide with no left and right margins. I set up a 60px by 16-column 960px grid.

The Omega Tools module has an incomplete wizard for setting up your own custom grid. Unfortunately, it does very little of the above as of this writing.