How to position regions in Beep Edition theme [#2113719]

I'm trying to position 3 regions that I added to this theme. My objective is to have these regions appear in a specific order with respect to the header, navigation and content. The order in which I would like these regions to appear is:

header
region 1
navigation
region 2
region 3
content
footer

I've modified the page.tpl.php file to include the 3 regions (summarized sans all the conditional statements and markup) as follows:

<?php print render($page['header']); ?>
<?php print render($page['region_1']);
<?php print render($page['region_2']);
<?php print render($page['region_3']);
<?php print render($page['content']);
<?php print render($page['navigation']);
<?php print render($page['footer']); ?>

The resulting web page has this order:

header
region 1
region 2
region 3
navigation
content
footer

I've tried rearranging the order in which the print statements appear with respect to the nav (after, before, with the nav in between, etc) but the navigation never appears in the right place on the web page.

I also tried using layout.scss to position the regions on the grid but I can't seem to override the template file in the way that I'd like.

Would someone please explain how the navigation is positioned in this theme? The navigation render code appears immediately above the footer in page.tpl.php. I understand that the reasoning for placing it further down the page is for better SEO (which makes sense) but how does its position in page.tpl.php relate to its position on the page that is output to the browser, i.e., where the heck does it get its positioning from?

Thanks for any help.

Comments

Comment #1

stanb CreditAttribution: stanb commented 17 October 2013 at 20:29

I didn't try all the permutations. The one that worked is:

<?php print render($page['header']); ?>
<?php print render($page['region_1']);
<?php print render($page['navigation']);
<?php print render($page['region_2']);
<?php print render($page['region_3']);
<?php print render($page['content']);
<?php print render($page['footer']); ?>

which produced for the web page display:

header
region 1
navigation
region 2
region 3
content
footer

...hmmm....looks like it's in the exact order as the page.tpl.php...without the navigation and content being reversed....that's odd...or is it?

I'd still be interested in having someone more knowledgeable than me explain how the navigation display is affected by its code rendering in the page.tpl.php file....or point me to an in-depth tutorial. Thanks.