4

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):

enter image description here

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

enter image description here

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?

| improve this question | | | | |
5

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.

| improve this answer | | | | |
  • @cornjuliox In addition, adding the 'panels_everywhere' module with Panels can totally bypass the theme system and may make styling your customized pages much easier. – Ashlar Mar 24 '12 at 21:26
  • This looks like exactly what I was looking for. I'm gonna try it out. – Enrico Tuvera Jr Mar 25 '12 at 2:42
  • I'm not saying that Panels isn't a well written and powerful module (even if I don't really like it myself), but if you really want to understand the Drupal theme layer, I would try to do it without Panels first. – marcvangend Apr 20 '12 at 21:11
5

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.

| improve this answer | | | | |
  • 1
    Actually for the banner area you'd just say print render($page['banner']). This would allow users to put whatever they want into the banner region. If the banner region is only supposed to contain an image, then just output the image tag without defining a new region. – paul-m Mar 25 '12 at 15:59
  • Absolutely correct! Edited the code. – Fleshgrinder Apr 20 '12 at 21:01
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.

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.