[CUSTOM] Break "banner2" into two module positions, add banner3

Hi
This is my first post as subscriber user.
I know this question is about customization, but hope someone can give me some tip

I want to "break" or "divide" the banner2 module position (zone) into two modulepositions, without breaking anything (css). Some like:



Any tips?
Thanks

Which version are you using?
For J!1.5 or J!1.7?

For J! 1.5

ok try something like this:

Open templateDetails.xml file and add extra position:

Code: Select all

<position>banner3</position>

Next open ../gk_sporter/layouts/blocks/header.php
find this lines

Code: Select all

<?php
   
   $wheader1 = $wheader2 = 100;
   
   if($this->countModules('header1 && header2')){
      $wheader1 = $this->getParam('header1_column');
      $wheader2 = 100 - $this->getParam('header1_column');   
   }
   
?>


replace with

Code: Select all

<?php
   
   $wheader1 = $wheader2 = 100;
   
   if($this->countModules('header1 && header2')){
      $wheader1 = $this->getParam('header1_column');
      $wheader2 = 100 - $this->getParam('header1_column');   
   }
   
?>

<?php
   
   $banner2 = $banner3 = 97;
   
   if($this->countModules('banner2 && banner3')){
      $banner2 = 48;
      $banner3 = 48;   
   }
   
?>


find this lines:

Code: Select all

<?php if( $this->countModules('banner2') ): ?>
<div id="banner2" class="clearfix clear">
   <jdoc:include type="modules" name="banner2" style="none" />
</div>
<?php endif; ?>


and replace with

Code: Select all

<?php if( $this->countModules('banner2 + banner3') ): ?>
<div id="gk-banner-wrap">
   <?php if($this->countModules('banner2')) : ?>
      <div id="banner2" style="width:<?php echo $banner2; ?>%;">
         <jdoc:include type="modules" name="banner2" style="gavickpro" />
      </div>
   <?php endif; ?>
   <?php if($this->countModules('banner3')) : ?>
      <div id="banner3" style="width:<?php echo $banner3; ?>%;"
         <jdoc:include type="modules" name="banner3" style="gavickpro" />
      </div>
   <?php endif; ?>
</div>
<?php endif; ?>


Them open template.css file and find this line:

Code: Select all

#banner1,
#banner2 { margin: 0 0 18px 0; padding:0 18px; }


replace with

Code: Select all

#banner1{ margin: 0 0 18px 0; padding:0 18px; }
#banner2 {float: left; margin: 0 7px 18px 15px;}
#banner3 {float: right; margin: 0 15px 18px 7px;}


That should do the job.

Modules style is "gavickpro" style so you can place there any module.

screen_2011-08-25-2.png

Cheers

Hi again
I almost succeeded, but now I'm having a little problem.

I created 2 modules, one for banner2, other for banner3. Published them, etc. When I loaded the page the zone was divided, cool, but one showed below the other. So, I changed header.php and put 47 value to both $banner2 and $banner3 variables. This corrected the positioning of both, but now, when both banners show, the background on the rest of the site becomes transparent, look:




Thanks a lot again for your help

UPDATE: when i publish ANYTHING in banner3 position, content background makes transparent