Post by dome90uk » Tue Sep 13, 2011 6:52 am

Hi,

I have been trying to eliminate the white padding at the sides of the NivoSlider on OC v 1.5.1, default template.
The default banner image ( samsung ) is 980px wide but is displayed on the page at 973px with white left and right borders / padding.

I cannot see where this is being generated in the CSS files or where to change the colour. Ideally I would like to remove the white borders / padding and have my banner displayed at exactly 980px ......Can anyone help?

* I have added a purple stroke to the image edge to show the issue a bit better.
Image
Any help appreciated, thanks.

Newbie

Posts

Joined
Tue Sep 13, 2011 2:36 am

Post by joegti10 » Tue Sep 13, 2011 7:51 am

Im interested in where the CSS is located for this as well.

New member

Posts

Joined
Sun Sep 05, 2010 1:49 am

Post by dome90uk » Tue Sep 13, 2011 8:27 pm

bump ... anybody ever solved this or wanted to change this? ....... any help appreciated

Newbie

Posts

Joined
Tue Sep 13, 2011 2:36 am

Post by uksitebuilder » Tue Sep 13, 2011 9:03 pm

If you go to: http://www.yoursite.com/image/cache/dat ... 80x280.jpg

you will see the image is 980 wide, it is the image that has the whitespace, nothing to do with css

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by uksitebuilder » Tue Sep 13, 2011 10:59 pm

AFAIK png images are resized into png images

BUT... The resulting file is usually enormous

Far better to stick with jpg's unless for some reason you need to use/preserve transparency

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by dome90uk » Tue Sep 13, 2011 11:28 pm

Thanks uksitebuilder ... but all is not as it seems ...

The original Samsung banner jpg does not have the space but the cache version does ...

Image

CACHE Version
http://www.yoursite.com/image/cache/dat ... 80x280.jpg

DEFAULT BANNER
http://www.yoursite.com/image/data/sams ... 80x280.jpg
( doesnt open in a browser? check file via ftp or locally)

Could this space be caused when the image is processed by the Nivo Slider JS?
Again any help is appreciated, thanks

Newbie

Posts

Joined
Tue Sep 13, 2011 2:36 am

Post by uksitebuilder » Tue Sep 13, 2011 11:39 pm

i see now

Well, the original image location is actually

http://www.yoursite.com/image/data/samsung_banner.jpg

The dimensions of it are 982x282

So, it is being resized which is causing the gutter around the image.

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by uksitebuilder » Tue Sep 13, 2011 11:40 pm

Anyway, you probably want to get rid of that banner and create your own. So, just create your banner at 980 x 280 and it should fit fine without a gutter (I believe)

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by dome90uk » Wed Sep 14, 2011 12:03 am

Thanks again uksitebuilder,

I tried using my own banner at 980 x 280 but the white edges still remained.

I have managed to solve this issue by oversizing the original banner image to 987px x 282px this removed the white space around the slider image.

Original banner image path - http://www.yoursite.com/image/data/samsung_banner.jpg

This seems like a bug in the code to me.

Anyway..... thanks for your help, got it fixed eventually ;D

Newbie

Posts

Joined
Tue Sep 13, 2011 2:36 am

Post by joebloggs808 » Sat Mar 03, 2012 10:33 pm

Hi there am new to the forum and to opencart.

I thought I'd post on this thread as my problem is similar. I am currently editing the default template with success but cannot seem to find a way of editing the homepage slideshow.

I only want to remove the rounded corners and change the colour of the border but for the life of me can't find anything in any of the stylesheets and nothing (to my very untrained eye) in the coding.

I know it should be a simple thing to do but it is really frustrating me...any of the more experienced users have any thoughts?

Thanks, Joe

EDIT - please ignore me I am going mad, I changed the banner artwork and the rounded edges and grey border disappeared, so must have been on the samsung banner artwork! - what a fool! Altho I would still be interested in knowing how I can add my own border in the slideshow in the stylesheet?

Newbie

Posts

Joined
Sat Mar 03, 2012 10:27 pm

Post by droconut » Thu Mar 15, 2012 4:17 pm

if you are using FF browser, download and install the Firebug addon. Very powerful and will eventually help you solve your problem ;)

hth,

dropping coconut

Droconut SLIDERS v1.23 - customizable image and content slider with caption
Droconut PIECEMAKER v1.00 - customizable PIECEMAKER V2 with caption

for Opencart 1.5.1.3 +


User avatar
New member

Posts

Joined
Wed Mar 07, 2012 4:49 pm

Who is online

Users browsing this forum: No registered users and 21 guests