Really customized themes

Question

I've been toying around with Drupal 7 for a couple of weeks now, and I think I understand how the theming system works, but I have a question.

I'm looking at Zen's default theme right now, and I understand that you're supposed to tweak the CSS files in the starterkit to begin building a more substantial sub-theme, but what if I wanted to change the layout of the page altogether?

Currently the Zen theme has the regions laid out something like this (please pardon the massively crude drawing, I just wanted to illustrate something):

And if I wanted it to be laid out like this instead:

Which of the theme files am I supposed to edit/hack? I'm assuming it's either page.tpl.php or html.tpl.php. Or is this something that's supposed to be done with CSS?

Answer 1

Different layouts for different pages is one of the many things that the Panels module can do. It works alongside your base theme. The base theme sets up general things, gets your site looking consistent, and gives you the opportunity to customize it. Panels gives you much greater flexibility for creating different layouts for different parts of your site, than the normal blocks in regions combo gives you.

Answer 2

Like Countzero said, regions is the Drupal way. If we have a look at the seven.info file of the Drupal theme Seven:

regions[content] = Content
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[sidebar_first] = First sidebar
regions_hidden[] = sidebar_first

You could simply add your banner here.

regions[content] = Content
regions[banner] = Banner
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[sidebar_first] = First sidebar
regions_hidden[] = sidebar_first

page.tpl.php would be the best place to print your banner, again we have a look at the Seven theme.

<div id="branding" class="clearfix">
  <?php print $breadcrumb; ?>
  <?php print render($title_prefix); ?>
  <?php if ($title): ?>
    <h1 class="page-title"><?php print $title; ?></h1>
  <?php endif; ?>
  <?php print render($title_suffix); ?>
  <?php print render($primary_local_tasks); ?>
</div>

<!-- Print our custom banner region! -->
<!-- START {{{ -->
<?php if ($page['banner']): ?>
  <div id="my-awesome-banner"><?php echo $page['banner']; /* echo is faster then print */ ?></div>
<?php endif; ?>
<!-- }}} END -->

<div id="page">
  <?php if ($secondary_local_tasks): ?>
    <div class="tabs-secondary clearfix"><ul class="tabs secondary"><?php print render($secondary_local_tasks); ?></ul></div>
  <?php endif; ?>

  <div id="content" class="clearfix">
    <div class="element-invisible"><a id="main-content"></a></div>
    <?php if ($messages): ?>
      <div id="console" class="clearfix"><?php print $messages; ?></div>
    <?php endif; ?>
    <?php if ($page['help']): ?>
      <div id="help">
        <?php print render($page['help']); ?>
      </div>
    <?php endif; ?>
    <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
    <?php print render($page['content']); ?>
  </div>

  <div id="footer">
    <?php print $feed_icons; ?>
  </div>

</div>

Hope this helps. Of course this is absolutely basic stuff and should only help you getting started.

Answer 3

Using Zen, or any other theme for this matter, the concept in Drupal is Region, which are defined in the theme.info file, in the form :

regions[title] = title_region

regions[body] = body_region ...

You then have to output $title_region and $body_region in the relevant theme files, i.e page.tpl.php for D6.

The overall layout must of course be handled in the CSS file, as in layout.css.