AdaptiveTheme Full-Width Header and Footer in Drupal

adaptive_screenshot_mobileI’ve mentioned a few of Drupal’s popular themes in the past. And, it’s no mystery I make use of the AdaptiveTheme Drupal base theme.

Some brief reasons why I like this theme so much are:

  • Supports Google Fonts and other web-fonts with the @Font-Your-Face Drupal module.
  • Adheres to WCAG 2.0 guidelines out of the box.
  • May be adaptive or fixed-width by configuration.
  • Has extensive online documentation.

I’m currently developing a website for a client which is scheduled to go live at the end of next month. I’ve actually already created a fixed width Adaptive sub-theme for the site; but they requested a whole new theme this last month (such is life!).

The previous theme was centered always in the browser and fixed width at 960px.

The new theme is to be fixed width as well — but the Header and Footer of the site should be the full width of the browser page always. WHAT AM I TO DO UNDER TIME CONSTRAINT!?!

Luckily, having re-read the AT documentation I found the hard work of this full width header and footer layout for an AT subtheme has already been completed by the theme author! AT ships with a page–full-width-wrappers.tpl.php you may use to replace your subthemes default page.tpl.php. This is covered in the AT Documentation under Templates. So even if you don’t fully understand the CSS and HTML necessary to make full width headers and footers for your site — simply copy and paste the full-width tpl file contents into page.tpl.php and you’ve got the design layout you wanted; add colors and flare!

But wait, it gets even easier than this. You don’t even have to copy and paste the file I mention. AT’s theme configuration page allows you to select this option for your subtheme:

full-width-wrappers theme configuration option

full-width-wrappers theme configuration option

You need to touch 0 lines of codes or files to achieve this type of site display! Sweet.

While not pretty, here is an example of the full-width header region being visible on a website. The Pink area denotes the area the new full-width DIV wrapper encompasses:

Full width header and footer example

Full width header and footer example

Looking for quality Drupal Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 1 = 8

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>