Hi,

I have a question in mind that I hope will not looks to stupid.

Omega work with 960gs. Is there possible to work with a custom grid system ?
On 960.gs website, there is a link to http://grids.heroku.com/ to create a own grid system based on 960gs.

Can I easely paste and copy a new css grid on the 960.css omega's default file?? Is there another solution ?

Thanks!

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

filnug’s picture

Title: Omega Theme with a custom Grid System based on 960gs » How to define my own 960 grid ?

Maybe I should ask my question in a different way...

How can I define my own 960 grid with omega theme ?

On http://omega.developmentgeeks.com/ is written

CROSS BROWSER
Powered by a modified 960.gs implementation, Omega offers multiple, out of the box grid sizes, and the ability to define your own!

modulist’s picture

If you have the alpha them enabled and you create a new omega child theme, you should see a slew of files in /sites/all/themes/yourtheme/css/.

You can modify the numeric values in each of those files, starting with yourtheme-alpha-default-normal.css. I created an 880-px grid based on a 16-column 960 grid (minus 5px in each column). This gave me a very slim look and feel with 40 extra pixels of white space in each margin.

Here's the formula I used:
(column number * (column width + (2*margin))) - (2*margin)

For the 880 pixel grid with 35-pixel columns and 10-pixel margins, this turned out to be
(n*(35+(2*10))) - (2*10)
or more simply
(n*55) - 20

Below is the code for the re-written column widths. I've also attached the full CSS file which you can use for reference. This should give you an idea of how to modify all the remaining measurements.

I'd love to see how to best implement this without overwriting the 960 grid, so that you can use a custom grid *and* the default 960 grid in a site.


/*
 * ==========================================================
 * Columns
 * ==========================================================
 */

.container-16 .grid-1 {
  width: 35px;
}

.container-16 .grid-2 {
  width: 90px;
}

.container-16 .grid-3 {
  width: 145px;
}

.container-16 .grid-4 {
  width: 200px;
}

.container-16 .grid-5 {
  width: 255px;
}

.container-16 .grid-6 {
  width: 310px;
}

.container-16 .grid-7 {
  width: 365px;
}

.container-16 .grid-8 {
  width: 420px;
}

.container-16 .grid-9 {
  width: 475px;
}

.container-16 .grid-10 {
  width: 530px;
}

.container-16 .grid-11 {
  width: 585px;
}

.container-16 .grid-12 {
  width: 640px;
}

.container-16 .grid-13 {
  width: 695px;
}

.container-16 .grid-14 {
  width: 750px;
}

.container-16 .grid-15 {
  width: 805px;
}

.container-16 .grid-16 {
  width: 860px;
}
filnug’s picture

Thank you for your complete answer! :-D

My default css file in mytheme/css have different files :
- yourtheme-alpha-default.css
- yourtheme-alpha-default-normal.css
- yourtheme-alpha-default-wide.css
- yourtheme-alpha-default-narrow.css

I imagine that every css file can be modified for a normal, wide, narrow or fluid grid.

You talk about the Alpha theme and I recently used an Omega subtheme. Looking the Alpha and Omega base themes, I can see they looked a bit different.
Do you advice to use only the Alpha subtheme when a custom grid is needed?

Thank you again

modulist’s picture

I have both Alpha and Omega enabled (along with the omega tools module).

If you do create a custom grid, then I strongly urge you to create a child subtheme, and make all your edits in the subtheme, not in Alpha or Omega. You'll need to have the omega_tools module installed to create a subtheme the easy/automatic way.

In answer to your question : maybe you don't need to have Alpha enabled at all -- it's not clear in the theming documentation if Alpha is merely a library of source code to borrow from for your subtheme.

dhalbert’s picture

I too was struggling with this, and then found this very clear writeup in the Omega wiki: Creating and Setting up a Custom Grid for Omega 3.x.

By the way, you don't need to have any Alpha or Omega themes enabled except for your actual subtheme.

filnug’s picture

Status: Active » Fixed

Thank you both of us for your answer ! I didnt had time to test it properly, but it looks pretty clear that it is possible to keep omega and use own grids.

Status: Fixed » Closed (fixed)

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