3

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?

1
  • 1
    Why not simply change the default media queries in the Omega UI? That's what it's there for and it gives you plenty of options for Wide, Normal and Narrow. I don't know why you would need more than what's there now as wide viewports are already taken into account... Nov 19, 2012 at 15:26

2 Answers 2

3

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.

3
  • 1
    Your answer works perfect!
    – Madam Adam
    Nov 20, 2012 at 18:40
  • 2
    One correction: the new CSS file has to be called THEMENAME-alpha-default-wider.css
    – Madam Adam
    Nov 20, 2012 at 23:43
  • 1
    Yep so it does, sorry about that :)
    – Clive
    Nov 20, 2012 at 23:52
0

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 ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.