By CraftyDevon on

Hey All,
I am working on a theme which is resembles a tree. The foilage in the header area will contain the nav, the content area will have a wood texture behind it, blue to the sides, and grass/dirt/roots at the bottom. One thing I am working on is a custom block layout for the left and right sidebars.

Each block will "hang" from a branch that contains a title i.e.-connect. The actual block will look like a sign, with some string connecting the block and the branch. I am going to do my best to not have to change the blocks, perhaps making my objective easier, but It would be nice to be able to do.

What would you all suggest for carrying this out? I would say I could just make the graphic, then place it in the block, and plug it in. But that cuts out the ability for dynamic content inside the blocks. Would the following work?

Make the branches/signs a permanent part of the theme, then arrange the blocks to only print in that area?

Any suggestions would be highly appreciated.

Thanks
Devon

⋅ Categories: Drupal 6.x

Comments

TimeBandit’s picture

TimeBandit commented

Create a block.tpl file for the block. In the block, add some DIV tags. Help for block.tpl file creation.

Generally you could do this 2 ways depending on your goals/graphics for the sign:

Way 1 (generally GIFs or JPG with no transparency needs):

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?>">
<?php if ($block->subject): ?>
  <h2><?php print $block->subject ?></h2>
<?php endif;?>

<div class="mid"><div class="top"><div class="btm">
  <div class="content">
    <?php print $block->content ?>
  </div>
</div></div></div>

</div>

Way 2 (generally PNGs with transparency needs):

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?>">
<?php if ($block->subject): ?>
  <h2><?php print $block->subject ?></h2>
<?php endif;?>

<div class="top"></div>
<div class="mid">
  <div class="content">
    <?php print $block->content ?>
  </div>
</div>
<div class="btm"></div>
</div></div></div>

</div>

Before I go on... obviously you can code this block anyway you need to. I'd personally use less but want to illustrate the intention more fully. I also did not include the H2 inside the sign. You can add it inside if you prefer.

Way 1 is the ordinary way, the way we used to HAVE to do it generally, where the "mid" DIV contains a repeating background that will create the center, stretchable part of your box. Then the top and btm DIVs have CSS forcing their background images to top/bottom, covering the stretchable graphic where appropriate.

Way 2 is used more often these days because people want gradients and shadows and such, requiring PNG graphics. We can't fake the covering over part as in Way 1 because PNGs have alpha transparency and our secret cheat in Way 1 would be revealed. We instead need to create a separate top/btm element that can contain NO content, and exists only to be forced to the height/width of the top/btm graphic of your sign. On top/btm styles use display:block plus height, width.

CraftyDevon’s picture

CraftyDevon commented

Thank you for such a detailed response!

So, once I have my block.tpl file created, how do I actually go about adding the sign w/string image, and the branches? Is there a certain area in the above that I missed where I need to place each image?

Thanks

vonny007’s picture

vonny007 commented

YOu could also try using the block theme module, but im sure you already know that.