Creating and Setting up a Custom Grid for Omega 3.x

It doesn't to find the renamed png overlay (subtheme-default-normal-24.png in my case), while it doés respond to the subtheme-default-normal-24.css.

Edit:

Found the reason why. I only need two layouts: normal and narrow, so I put this in my .info file:

But apparently the narrow shouldn't be in there, so this solved it:

The PNG is back, but what about the narrow layout now?

I think you need to change the name of your CSS file to use hyphens "-" instead of underscores "_".

So if your subtheme is named "mysubtheme", then the CSS files would use this pattern:
sites/all/themes/mysubtheme/css/mysubtheme-alpha-default-normal.css
sites/all/themes/mysubtheme/css/mysubtheme-alpha-default-narrow.css
sites/all/themes/mysubtheme/css/mysubtheme-alpha-default-wide.css

etc.

Hi,

I have a probelm after I have create the new grid I don't see the grid.png can you explain me how can I solve it?

I have copy the css and png file in this directory:

sites/all/themes/mytheme/css/grid/mytheme_default/normal/mytheme-default-normal-24.css
sites/all/themes/mytheme/css/grid/mytheme_default/normal/mytheme-default-normal-24.png

mytheme.info include:

grids[mytheme_default][name] = My Grid (990px)
grids[mytheme_default][layouts][normal] = Normal
grids[mytheme_default][columns][24] = 24 Columns

stylesheets[all and (min-width: 990px)][] = css/grid/mytheme_default/normal/mytheme-default-normal-24.css

can you help me what ists wrong?

kind regards
drew

Hi,

thanks for your answer :-). I don't no but now it works. I needed to delete the cache several times

kind regards
drew

kim.le, this was driving me nuts too! After about 5 attempts, I read all the comments, and noticed that you also need to add the css files to the sub-theme .info file. I have added this as step 7 so that others won't have the same problem.
Hopefully that fixes it for you. It did for me! ;)

You have to replace the underscores with dashes in the theme name in certain places. See "underscore in subtheme name causes problem".

Also note the comment in the directions above:

Best practice not to have an underline "_omega" in your theme-name. Otherwise it will look strange in the hooked filenames (yourtheme_omega_omega....).

In general, I think it's easiest if you pick a subtheme name that does not have any underscores so you don't even have to think about where to change the underscores to dashes.

Now everything is working here, and my stylesheets with custom grids are being included by Omega. But how do I get my custom "Narrow" CSS to appear AFTER my theme CSS, such as global.css?

As it is now, all these responsive stylesheets are loading BEFORE global.css. But I want them to be overriding global.css, as needed.

I know with stylesheets like global.css, I can set weight like this:

But with these custom grids and CSS, where do I set a weight?

Does this take into account all the settings that omega tools automatically creates in your info file? Cause when looking at this and the info file it creates i am confused.
my info file has this in it already...
settings[alpha_layouts_alpha_fluid_primary] = 'normal'
settings[alpha_layouts_alpha_fluid_normal_responsive] = '0'
settings[alpha_layouts_alpha_fluid_normal_media] = 'all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)'
settings[alpha_layouts_alpha_default_primary] = 'normal'
settings[alpha_layouts_alpha_default_fluid_responsive] = '0'
settings[alpha_layouts_alpha_default_fluid_media] = 'all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)'
settings[alpha_layouts_alpha_default_fluid_weight] = '0'
settings[alpha_layouts_alpha_default_narrow_responsive] = '1'
settings[alpha_layouts_alpha_default_narrow_media] = 'all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)'
settings[alpha_layouts_alpha_default_narrow_weight] = '1'
settings[alpha_layouts_alpha_default_normal_responsive] = '1'
settings[alpha_layouts_alpha_default_normal_media] = 'all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)'
settings[alpha_layouts_alpha_default_normal_weight] = '2'
settings[alpha_layouts_alpha_default_wide_responsive] = '1'
settings[alpha_layouts_alpha_default_wide_media] = 'all and (min-width: 1220px)'
settings[alpha_layouts_alpha_default_wide_weight] = '3'

do i have to delete this?

I have followed all the above, however, although the grid stylesheets are being picked up, it doesnt seem to be picking up the new grid settings, just using the alpha-mobile.css for setting the grid, regardless of display size...

Any ideas?

Also, baf139 mentioned the media queries. I changed these in the admin, although the info file doesnt update to reflect the changes? I would have expected this to update?

Everything about my custom grid works, except for one thing: the grid png itself.

My file names and path match the recommended pattern:

In my custom grid path:
subtheme/css/grid/subtheme_default/Normal/
subtheme-default-normal-6.css # loads in my page as expect
subtheme-default-normal-6.png # Apache can access this file without error
I've customized the png file to match the above layout parameters, which is here.

in my subtheme.info file:
grids[subtheme_default][name] = 1000px by 6 column grid
grids[subtheme_default][layouts][Normal] = Normal
grids[subtheme_default][columns][6] = 1000px by 6 column grid

I've cleared my theme registry and all caches, cleared my browser caches to no avail. I see in alpha.inc where the overlay background image is concatenated (or not if path isn't valid) but I don't see why

I am confused, and I cannot see my grid png file, all kinds of other grid images but not the one I have created.

In step 5 you say:
"You must also rename the ksno/css/ksno-alpha-default.css and ksno/css/ksno-alpha-default-{narrow,normal,wide}.css files to ksno/css/ksno-ksno-default*.css. This is because you have changed the alpha_default grids' name to ksno_default. Otherwise they will not be included."

In step 7 you say:
"Include the css files in the sub-theme .info file
For example:
stylesheets[all and (max-width: 1008px)][] = css/yourTheme-alpha-default-wide.css
stylesheets[all][] = css/yourTheme-alpha-default.css
stylesheets[all and (min-width: 1008px)][] = css/grid/yourTheme_default/wide/mysubtheme-default-wide-12.css"

Now you use the yourTeme-alpha and not yourTheme-yourTheme-default.

So which one is it?

I need to create a normal layout grid of:
984px
12 columns
Column width: 78px
Gutter: 2px

My info file:
;CSS GRID SYSTEMS
grids[constantia_r_default][name] = Constantia_r (980px)
grids[constantia_r_default][layouts][normal] = Normal
grids[constantia_r_default][columns][12] = 12 Columns

stylesheets[all and (min-width: 980px)][] = css/grid/constantia_r/normal/constantia-r-default-normal.css
styelsheets[all][] = css/constantia-r-alpha-default.css

Still don't see my grid.

And these lines are very confusing:

*/-->

<![endif]-->

*/-->

Doesn't that mean I will see my grid.png file only on ie9???

And by the way, I don't see it on IE9 either.

I cleared cache, I reverted the theme, I cleared cache, I selected my grid, I cleared cache, I cleared cache, I cleared cache.

Nada.

Somebody kill me please...

Thanks, dhalbert. I had issues until I read your post. Once I removed the lines I added as part of step 7, the grid overlay displayed correctly. Thanks for taking the time to list your files. It was very helpful.

As dhalbert mentions, step 7 is not needed. Here is an elaboration as to why it isn't needed.

Once the new grid system is chosen in the theme configuration settings,
the grid css files are automatically loaded.

However, by default, omega does not fill in the media queries for you in the configuration form so you need to do this on your own for each layout (this would be the real step 7).

Once you've done that, you can inspect the page and see the media queries are loading the grid files.

Another thing I found is that this line: settings[alpha_grid] = 'GRID_NAME' in the info file is not updated to reflect the new chosen grid system (this depends if the settings are maintained in code or the db).
Simply update it to the new grid name, for example: (the real, optional - step 8)
settings[alpha_grid] = 'mytheme_default'

Your various break-point css files will now load properly. If they don't, make sure you renamed the css files in step 5 correctly. The convention is:

[THEME_NAME]-[GRID_NAME]-[WIDE/NORMAL/NARROW].css
(use only hyphens)

Hope this helps some out :)

If you want to extend the existing alpha_default grid to 1920 pixels width, please have a look at post #10 “How to add a new layout size” (https://drupal.org/node/1607748).

I followed the instructions above and everything seems to work except for two things.

None of the zone/regions above content re-sized and the debug column png did not show.

I suspect the first is because some values were already in the variables table.

On the second it is because the grid layout enabled value is set false (though it is set true in the UI), The pngs are rendered if responsive is turned off.

line 402 in alpha.inc

What controls enabled value? Surely it is that the theme is enabled? Even disabling and re-enabling did not affect this value.

I suspect this issue arises when you clone your theme from a version of omega you have already enabled.

Until I replaced every underscore in the generated file by a hypen.
In the css every _ must be a - so that for example .container_48 and .grid_1 changes to .container-48 and .grid-1