A Nice Automatic Footer Quad Layout...

Topics: Customizing Orchard, General, Writing themes
Jan 26, 2013 at 1:57 AM

Thought I would share this snippet of code that I use in the footer of a lot of layouts for Orchard themes that I write. These themes are based on Twitter Bootstrap, so I make use of the spanX classes for layout (12 column grid structure).

By using the following structure to layout my footer quad area, I can determine the layout of the quad area by where I define widgets in the footer quad zones (rather than needing to manually change the layout in the theme).

Here's the snippet (followed by an explanation)...

	<!-- start: Footer -->
	<div id="footer">
	
		<!-- start: Container -->
		<div class="container">
		
			<!-- start: Row -->
			<div id="footer-quad" class="row">
                  @{
                      var quadClass = "span3";
                      if (Model.FooterQuadFirst != null)
                      {
                          <div id="footer-quad-first" class="span3">
                              @Zone(Model.FooterQuadFirst)
                          </div>
                      }
                      else
                      {
                          quadClass = "span6";   
                      }                       
                      if (Model.FooterQuadSecond != null)
                      {
                          <div id="footer-quad-second" class="@quadClass">
                              @Zone(Model.FooterQuadSecond)
                          </div>
                          quadClass = "span3";
                      }
                      else
                      {
                          quadClass = quadClass == "span3" ? "span6" : "span9";   
                      }
                      if (Model.FooterQuadThird != null)
                      {
                          <div id="footer-quad-third" class="@quadClass">
                              @Zone(Model.FooterQuadThird)
                          </div>
                          quadClass = "span3";
                      }
                      else
                      {
                          quadClass = quadClass == "span3" ? "span6" : quadClass == "span6" ? "span9" : "span12";    
                      }
                      if (Model.FooterQuadFourth != null)
                      {
                      <div id="footer-quad-fourth" class="@quadClass">
                          @Zone(Model.FooterQuadFourth)
                      </div>
                      }
                  }
			</div>
			<!-- end: Row -->	
		
		</div>
		<!-- end: Container  -->

	</div>
	<!-- end: Footer -->

If I place widgets in all four footer quad zones, then each quad will be even width at 1/4 of the layout.

Each quad zone that I leave without widgets, the following quad zone will expand to fill.

So if I leave the first widget without zones, and fill the remaining three, I will end up with a 1/2 width zone followed by two 1/4 width zones. If I place a widget in the first quad, then the 3rd and 4th, I will end up with a 1/4 width zone, then a 1/2 width zone in the middle, then a 1/4 width zone on the end.

If I only place widgets in the last quad zone, the zone will expand to fill the entire width of the layout.

By using the above structure in my base theme, I get quite a lot of flexibility out of the box for laying out content in my footer quad zones, without needing to customise the theme for each website.