Adding a Region

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

Add a zone in your_theme.info

zones[my_new_zone] = My New Zone

Add new regions in your_theme.info

regions[my_new_region_1] = My new region 1
regions[my_new_region_2] = My new region 2

Save this, empty the cache and then go to theme UI and Zones and Regions config.

You will be able to add your zone to a section and your regions to a zone and then config widths etc etc.

Comments

Block moved

Ettore8's picture

www.ettorehippodamos.com italian verson, problem witht blocks, why?

Thanks

What if I want a region that's not on the grid?

DanielF's picture

This was apparently possible with Omega 2.x, but how do you display a non-grid region in 3.x?

Daniel - What do you mean by

Cellar Door's picture

Daniel - What do you mean by non-grid region? One that doesn't have grid classes associated for columns or one that doesn't stack up in the grid along with the others? If you provide context on what you're trying to achieve I can hopefully help.

Cellar Door

Hey Chris, Indeed, I shall

DanielF's picture

Hey Chris,

Indeed, I shall elaborate. In my particular case, the designer (who is one and the same as the client, alas), is asking for a horizontal navigation list that is 960px in width. It intentionally sticks out 10px on either side of the grid to create emphasis.

Only local images are allowed.

Using Omega, I could easily create a region that spans the width of the grid, but it would only be 940px wide, as is its nature. From there, I could write some overriding styles, but I was hoping the following would be a more elegant solution:

I'd like to create a region which lies between the header and content sections, and which does not use the grid (by which I do indeed mean it does not use any gs960 styles). Such a region could be easily styled to 960px width, and thus server my purpose. I would prefer this because it minimizes the number of styles I'm overriding.

Of course, I found the official article for adding regions, which includes instructions for non-grid regions, but they don't work. I went hunting, and found that Omega 3 excludes regions from display that aren't assigned to a region. I could find no way to override this in the UI, and I'm afraid that my knowledge of Drupal programming just isn't deep enough to handle this (i.e. it's not deep at all).

I hope this helps you understand my problem. Thanks for helping out!

Hi Daniel, I very quickly

samwillc's picture

Hi Daniel,

I very quickly managed to get the following (don't know how long this image will stay online, didn't log in or anything):

http://imageshack.us/f/820/overlappingmenutest.jpg/

using:

#region-branding {
background: blue;
}

#zone-main-menu {
background: orange;
}

#region-main-menu {
width: 100%;
background: #666;
margin: 0px;
}

#region-header-first {
background: orange;
}

Job done!

Sam.

Hey Sam, Thanks for the

DanielF's picture

Hey Sam,

Thanks for the response, and the sample code! Your solution may be what I end up using. But doesn't yours override the gs960 styles that Omega applies? I was hoping to avoid that to score elegance points, but again, I'll probably use your fix. Thanks for taking the time to put that together!

Daniel - I've done just that

Cellar Door's picture

Daniel -

I've done just that before with a menu that I did a banner wrap on (similar to what you're wanting to do). A little trick (well it's probably well known but I use it only as a trick) in Omega is if you place something via absolute positioning it'll remove it from the grid and you can then place however you'd like. To achieve what you want, I created a menu (using superfish as well) and set the width to 980px (in your case it can be 960px). Then I did absolute positioning in order to place it where I wanted on the page. The only other thing you'll need to do is make sure to put a padding/margin on your region that the menu is coming out of (or one of the neighboring regions) in order to make it not overlap anything.

The site I have this working on (responsive too w/ an image sprite) unfortunately isn't public yet. Catch me on IRC #drupal-omega and pm me for the link. It'll do exactly what you want and keep your regions (and grid) intact.

Hi Daniel, The 960 styles

samwillc's picture

Hi Daniel,

The 960 styles have a 10px margin either side of the columns so you have to overide that 10px. On further thinking maybe you could do this.

Add a class of 'alpha' and 'omega' where in your theme settings:

zone > configuration > Additional zone classes

These are built into omega theme css and should remove the left and right margins for you simply by adding the extra classes.

Your resulting source code would look like this (providing you did the above on a zone called 'main menu'):

<div id="region-main-menu" class="grid-24 region region-main-menu alpha omega">

I haven't tried but I don't see why it wouldn't work. In theory, grid-24 will stick on the left 10px and right 10px (left and right of the 940px - or first and last columns), alpha will then remove 10px left and omega 10px right.

I actually added a third class in my css called gamma which removes left and right 10px. I use this for mobile versions of views etc. Alpha/omega only removing left/right 10px respectively means on mobile you end up with the left/right 10px still thereonce the regions collapse!

Hope this helps :)

Sam.

Another trick I have to share

samwillc's picture

Another trick I have to share :)

I use a second hidden menu on my services page which only appears on mobile versions (the original secondary menu 'other services block' is then hidden). This means the secondary menu stays at the top and the 'blog latest' block drops under the content region when resized. Otherwise on a mobile you'd get main menu > secondary menu > blog latest > content, which wouldn't make much sense.

Now you get main menu > secondary menu > content > blog latest. That's what Omega is all about! Just wish panels integrated better.

http://www.swcarrey.co.uk/services/responsive-web-design

Sam.

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week