Trying to Add Wrapper Div Around Header and Navbar [#236052]

I'm trying to take a static theme and convert it to Drupal, and I'm having a problem with a background image. You can see what I'm trying to convert from at www.campusfiresafety.org.

The problem is the graphic that is the brown border under the navigation bar at the top (under the banner). It is a 174px x 1px image that starts at the top of the page and goes down to just below the buttons. In looking at the Zen theme, what I would like to do is mimic, that, but the header div goes down and stops above the navbar div. My thought was to create a wrapper div that would encompass the header and navbar divs. The problem is that the navbar div is not directly adjacent to the header div: instead, it is after

, and inside

, which is inside

, which is adjacent to

Comments

Comment #1

annez commented 2 April 2008 at 12:43

I had a similar issue with my theme and I chose to move the navbar out of the main div so that I could make the navbar background stretch across the whole page while the content is centered with fixed width. It isn't difficult, but you do need to change some PHP code to make it happen.

Here's what I did:

1. Copy page.tpl.php from main Zen folder into your subtheme folder.
2. Clear the cache to rebuild the theme registry so the theming system knows you are overriding page.tpl.php, if using Drupal 6. Can also visit admin/build/themes to rebuild theme registry.
3. Find the PHP code that inserts the navbar. It looks like this:

    <?php if ($search_box || $primary_links || $secondary_links || $navbar): ?>
       <div id="navbar"><div id="navbar-inner">

         <a name="navigation" id="navigation"></a>

         <?php if ($search_box): ?>
           <div id="search-box">
             <?php print $search_box; ?>
           </div> <!-- /#search-box -->
         <?php endif; ?>

         <?php if ($primary_links): ?>
           <div id="primary">
             <?php print theme('links', $primary_links); ?>
           </div> <!-- /#primary -->
         <?php endif; ?>

         <?php if ($secondary_links): ?>
           <div id="secondary">
             <?php print theme('links', $secondary_links); ?>
           </div> <!-- /#secondary -->
         <?php endif; ?>

         <?php print $navbar; ?>

       </div></div> <!-- /#navbar-inner, /#navbar -->
     <?php endif; ?>

4. Take that whole section of code and move it above the line that says:

    <div id="main"><div id="main-inner" class="clear-block<?php if ($search_box || $primary_links || $secondary_links || $navbar) { print ' with-navbar'; } ?>">

This approach breaks the philosophical nicety of Zen where content appears first instead of navigation (good for screen readers and SEO, I think) but I couldn't come up with a simpler way of making my theme look the way I wanted.