How to add a new responsive Layout for large viewports to Omega Theme

Question

I would like to add another Layout to the Omega-Theme Settings, because i need a certain media-query for an extra-large viewport. I tried adding a new setting to the .info-file but without success. Maybe this will be possible only by adding a new media-query directly to the css-file?

Answer 1

You need to copy the grids variable from the default alpha.info file, and add your new layout in your theme's .info file like so:

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][wider] = Wider  <- Your custom layout
grids[alpha_default][columns][12] = 12 Columns
grids[alpha_default][columns][16] = 16 Columns
grids[alpha_default][columns][24] = 24 Columns

# Default settings for the new layout
settings[alpha_layouts_alpha_default_wider_responsive] = '1'
settings[alpha_layouts_alpha_default_wider_media] = 'media query here'
settings[alpha_layouts_alpha_default_wider_weight] = '4'

You'll also need a new CSS file (called THEMENAME-alpha-default-wider.css) to manage CSS for that layout, but Alpha/Omega should handle the rest for you.

Answer 2

You could also add include another css file in the info file and then specify the media query in the new file. This work on every template.

info file:

...
stylesheets[all][] = template_file.css
stylesheets[all][] = override.css
...

override.css

@media ...