How to add an additional banner position on the mainpage?

Hello there,

I want to add a banner in the middle of banner1 and banner2, with the same width as banner2, so I can put an image and text there.

I tried the following but did not work.
Went to layouts/default.php and found this

Code: Select all

<?php if($this->API->modules('banner1 or banner2')) : ?>
    <section id="gkBanners">
       <?php if($this->API->modules('banner1')) : ?>   
       <div id="gkBanner1">
          <jdoc:include type="modules" name="banner1" style="<?php echo $this->module_styles['banner1']; ?>" />
       </div>
       <?php endif; ?>
       
       <?php if($this->API->modules('banner2')) : ?>   
       <div id="gkBanner2">
          <jdoc:include type="modules" name="banner2" style="<?php echo $this->module_styles['banner2']; ?>" />
       </div>
       <?php endif; ?>
    </section>
    <?php endif; ?>

then I added this in the middle

Code: Select all

<?php if($this->API->modules('banner3')) : ?>   
       <div id="gkBanner3">
          <jdoc:include type="modules" name="banner3" style="<?php echo $this->module_styles['banner2']; ?>" />
       </div>
       <?php endif; ?>

Of course I added the position's name in templateDetails.xml and I added the css ID gkBanner3 but still when I publish a module in that new position, in the middle between banner1 and banner2. It shows there but banner2 goes down to display on a new line.



Notice the image above.
"Now Playing" module is in "banner1"
"Some Text Here" module is in "banner3"
"Social Icons" is in "banner2"

I wish them all to be on the same line.

I went to administrator/templates and fixed the width of banner1 and banner2 to 25% each. but still not working.

Hi,

Please give me your site URL then I will check css code to give you a solution to fix that.

Thanks,

Code: Select all

http://icarwakim.com/sites/r1/

It's a rough upload, some modules are disabled. I hope that's ok.

Thank you, here is the code to add to CSS Override to fix it:

Code: Select all

#gkBanner1, #gkBanner2, #gkBanner3 {
    width: 33.3%!important;
    float: left;
}


let me know if it helps.

Cheers,

That worked for the banner positions but messed everything below. Please see screenshot.
The width of the homepage slideshow and the module below are reduced significantly.

I doesn't happen the same for me, please compare 2 screenshots below:

- Before fix: http://easycaptures.com/fs/uploaded/510/3943394080.jpg

- After fix: http://easycaptures.com/fs/uploaded/510/1070221844.jpg

I made the changes locally but now I have uploaded them so you could see what's happening.

Code: Select all

http://icarwakim.com/sites/radioonev2/

Notice the slideshow and the module below it. It's happening on both Chrome and Firefox.

Hi,

You seem to have added a wrong code:

Code: Select all

aside#gkLeft, aside#gkInset1, section#gkContent, section#gkComponentWrap, aside#gkInset2, aside#gkRight, #gkBanner1, #gkBanner2, #gkBanner3{
width: 33.3%;
}


While the one I have given you was:

Code: Select all

#gkBanner1, #gkBanner2, #gkBanner3 {
    width: 33.3%!important;
    float: left;
}


Please check and correct it.

Yes. That fixed it.
Thank you.

Glad to hear that, feel free to let me know if you need any other helps.

Cheers,