100 Percent width Header and Footer Backgrounds in Adaptivetheme

I've been asked a few times by Drupal themers and designers how to do 100% header and footer backgrounds in Adaptivetheme—and retain the theme settings so end users can still adjust the overall page width. Actually this is pretty easy - its just a matter of adding a couple of wrapper DIV's in the right places and overriding the layout variables that Adaptivetheme uses to set the width.

First we wrap the various page elements in a set of wrapper DIV's. The new .container DIV will be full width and the .container-width wrapper will set the width - see the PHP snippet below.

You can break the page elements into as many .container sections as you like. This is just an example to get you going:

<div id="container">
  <div class="container"><div class="container-width">
    leaderboard, header & branding stuff
  </div></div>
  <div class="container"><div class="container-width">
    primary links, breadcrumb, messages, secondary content, main columns, tertiary content etc
  </div></div>
  <div class="container"><div class="container-width">
    footer stuff
  </div></div>
</div>

Normally Adaptivetheme uses the #container DIV (the main page wrapper) to set the overall page width (done with the theme settings), instead we override this and set the width on .container-width. This is easy to do in preprocess_page in your subthemes template.php file, this way we keep the ability to use the theme settings to change the width:

<?php
function themename_preprocess_page(&$vars, $hook) {
 
// Set layout classes for custom containers
 
$vars['at_layout_width'] = '.container-width{width:'. theme_get_setting('layout_width') .';}';
 
$vars['layout_settings'] = '<style type="text/css">'. $vars['at_layout_width'] . $vars['at_layout'] .'</style>';
}
?>

You will probably need to clear the cache to get this to kick in. Now the .container-width wrapper will constrain the width of the header, columns and footer, or whatever else you put in there, while the .container DIV's will stretch to full width and allow you have a 100% width backgrounds for your Drupal themes header and footer.

Last updated 4th June, 2010 - 12:08pm

Authored by Jeff Burnz on