Add Drupal 6 block regions above the main sheet [solved] |
|
Ian tresman
|
Artisteer offers a large number of Drupal 6 block regions, but not above the main sheet, an ideal place for advertising and information blocks. Here's how I added my own set of three horizontal blocks at the very top of the page.
1. Once you have exported your theme into its own directory, locate and edit the theme's info file. For example, if your theme is called mytheme, there will be a file called mytheme.info
2. Each block is located in a named region. In your mytheme.info file, locate the line regions[top1] = Top 1 and amend as follows in order to add the new regions "Above 1" to "Above 3":
regions[above1] = Above 1
regions[above2] = Above 2
regions[above3] = Above 3
regions[top1] = Top 1
3. Now edit your theme's page.tpl.php file, and after the line <div id="art-main"> , change it to read:
<div id="art-main">
<table id="top-space"><tr>
<td><?php if (!empty($above1)) { echo '<div id="above1">'.render($above1).'</div>'; } ?></td>
<td><?php if (!empty($above2)) { echo '<div id="above2">'.render($above2).'</div>'; } ?></td>
<td><?php if (!empty($above3)) { echo '<div id="above3">'.render($above3).'</div>'; } ?></td></tr></table>
4. Add to the style.css file, the following CSS code:
table#top-space {width:1000px;margin:0 auto}
You'll need to make the width match the width of your main sheet. Personally I use the CSS Injector module to CSS code, see: http://drupal.org/project/css_injector
5. Upload the amended files, and go to the Block Admin screen to see your new block regions. You may need additional CSS markup to get the styles just right. You also might need to go to Admin | Performance and click the Clear Cache Data in order to read in the new theme/style information.
|
| |
Ian Tresman
|
Sorry about the formatting, the Preview is rubbish.
|
| |
Ian Tresman
|
Here's a further development, which (a) customizes the block styles (so they are different to the default block styles) (b) Standardizes the block widths (so that the middle block is 50% width) (c) Fixes the block heights to 64pixels, allowing a standard 60px height banner advert, and truncating the rest.
page.tpl.php
<div id="art-main">
<table id="top-space"><tr>
<td class="ts-left"><?php if (!empty($above1)) { echo '<div id="above1">'.render($above1).'</div>'; } ?></td>
<td class="ts-middle"><?php if (!empty($above2)) { echo '<div id="above2">'.render($above2).'</div>'; } ?></td>
<td class="ts-right"><?php if (!empty($above3)) { echo '<div id="above3">'.render($above3).'</div>'; } ?></td></tr></table>
CSS Formatting
table#top-space {width:1000px;margin:0 auto;text-align:center}
table#top-space td.ts-left, table#top-space td.ts-right {width:25%}
table#top-space .art-block {margin:0;padding:0}
div.art-sheet {margin-top:0px}
table#top-space div.art-blockheader {height:18px}
table#top-space div.art-blockheader .l {background:0;border:0}
table#top-space div.art-blockheader .r {background:0;border:0}
table#top-space div.art-blockheader h3 {text-align:center;font-size:10px;padding:0;letter-spacing:2px;color:#666666;margin-top:-5px}
table#top-space .art-blockcontent-body {border:1px solid #666666;padding:3px;height:64px;overflow:hidden}
table#top-space .art-blockcontent-tr, table#top-space .art-blockcontent-tl, table#top-space .art-blockcontent-br, table#top-space .art-blockcontent-bl, table#top-space .art-blockcontent-tc, table#top-space .art-blockcontent-bc, table#top-space .art-blockcontent-cr, table#top-space .art-blockcontent-cl, table#top-space .art-blockcontent-cc {background:#cccccc;border:0}
|
| |
Mark C
|
Ian,
Thanks for this write up. I'm sure it'll be very helpful to a lot of people. I'm going to give it a try tomorrow.
Note to others, this can also be edited to place regions anywhere on your page.
Mark C.
|
| |
|
|