Fragmented Thought
TwitterGitHub

Drupal - block.tpl.php Advanced

By

Published:

Lance Gliser

Heads up! This content is more than six months old. Take some time to verify everything still works as expected.

Depending on how advanced your client wants the blocks on their site themed, the standard Drupal block.tpl.php won't cut it. That's the end result for most of us of course. In my case, I have somewhat given up on the base tpl ever working. Therefore I worked up a slightly more advanced version. It's designed to allow for highly styled borders: 4 corners, and expandable sides.

block.tpl.php

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="clear-block block block-<?php print $block->module ?>">
    <?php if (!empty($block->subject)): ?>
        <h2><?php print $block->subject ?></h2>
      <?php endif;?>
  <div class="outside-wrapper">
    <div class="top-wrapper">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle"></div>
    </div>
    <div class="inside-wrapper">
      <div class="content"><?php print $block->content ?></div>
    </div>
    <div class="bottom-wrapper">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle"></div>
    </div>
    </div>
</div>

block.css

.block-views .outside-wrapper {
  padding: 2px;
}

.block-views .top-wrapper,
.block-views .bottom-wrapper {
}

.block-views .top-wrapper {
  margin-bottom: -5px;
}

.block-views .bottom-wrapper {
  margin-top: -5px;
}

.block-views .top-wrapper .left,
.block-views .top-wrapper .right,
.block-views .bottom-wrapper .left,
.block-views .bottom-wrapper .right {
  background-repeat: no-repeat;
  width: 9px;
}

.block-views .top-wrapper .left,
.block-views .bottom-wrapper .left {
  float: left;
}
.block-views .top-wrapper .right,
.block-views .bottom-wrapper .right {
  float: right;
}

.block-views .top-wrapper .middle,
.block-views .bottom-wrapper .middle {
  background-repeat: repeat-x;
}

.block-views .top-wrapper .left,
.block-views .top-wrapper .middle,
.block-views .top-wrapper .right,
.block-views .bottom-wrapper .left,
.block-views .bottom-wrapper .middle,
.block-views .bottom-wrapper .right {
  display: block;
  height: 10px;
}

.block-views .top-wrapper .left,
.block-views .top-wrapper .middle,
.block-views .top-wrapper .right {
  background-position: 0 0;
}

.block-views .bottom-wrapper .left,
.block-views .bottom-wrapper .middle,
.block-views .bottom-wrapper .right {
  background-position: 0 100%;
}

.block-views .top-wrapper .left {
  background-image: url(images/backgrounds/white-dot-top-left.gif);
}
.block-views .top-wrapper .middle,
.block-views .bottom-wrapper .middle {
  background-image: url(images/backgrounds/white-dot-middle.gif);
}
.block-views .top-wrapper .right {
  background-image: url(images/backgrounds/white-dot-top-right.gif);
}
.block-views .bottom-wrapper .left {
  background-image: url(images/backgrounds/white-dot-bottom-left.gif);
}
.block-views .bottom-wrapper .right {
  background-image: url(images/backgrounds/white-dot-bottom-right.gif);
}

.block-views .inside-wrapper {
  padding: 0px 5px;
}

.block-views .content {
  margin: 0;
}