If I want to add a Content Top and Content Bottom to the Content zone, how can I add these regions to the zone and have them show up under the Content zone (which fills 10 columns) ?

With that, what if I wanted to have 'Content Bottom 1' and 'Content Bottom 2' that take 5 columns in a 10 column zone? I keep getting 'the summed widths extend beyond the number of columns' type of error.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

fubhy’s picture

Status: Active » Fixed

I would suggest you use a second zone for that! Build two zones: One for Content Top and one for Content Bottom (you can create those zones by editing your sub-themes' .info file) and then add the Content Regions into those zones according to your needs.

kevinquillen’s picture

FileSize
71.53 KB

But I want them to come after the Content region (in the Content Section) and take up different columns. Pic attached of what is happening. I want to get Content Bottom First and Second below Content instead of coming after the Sidebar. It's telling me:

You have chosen to manipulate the region positioning of the Content zone but the summed region width is greater than the number of available columns for that zone.

You have specified the Content region as the primary region for the Content zone but the summed region width is greater than the number of available columns for that zone.

kevinquillen’s picture

Status: Fixed » Active

I guess the problem is I am struggling to see how to get them to come up under the Content region, instead they are pushed down.

fubhy’s picture

Status: Active » Fixed

Right.. Since zones are basically rows and we need some fixed value to calculate the positioning of regions with we don't allow this kind of stacking via the simple Omega Theme Settings UI. If you want to stack your regions in such an advanced manner you would have to write some preprocess code to manually place your other regions in side of a container / region in that spot. Omega UI will cover this feature once it's done but for now you have to use hook_alpha_page_structure_alter(&$vars) to do that.... Note: "$vars['#excluded']" holds regions that have blocks but are not enabled / are not placed in a zone. I would suggest you add two more regions (content_bottom_first / content_bottom_second) and don't add them to any Zone and then manually place them INSIDE of $vars['content']['content']['content'] (thats the path for content section => content zone => content region). So you basically end up with nested regions.

kevinquillen’s picture

I can't find that page_structure_alter function.

fubhy’s picture

What do you mean "you can't find it"? Its a hook that I implemented in the Alpha Core API. It goes like this: YOURTHEME_alpha_page_structure_alter(&$vars).

kevinquillen’s picture

Sorry I am not a themer just trying to find my way around. I grepped for 'alpha_page_structure_alter' and got no results, I was curious to see what it did.

I put this in my template.php:

function devsite_alpha_page_structure_alter(&$vars) {
  dpr($vars);exit;
}

I cleared cache and theme registry, I don't get any output.

fubhy’s picture

Are you on the latest dev version / RC1?! Check if you have this:

alpha_alter('alpha_page_structure', $vars, $theme->theme);
on line 171 in /alpha/template.php...

If not ... Well, then you are on the wrong version of alpha / omega.

If, however, it is there it should work right away in case your theme is named "devsite".

Oh... and why on earth are you using dpr(); exit; :P

Just use "krumo($vars);"

kevinquillen’s picture

Okay, now I am getting closer and the function dumps out page structure.

I put this in my template.php:

function devsite_alpha_page_structure_alter(&$vars) {
  $vars['#excluded']['content_bottom_first']['#weight'] = 10;
  $vars['#excluded']['content_bottom_second']['#weight'] = 20;
  $vars['content']['content']['content']['content_bottom_first'] = $vars['#excluded']['content_bottom_first'];
  $vars['content']['content']['content']['content_bottom_second'] = $vars['#excluded']['content_bottom_second'];
}

This seemed to work, except for one little thing. Attached a pic. The content bottom first and second start halfway through a column instead of at the start of one. Did I do something wrong?

kevinquillen’s picture

FileSize
53.5 KB
kasse’s picture

Version: 7.x-3.0-beta3 » 7.x-3.0-rc3
Status: Fixed » Needs work
FileSize
4.82 KB

I did't get this work either. I get only the other one bottom regions "content_buttom_first' to available
with this code? My coal would be three horizontal- regions top of content zone?
Is that possible?

fubhy’s picture

Status: Needs work » Active

Yes, thats possible. You would have to move the three content_top regions into the main content region (so they become sub-regions). You can use hook_alpha_page_structure_alter for that. Or even hook_page_alter. Use the devel module and krumo() to find the proper array elements that you need to move around. They can be found either in $vars (in hook_page_alter) or in $vars['#excluded'] (in hook_alpha_page_structure_alter - Only available if the region is not empty).

kasse’s picture

I'm quite beginner whit this, but would code be in
template.php like

function devsite_alpha_page_structure_alter(&$vars) {
  $vars['#excluded']['content_top_first']['#weight'] = 1;
  $vars['#excluded']['content_top_second']['#weight'] = 2;
 $vars['#excluded']['content_top_third']['#weight'] = 3;
 $vars['content']['content']['content']['content_top_first'] = $vars['#excluded']['content_top_first'];
$vars['content']['content']['content']['content_top_second'] = $vars['#excluded']['content_top_second'];
$vars['content']['content']['content']['content_top_third'] = $vars['#excluded']['content_top_third'];
 
}
fubhy’s picture

Not bad, but this is preferable:

function devsite_alpha_page_structure_alter(&$vars) {
  if (!empty($vars['#excluded']['content_top_first'])) {
    $vars['#excluded']['content_top_first']['#weight'] = -99;
    $vars['content']['content']['content']['content_top_first'] = $vars['#excluded']['content_top_first'];
  }

  if (!empty($vars['#excluded']['content_top_second'])) {
    $vars['#excluded']['content_top_first']['#weight'] = -98;
    $vars['content']['content']['content']['content_top_second'] = $vars['#excluded']['content_top_first'];
  }

  if (!empty($vars['#excluded']['content_top_third'])) {
    $vars['#excluded']['content_top_third']['#weight'] = -97;
    $vars['content']['content']['content']['content_top_third'] = $vars['#excluded']['content_top_third'];
  }
}

Note: You might also want to play with hook_preprocess_region and $vars['#grid'] in there to find the proper widths for the sub-regions relative to the parent region.

kasse’s picture

Some how that preferable code notice "Parse error: syntax error, unexpected T_IF... "
Do you have any examples to give, about hook_preprocess_region and $vars['#grid'] in this situation.
For now they will appear on site that nopreferable code, but they stack bottom of content zone

fubhy’s picture

You must have made an incorrect copy&paste since the snippet that I provided looks fine... Add this:

$vars['content']['content']['content']['#sorted'] = FALSE;

To have it re-sorted. The hook_preprocess_region and _zone are pretty simple:

if (in_array($vars['region'], array('content_top_third', 'content_top_second', 'content_top_first')) {
$theme = alpha_get_theme();

// Now calculate the width that you want your sub-regions to have (dynamically)
$theme->region['content']['grid'] // <--- Thats where the content region widths are in
$vars['elements']['#grid'] // <--- Thats where you have to set the new widths
}

The above code is only needed if you want to provide the widths for your sub-regions dynamically... You can also just set the in the UI if you know that the widths of your content region won't change (if it is not set to be "primary" region of the content zone).

look into alpha/template.php => "alpha_alpha_page_structure_alter"

Thats were I assign the grid properties to a region. You need to do that in the same way if you want the sub-regions to align with the grid. This is the code that I mean:

      $temporary[$item['section']][$item['zone']][$region]['#grid'] = array(
        'prefix' => $item['prefix'],
        'suffix' => $item['suffix'],
        'push' => $item['push'],
        'pull' => $item['pull'],
        'columns' => $item['columns'],
      );

Note how I place the grid information in the #grid array element. Thats where the CSS classes are being pulled from.

kasse’s picture

It is still if-line where comes the error message
I tryed put the new line after finction...{ (?)
But still error message comes from if...

function devsite_ver2_alpha_page_structure_alter(&$vars) {
$vars['content']['content']['content']['#sorted'] = FALSE;
  $vars['#excluded']['content_top_first']['#weight'] = -99;
    $vars['content']['content']['content']['content_top_first'] = $vars['#excluded']['content_top_first'];
    
  }

  if (!empty($vars['#excluded']['content_top_second'])) {
    $vars['#excluded']['content_top_second']['#weight'] = -98;
    $vars['content']['content']['content']['content_top_second'] = $vars['#excluded']['content_top_second'];
  }

  if (!empty($vars['#excluded']['content_top_third'])) {
    $vars['#excluded']['content_top_third']['#weight'] = -97;
    $vars['content']['content']['content']['content_top_third'] = $vars['#excluded']['content_top_third'];
  }
}
fubhy’s picture

Thats completely wrong copy&paste. Where is the first if () ?!

function devsite_alpha_page_structure_alter(&$vars) {
  $vars['content']['content']['content']['#sorted'] = FALSE;

  if (!empty($vars['#excluded']['content_top_first'])) {
    $vars['#excluded']['content_top_first']['#weight'] = -99;
    $vars['content']['content']['content']['content_top_first'] = $vars['#excluded']['content_top_first'];
  }

  if (!empty($vars['#excluded']['content_top_second'])) {
    $vars['#excluded']['content_top_first']['#weight'] = -98;
    $vars['content']['content']['content']['content_top_second'] = $vars['#excluded']['content_top_first'];
  }

  if (!empty($vars['#excluded']['content_top_third'])) {
    $vars['#excluded']['content_top_third']['#weight'] = -97;
    $vars['content']['content']['content']['content_top_third'] = $vars['#excluded']['content_top_third'];
  }
}
kasse’s picture

Sorry my mistake

kasse’s picture

New content top works really fine.
And you are right, that dynamic widths and even equalhights
would be relly useful.

I have tried something like :
devsite_preprocess_region(&$vars) {
if (in_array($vars['region'], array('content_top_third', 'content_top_second', 'content_top_first')) {
$theme = alpha_get_theme();
$theme->region['content']['grid']
$vars['elements']['#grid']
}
}
And
devsite_preprocess_zone(&$vars) {
$temporary[$item['section']][$item['zone']][$region]['#grid'] = array(
'prefix' => $item['prefix'],
'suffix' => $item['suffix'],
'push' => $item['push'],
'pull' => $item['pull'],
'columns' => $item['columns'],
);

}

But no luck?

AniaMi’s picture

How to make sub-regions in Omega?

AniaMi’s picture

FileSize
64.29 KB

How to make such zones-regions configuration?
Could someone help me?

AniaMi’s picture

I add this to template.php, but nothing happens:

function mysite_alpha_page_structure_alter(&$vars) {
$vars['#excluded']['bottom_first']['#weight'] = 10;
$vars['#excluded']['bottom_second']['#weight'] = 20;
$vars['#excluded']['bottom_third']['#weight'] = 30;
$vars['content']['content']['content']['bottom_first'] = $vars['#excluded']['bottom_first'];
$vars['content']['content']['content']['bottom_second'] = $vars['#excluded']['bottom_second'];
$vars['content']['content']['content']['bottom_third'] = $vars['#excluded']['bottom_third'];
}

I want to add this as subregions to region content.
Any idea how to reach it?

Woggers’s picture

subscribed.

I need to accomplish something exactly similar as what AniaMi described in the attached in #22 - zones-regions.png image.

My issue is for the footer zone though where I need footer-left-top, footer-left-bottom, and a footer-right-sidebar region(s). Where footer-right-sidebar height = footer-left-top + footer-left-bottom height.

Anyone know how this is accomplished??

westie’s picture

subscribe - this theme needs sub regions, it would be ideal to cascade so you can have Section > Zone > Region > Sub Region. Then you can have content as a region, and content first, content second, content third as sub regions. These would have a max width of the content region parent but still be configurable within the confines set by the parent region...

rich.3po’s picture

FileSize
5.22 KB

also desparately needing support for this, it seems a shame to have such a powerful theme that won't support a common page layout such as the one i need (see attached).

I'll give the "hacks" a whirl for now, but would be great to see this in future...

greggmarshall’s picture

I have to agree it would be nice to have "areas" that are above and below the actual content like rich.3po shows in #26 to assign blocks to as part of the base theme definition.

Edited to add, I just realized that one of the blocks on the block administration page for the content area is Main Page Content, so it was trivial to put some blocks above that block, some blocks below, and voila, exactly what I thought I'd need to add code to do.

I'm off to clean my classes, clearly I need to RTFM.

kevinquillen’s picture

Some people may still want content outside of that region, not all in the same region.

marcoka’s picture

yes they want, especially for .clearfix purposes (if you float two blocks )
#18 works but you will have the problem that you will get 3 regions with margins. meaning they have a margin-left and if content region is grid 12 and you chose grid 4 for each new zone, they will not fit into content region because they get a margin-left assigned.

marcoka’s picture

datagroove_’s picture

FileSize
15 KB

I have a simular issue and I'm coming up short on how to proceed with omega. Every combination of additional regions causes my sidebar to move or ends up not looking how I need. Please see attachment for a wireframe of what I am trying to accomplish with omega and regions/zones. Any help would be great!

I need this layout for one page on the site, the home page. So I am thinking delta/context. But First I have to figure out how to get either three regions or three blocks to look like the attached image. The three boxes in content region are views output. As you can see it is one block that spans the 9 columns on top of two side by side blocks.

marcoka’s picture

if above does not work, you could use panels

dooug’s picture

I would like to second the request made in comment #31.

Although omega has some panels layouts (#983758: Panels integration), the panels layouts for omega subthemes are limited in their options.

I need a layout that is similar to the attachment in #31 (except with three columns under the top left content region) AND still reacts properly to omega's responsive layout design. Any thoughts?

mediameriquat’s picture

Subscribe

marcoka’s picture

@paradisos, there is a BIG green button on every issue page. on the top right. use that to subscribe issues in the future. thx

Cellar Door’s picture

For the post on #31 (and possibly for #33)-

If these are blocks that you are wanting to place I don't think you need to create new regions for that to occur. Why not place the blocks in the content region and assign them a grid class to allow them to size with the grid? So if you wanted them to have a 6 column width you would add a class of "grid-6" to it and the width for the item would then reflect whatever the current grid-6 is. For your layout with blocks only that is how I would approach it.

Panels integration at the moment isn't fully there and will need to continue to be built out. For the time being you can use the class trick above to get a uniform width to your blocks and allow you to create more complicated layouts.

suntog’s picture

Thnx, I applied this to my first sidebar and it worked. I just had to remember to match widths to 3 columns in both sidebar_first and sidebar_top_first in my theme settings.

function domega_alpha_page_structure_alter(&$vars) {
$vars['content']['content']['sidebar_first']['#sorted'] = FALSE;

if (!empty($vars['#excluded']['sidebar_top_first'])) {
$vars['#excluded']['sidebar_top_first']['#weight'] = -99;
$vars['content']['content']['sidebar_first']['sidebar_top_first'] = $vars['#excluded']['sidebar_top_first'];
}
}

resorting by setting $vars.....['#sorted'] = FALSE; was pretty slick!

Sadly my custom region inherits the weight and position of sidebar_first. I need weight and position to react differently between sidebar_first and sidebar_top_first.

I am going to check out the e-anima's link on post#34

dotman’s picture

Title: Create regions, vertically stack in a zone? » IE 8 and below floats under stacked columns
FileSize
385.54 KB

The preprocess works great on FF, chrom and safari as far as I can tell. I check it at adobe brwoser labs and tried to take a 2-up screen shot of it working in IE 9, but not in 8 and get's worse in lower versions. Anyone might have a suggestions for a fix?

Sorry, I should have probably posted a link to the site. Right now I have responsive turned off, but the problem is the same using the sub-regions created in the template.php file linked to from this thread.

http://rosewebdesign.com/mirc/

thanks in advance for any help.

mediameriquat’s picture

There is no progress on this complex issue and I am a very poor themer, so I looked for workarounds and here's what I found :

  1. Omega already considers the content area as a "block", so it is easy to toggle it in the regular block admin interface, and emulate a "content top" or "content bottom" subregion depending on where you place the other blocks.
  2. For more complex layouts, Display Suite is a great module that gives the user much better control on the display modes of any content type. It can split the content area into several columns (stacked, fluid, equal width...). Fields can be assigned to any column.
  3. The Block Reference module helps the user create fieldable blocks, that can be called on a node-by-node basis.

With these easy to use, well maintained modules, sky's the limit.

You can create, for instance, a two-column display mode of a particular content type, that you can render in a block view. Afterwards, you can reference that block in any area of a given node, provided that node belongs to a content type that was properly formatted with Display Suite.

Cellar Door’s picture

Title: IE 8 and below floats under stacked columns » Nested Regions
Assigned: Unassigned » himerus
Category: support » feature

What is desired here is the ability to do nested regions. I've changed the title to reflect it and we've discussed getting this into the core. We'll see what we can work up on it. In the meantime Paradiso's Display Suite is a great way to do this.

Kendall Totten’s picture

Hey Fuhby,
I've used the code in your comment http://drupal.org/node/1230110#comment-4838516 and it works. What confuses me is that the variable #weight used here seems to actually control the position of the sub-regions. Can I still control the position and weight separately like with regular regions? Thx!

scottsawyer’s picture

This may not be a popular solution, but since I already need them fof other aspects of my projects, I often use mini panels for my "sub regions". I will create mini panel, use the builders layout, set up my grids as columns and rows, drop them in as blocks. Provides a lot of nice features like context, selection rules, all kinds of good stuff.

One thing I have found is when the media query falls to the mobile break point and all grid width go to 100%, the nested grids pick up a nasty 10px margin, and it grows with every level of nesting.

My solution is a new class, gamma { margin left:opx; margin-right: 0px; } in my global. Add the class to every nested grid, problem solved.

bradallenfisher’s picture

I got this to work in the header first region. All you have to do is dig through the render array to find the elements you need. In my case I needed to affect the header_first element.

The one thing that noob's might be missing is how to look at the array and walk through it.

To do this, get the devel module and enable it.
Then in your theme folder edit or create a template.php file.
In the template.php file place this code:

function mythemename_alpha_page_structure_alter(&$vars) {
krumo($vars);
}

Basically you are borrowing this code from the alpha template.php file.
Change mythemename in the function to be the actual name of your theme.
Once you save this file and put in on the server you will then get a clickable array of all the available elements in the $vars array.
This is helpful because you can now see what is available to override.

For instance I wanted to add a nested region to my Header First region. So my code ended up being: (portfolio is the name of my theme)

function portfolio_alpha_page_structure_alter(&$vars) {
 
  $vars['header']['header']['header_first']['#sorted'] = FALSE;
  if (!empty($vars['#excluded']['header_first_bot_left'])) {
    $vars['#excluded']['header_first_bot_left']['#weight'] = 10;
    $vars['header']['header']['header_first']['header_first_bot_left'] = $vars['#excluded']['header_first_bot_left'];
  }
  if (!empty($vars['#excluded']['header_first_bot_right'])) {
    $vars['#excluded']['header_first_bot_right']['#weight'] = 20;
    $vars['header']['header']['header_first']['header_first_bot_right'] = $vars['#excluded']['header_first_bot_right'];
  }  
}

The main thing that was throwing me off was that i used the UI to add my regions to a zone. Doing so will mean that there are no excluded regions, and this code won't work. The trick is to NOT place the new regions in a zone. If you do the #excluded element won't be present in the array output.

After you have the nested regions you need to change your CSS to suit.
What i can't quite figure out is why the new nested regions don't line up with the columns. Any help with that would be appreciated.

tjerkdekuijper’s picture

I managed to get equal heights working. In your template.php change the following rules in hook_alpha_page_structure_alter

  $vars['content']['content']['content']['#sorted'] = FALSE;

  //content top
  if (!empty($vars['#excluded']['content_top_first'])) {
    $vars['#excluded']['content_top_first']['#weight'] = -92;
    $vars['#excluded']['content_top_first']['#data']['equal_height_element'] = TRUE; // add this to get the equal-heights-element class to show up.
    $vars['content']['content']['content']['content_top_first'] = $vars['#excluded']['content_top_first'];
  }

Do this for every custum region you want to have equal heights.

Next to your hook_preprecess_region add the follewing rules:

  if (isset($vars['region']) && $vars['region'] == 'content'){
    $vars['content_attributes_array']['class'][] = 'equal-height-container';
  }

This will simply add the equal-heigts-container class to your content region. Uncheck force equal heights in your UI for the content region. This way the block-system-main will not get an eqaul-heights class so only your custom regions will be resized.

joey-santiago’s picture

This is really interesting and i got it working using the custom MYTHEME_alpha_page_structure_alter function, but i still have a problem, since i'd like this new region to be printed between the breadcrumbs and the title of the page. Is it possible?

This is something i would have done quite easily with othere themes by modifying the tpl, this "regions and zones" theory is completely new to me...

[SOLVED]
I found out i had to insert the region into the content zone, not the content region. So in my template i put:

function mytheme_alpha_page_structure_alter(&$vars) {
  if (isset($vars['#excluded']['content_top'])){
    $vars['content']['content']['content']['#sorted'] = FALSE;
    $vars['#excluded']['content_top']['#weight'] = -99;
    $vars['content']['content']['content_top'] = $vars['#excluded']['content_top'];
  }
}

it works! :) Hope it's the right way of doing it :)

tjerkdekuijper’s picture

Yes, I believe that is correct. Note that if you alter the structure this way you cannot configure your Zone & region configuration UI.

avolve’s picture

I have actually achieved similar using the context module — I tried this not expecting it to work, after exploring a few different approaches.

Specifically, if I want blocks above the content (i.e. content top) I put a negative weighting. If I want the blocks below the content (content bottom), I use a positive weighting.

The site is currently offline (redesign for D7). I have attached a screenshot of the context settings (the condition is 'page' using the node ID).

louloubug’s picture

FileSize
172.99 KB

I am trying to achieve the attached layout. I can do absolute positioning, but that doesn't work while making it a responsive site. I've been researching this for days and trying things out to no avail.

I have the following code in my template.php.

function mytheme_alpha_page_structure_alter(&$vars) {
$vars['content']['content']['content']['#sorted'] = FALSE;

if (!empty($vars['#excluded']['inside_page_slider'])) {
$vars['#excluded']['inside_page_slider']['#weight'] = -92;
$vars['content']['content']['content']['inside_page_slider'] = $vars['#excluded']['inside_page_slider']; }

}

While it does add the page header to the content region, it's doing it below the content title and only within the content region. I need it to span across and above the content and sidebar-second.

Any suggestions?

louloubug’s picture

I finally got the header image outside of the content box (I think). But it's below the content and side-bar second. How do I get it above?