Drupal block.tpl.php Advanced

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. But 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

  1. <div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="clear-block block block-<?php print $block->module ?>">
  2.     <?php if (!empty($block->subject)): ?>
  3.         <h2><?php print $block->subject ?></h2>
  4.       <?php endif;?>
  5.   <div class="outside-wrapper">
  6.     <div class="top-wrapper">
  7.       <div class="left"></div>
  8.       <div class="right"></div>
  9.       <div class="middle"></div>
  10.     </div>
  11.     <div class="inside-wrapper">
  12.       <div class="content"><?php print $block->content ?></div>
  13.     </div>
  14.     <div class="bottom-wrapper">
  15.       <div class="left"></div>
  16.       <div class="right"></div>
  17.       <div class="middle"></div>
  18.     </div>
  19.     </div>  
  20. </div>

block.css
  1. .block-views .outside-wrapper {
  2.   padding:2px;
  3. }
  4.  
  5. .block-views .top-wrapper, .block-views .bottom-wrapper {
  6. }
  7.  
  8. .block-views .top-wrapper {
  9.   margin-bottom:-5px;
  10. }
  11.  
  12. .block-views .bottom-wrapper {
  13.   margin-top:-5px;
  14. }
  15.  
  16. .block-views .top-wrapper .left
  17. ,.block-views .top-wrapper .right
  18. ,.block-views .bottom-wrapper .left
  19. ,.block-views .bottom-wrapper .right {
  20.   background-repeat:no-repeat;
  21.   width:9px;
  22. }
  23.  
  24.  
  25. .block-views .top-wrapper .left
  26. ,.block-views .bottom-wrapper .left {
  27.   float:left;
  28. }
  29. .block-views .top-wrapper .right
  30. ,.block-views .bottom-wrapper .right {
  31.   float:right;
  32. }
  33.  
  34. .block-views .top-wrapper .middle
  35. ,.block-views .bottom-wrapper .middle {
  36.   background-repeat:repeat-x;
  37. }
  38.  
  39. .block-views .top-wrapper .left
  40. ,.block-views .top-wrapper .middle
  41. ,.block-views .top-wrapper .right
  42. ,.block-views .bottom-wrapper .left
  43. ,.block-views .bottom-wrapper .middle
  44. ,.block-views .bottom-wrapper .right {
  45.   display:block;
  46.   height:10px;
  47. }
  48.  
  49. .block-views .top-wrapper .left
  50. ,.block-views .top-wrapper .middle
  51. ,.block-views .top-wrapper .right{
  52.   background-position:0 0;
  53. }
  54.  
  55. .block-views .bottom-wrapper .left
  56. ,.block-views .bottom-wrapper .middle
  57. ,.block-views .bottom-wrapper .right {
  58.   background-position:0 100%;
  59. }
  60.  
  61. .block-views .top-wrapper .left {
  62.   background-image:url(images/backgrounds/white-dot-top-left.gif);
  63. }
  64. .block-views .top-wrapper .middle, .block-views .bottom-wrapper .middle {
  65.   background-image:url(images/backgrounds/white-dot-middle.gif);
  66. }
  67. .block-views .top-wrapper .right {
  68.   background-image:url(images/backgrounds/white-dot-top-right.gif);
  69. }
  70. .block-views .bottom-wrapper .left {
  71.   background-image:url(images/backgrounds/white-dot-bottom-left.gif);
  72. }
  73. .block-views .bottom-wrapper .right {
  74.   background-image:url(images/backgrounds/white-dot-bottom-right.gif);
  75. }
  76.  
  77. .block-views .inside-wrapper {
  78.     padding:0px 5px;
  79. }
  80.  
  81. .block-views .content {
  82.     margin:0;
  83. }

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.