How to add a new layout size

Subscribe!

also looking for guidance on how to do this as it is a current major advantage of http://drupal.org/project/arctica in that its very easy to add these layout sizes

What you're looking at here is trying to create a custom grid. In 3.x this is done by following the steps (and comments) in the Omega Groups Wiki

In 4.x we'll have the ability to create grids on the fly using the omega grid system or any grid system you choose (zen grids, susy etc.) this will all be done with SASS so if you're not using that yet I recommend you start trying it out in order to get ready for 4.x.

So if I add a new layout size do i need to add all the grid settings and css files into my info file? The wiki only explains how to achieve creating two layouts. I want all the existing layouts plus one more. Is that possible?

Okay, i realize now that this is a mis-communication of what i am trying to accomplish. I followed the steps posted here http://groups.drupal.org/node/164684 with success only find out that this is not my goal. Impressive to say the least but overkill for what i hope to achieve.

Those steps and comments will give you an entirely new Grid system option in the drop down choices for grid settings. COOL! However, that's not quite what i am trying to do.

I would like to simply add another layout option to the existing Default (960px) grid system. I would like to be able to give this layout it's own media query via the UI, and give it it's own css file in the myTheme.info file.

Is this possible?

baf139,

I think you have the same goal that I do- a layout that goes wider than 1200. Last night I changed the 16-grid Wide Layout to use 100 pixel spacing (alpha-default-wide-16.css). I have a header and 2nd right sidebar that is 3-grids wide and the rest is big real estate in the middle. This looks pretty amazing on a 1080p monitor as many of us do (1920 x 1080), especially with grid-based content or scalable video to fill this area (not so great with text). My portfolio view with isotope animates the thumbnails all the way across the screen now.

But it's just too wide for my laptop at 1600 x 900. So I need to keep the Wide mode for the mid range and make this new SuperWide mode for HD and SmartTV.

Thanks for the link to the instructions. This worked for me, providing a "4th gear" if you will.

My theme now uses a different "wider" format for screens that are 1600 pixels wide or larger (as opposed to "wide" at 1200px or less).

Hi baf139 Did you resolve this? if so please share...thanks

Here's what I did in order for a new breakpoint/layout to appear on my omega setting UI.

1. From the alpha.info file found in sites/all/themes/omega/alpha, copy the following lines:

; CSS GRID SYSTEMS

grids[alpha_default][name] = Default (960px)
grids[alpha_default][layouts][fluid] = Fluid
grids[alpha_default][layouts][narrow] = Narrow
grids[alpha_default][layouts][normal] = Normal
grids[alpha_default][layouts][wide] = Wide
grids[alpha_default][columns][12] = 12 Columns
grids[alpha_default][columns][16] = 16 Columns
grids[alpha_default][columns][24] = 24 Columns

grids[alpha_fluid][name] = Fluid
grids[alpha_fluid][layouts][normal] = Normal
grids[alpha_fluid][columns][12] = 12 Columns
grids[alpha_fluid][columns][16] = 16 Columns
grids[alpha_fluid][columns][24] = 24 Columns

2. Paste it to your subthemes info file sites/all/themes/your_subtheme/ and add a new line for your new layout/breakpoint.
ex.
grids[alpha_default][name] = Default (960px)
grids[alpha_default][layouts][fluid] = Fluid
grids[alpha_default][layouts][narrow] = Narrow
grids[alpha_default][layouts][normal] = Normal
grids[alpha_default][layouts][wide] = Wide
grids[alpha_default][layouts][extra] = Extra /* <-- */
grids[alpha_default][columns][12] = 12 Columns
grids[alpha_default][columns][16] = 16 Columns
grids[alpha_default][columns][24] = 24 Columns

grids[alpha_fluid][name] = Fluid
grids[alpha_fluid][layouts][normal] = Normal
grids[alpha_fluid][columns][12] = 12 Columns
grids[alpha_fluid][columns][16] = 16 Columns
grids[alpha_fluid][columns][24] = 24 Columns

3. Find the following lines in your subthemes info file
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'

4. Just make a copy of the _responsive, _media, _weight settings, edit and save.
ex.
settings[alpha_layouts_alpha_default_extra_responsive] = '1'
settings[alpha_layouts_alpha_default_extra_media] = 'all and (min-width: 1800px)'
settings[alpha_layouts_alpha_default_extra_weight] = '4'

5. Add a new css file in sites/all/themes/your_subtheme/css.
ex. yourtheme-alpha-default-extra.css

6. Clear the cache. :)

Note: You may have to uncheck and check the Enable the responsive grid for the new layout to show.

Sorry for being too detailed, it's to make sure it could be understood by everyone. Hope this helps. :)

Based on the information found on this page and on the page “Creating and Setting up a Custom Grid for Omega 3.x” (https://groups.drupal.org/node/164684), I have added wide1440, wide1680, and wide1920 layout sizes to the alpha_default theme :
(You can find all the needed css files in the attached zip file.)

1) Edit your subtheme's info file:

(You can copy paste from the file yoursubtheme.info.changes.txt included in the attached zip file.)
; Begin: "grid" Lines to add to yoursubtheme.info
; CSS GRID SYSTEMS
grids[alpha_default][name] = Default (960px)
grids[alpha_default][layouts][fluid] = Fluid
grids[alpha_default][layouts][narrow] = Narrow
grids[alpha_default][layouts][normal] = Normal
grids[alpha_default][layouts][wide] = Wide
grids[alpha_default][layouts][wide1440] = Wide1440
grids[alpha_default][layouts][wide1680] = Wide1680
grids[alpha_default][layouts][wide1920] = Wide1920
grids[alpha_default][columns][12] = 12 Columns
grids[alpha_default][columns][16] = 16 Columns
grids[alpha_default][columns][24] = 24 Columns
; End: "grid" Lines to add to yoursubtheme.info

; DEFAULT THEME SETTINGS
; Begin: "settings" Lines to change in yoursubtheme.info
; OLD SETTINGS: settings[alpha_layouts_alpha_default_wide_media] = 'all and (min-width: 1220px)'
settings[alpha_layouts_alpha_default_wide_media] = 'all and (min-width: 1220px) and (min-device-width: 1220px), all and (max-device-width: 1280px) and (min-width: 1280px) and (orientation:landscape)'
; End: "settings" Lines to change in yoursubtheme.info

; Begin: "settings" Lines to add to yoursubtheme.info
settings[alpha_layouts_alpha_default_wide1440_responsive] = '1'
settings[alpha_layouts_alpha_default_wide1440_media] = 'all and (min-width: 1460px) and (min-device-width: 1460px), all and (max-device-width: 1520px) and (min-width: 1520px) and (orientation:landscape)'
settings[alpha_layouts_alpha_default_wide1440_weight] = '4'
settings[alpha_layouts_alpha_default_wide1680_responsive] = '1'
settings[alpha_layouts_alpha_default_wide1680_media] = 'all and (min-width: 1700px) and (min-device-width: 1700px), all and (max-device-width: 1760px) and (min-width: 1760px) and (orientation:landscape)'
settings[alpha_layouts_alpha_default_wide1680_weight] = '5'
settings[alpha_layouts_alpha_default_wide1920_responsive] = '1'
settings[alpha_layouts_alpha_default_wide1920_media] = 'all and (min-width: 1940px)'
settings[alpha_layouts_alpha_default_wide1920_weight] = '6'
; End: "settings" Lines to add to yoursubtheme.info

2) Copy the css files to your subtheme's folder.

(Copy the whole directory structure from the zip file.)

3) Replace “yoursubtheme” with the name of your subtheme, in the following 3 css filenames:

yoursubtheme-alpha-default-wide1440.css
yoursubtheme-alpha-default-wide1680.css
yoursubtheme-alpha-default-wide1920.css

4) Clear all caches.

It should work immediately “out of the box”. (And should be included in the standard Omega theme! --> Feature request?) Good luck.

Good look! Comment #10
Thanks