Page 1 of 1
Space Between banners and remove border
Posted: Thu May 15, 2008 3:41 pm
by rileyjacob
I am using the banner component and when two or more banners show, they stack on top of each other with no space between them and they also have a blue border around them. How do I space these and what files do I need to edit. I really need some help with this. Thanks.
Re: Space Between banners and remove border
Posted: Thu Jan 08, 2009 9:57 pm
by inigo
i have the same problem, any hints?
Re: Space Between banners and remove border
Posted: Thu Jan 15, 2009 5:42 am
by zago
Same problem, any ideas? I could add a faux separation on my graphic, but that doesn't help because I have a border on linked images. There must be a more reasonable way to space out these images. CSS?
EDIT: My very unsophisticated solution has been to add a img reference in the template CSS like below:
a img{
padding-bottom: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
It eliminates the border and adds the space, but of course the change is global so it will impact linked images other than the banners.
Re: Space Between banners and remove border
Posted: Fri May 29, 2009 10:45 pm
by okmat
This is how I did it:
open modules/mod_banners/helper.php
Find this code:
Code: Select all
else if (BannerHelper::isImage( $item->imageurl ))
{
$image = '<img src="'.$baseurl.'images/banners/'.$item->imageurl.'" alt="'.JText::_('Banner').'" />';
add "vspace="10px" (or any value you like) after the img tag se the code looks like this:
Code: Select all
else if (BannerHelper::isImage( $item->imageurl ))
{
$image = '<img vspace="10px" src="'.$baseurl.'images/banners/'.$item->imageurl.'" alt="'.JText::_('Banner').'" />';
As for the border, well, I haven't tested it but i'm sure you can add the border="0" attribute to the image tag as well.
Cheers
EDIT: while the previous mod works well on firefox, it doesn't work on IE7, so an easier way to add a vertical space between banners is to add a <br /> tag after the image tag like this:
Code: Select all
else if (BannerHelper::isImage( $item->imageurl ))
{
$image = '<img src="'.$baseurl.'images/banners/'.$item->imageurl.'" alt="'.JText::_('Banner').'" /><br />';
Re: Space Between banners and remove border
Posted: Wed Jun 10, 2009 2:11 am
by red2678
Add the following (if not there) to your template's css file:
.banneritem img
{
display: block;
border:none;
margin-left: auto;
margin-right: auto;
margin-bottom:10px;
}
Re: Space Between banners and remove border
Posted: Sat Jul 03, 2010 4:33 am
by oddbrawl
red2678 wrote:Add the following (if not there) to your template's css file:
.banneritem img
{
display: block;
border:none;
margin-left: auto;
margin-right: auto;
margin-bottom:10px;
}
THANK YOU!