Source Ordering

For heading management, the only change I found necessary was changing block titles to h3 tags. I had intended to do this a long time ago, but it never found it's way onto my task list. If you can make a case for other changes, I'm open to them.

The main problem I have with this layout/source ordering technique is the doubled about of px sizing instances that would need to be changed for each column during modification. I fear most users may not easily understand the negative margins and compensation for padding, as well as the arbitrarily large negative margins for equal height columns.

My main goal is for Framework to be universally friendly and useful, hard to break, and with few features/code that would be just thrown away upon modification. I may warm up to the idea after I code up a version, document the code, and extensively test it. The more requests I see for this, the easier my decision will be.

After some consideration, I feel it would best be left up to the user to implement the holy grail layout and source ordering. The added CSS complexity required by these features may make it hard for some users to properly modify the code to fit their needs. Any user who is advanced enough to care about these features should be able to implement it themselves with relative ease. Sorry if anyone was looking forward to these features. If enough users request, I may make a guide on how one could implement these features themselves.

I would be interested in this modification (source first). A few notes/hints how to accomplish that are sufficient here. Not looking for an in-depth guide as it may be beyond scope.

Another vote here for the source-ordering. I took a look at zen theme to implement it, but I was a bit confused about how I would implement it. I've already customized framework, and I like it's straightforwardness. But...I'd love to have the SEO boost with content first. I would definitely be interested in putting it in with framework.

Ok, I'll start looking into the best/simplest way to achieve this.

Here it is. This took a bit of work, but I hope it serves you well.

I'm not quite convinced to include this in the next release, as it is quite complicated and can break easily (not good for beginning theme developers). I may just keep this issue updated with the code necessary to achieve this.

The updated CSS sections: LC=Left Column, RC=Right Column, CC=Center Column, "Fullwidth" means [width + padding] of a column.

/**
 * 2.LAYOUT
 */
#wrapper {
  margin: 0 auto;
  width: 960px;
}

/* 1 column | global values*/
#container {
  margin: 0 0 10px;
}

#center {
  margin: 0 0 10px;
  position: relative;
}

/* 3 columns */
body.sidebars #container {
  padding-left: 170px;	/* LC fullwidth */
  padding-right: 190px;	/* RC fullwidth + CC padding */
}

body.sidebars #center {
  border-left: 1px solid #b4d7f0;
  border-right: 1px solid #b4d7f0;
  float: left;
  padding: 0 9px;				/* CC padding (-1px borders) */
  width: 600px;					/* CC width */
}

/* 2 columns: sidebar-left */
body.sidebar-left #container {
  padding-left: 170px;	/* LC fullwidth */
}

body.sidebar-left #center {
  border-left: 1px solid #b4d7f0;
  float: left;
  padding-left: 9px;		/* CC padding (-1px borders) */
  width: 780px;					/* CC width */
}

/* 2 columns: sidebar-right */
body.sidebar-right #center {
  border-right: 1px solid #b4d7f0;
  float: left;
  padding-right: 9px;		/* CC padding (-1px borders) */
  width: 780px;					/* CC width */
}

/**
 * 7.SIDEBARS
 */
.sidebar {
  position: relative;
}

/* 3 columns */
body.sidebars #sidebar-left {
  float: left;
  margin-left: -600px;	/* CC width */
  padding-right: 10px;	/* LC padding */
  right: 190px;					/* LC width + CC padding */
  width: 160px;					/* LC width */
}

body.sidebars #sidebar-right {
  float: left;
  margin-right: -190px;	/* RC fullwidth */
  padding-left: 10px;		/* RC padding */
  width: 160px;					/* RC width */
}

/* 2 columns: sidebar-left */
body.sidebar-left #sidebar-left {
  float: left;
  margin-left: -780px;	/* CC width */
  padding-right: 10px;	/* LC padding */
  right: 180px;					/* LC width + CC padding */
  width: 160px;					/* LC width */
}

/* 2 columns: sidebar-right */
body.sidebar-right #sidebar-right {
  float: right;
  width: 160px;					/* RC width */
}

Updated page.tpl.php (only between <div id="container"> and <!-- /#wrapper -->)

      <div id="container">

        <div id="center" class="column">
          <?php print $breadcrumb; ?>
          <?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
          <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
          <?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
          <?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
          <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
          <?php if ($show_messages && $messages): print $messages; endif; ?>
          <?php print $help; ?>
          <?php print $content ?>
        </div> <!-- /#center -->

        <?php if ($left): ?>
          <div id="sidebar-left" class="column sidebar">
            <?php print $left ?>
          </div> <!-- /#sidebar-left -->
        <?php endif; ?>

        <?php if ($right): ?>
          <div id="sidebar-right" class="column sidebar">
            <?php print $right ?>
          </div> <!-- /#sidebar-right -->
        <?php endif; ?>
        
        <span class="clear"></span>

      </div> <!-- /#container -->

      <div id="footer" class="clear">
        <?php print $footer_message . $footer ?>
        <?php print $feed_icons ?>
      </div> <!-- /#footer -->

    </div> <!-- /#wrapper -->