Post by Mountune » Thu Oct 26, 2017 12:19 am

Right,

After fixing the issues that Netos extension created I still can not get my slideshow or banner on the home page to be centered again. It was before the issue but I cant see any difference in the slideshow.css / slideshow.tpl / banner.tpl compared to what I have now. Sadly I managed to get this centered a fair few months ago and I can not remember or find how I did it again (I have searched and searched and searched)


So ill explain my issue with more detail and a picture:
Image

- The 400 image is 400H x 400W

- The 800 image is 400H x 800W

So with the above you can see the current situation and what I am after (again). I'm not sure what effects for the slideshow / banner change opencart supports so if anyone can do a list that would be fantastic but the main question is how can I get the image centered?


Someone mentioned matching the margins - Where would I do this? Eventually all banners / images in the slideshow will be the same so I just want to know how I can define them so its centered. I do have a backups of the website before the issue but when trying to use them the image stays to the left hand side of the screen.

Any help appreciated as I am desperate to get this sorted as I see it is a commonly asked question (and the answer will be highlighted when its successful to aid other members)

thanks

-----
Opencart Version = v2.3.0.2
Theme = SimpleONE Boxed


New member

Posts

Joined
Mon Mar 27, 2017 10:03 pm

Post by Mountune » Mon Oct 30, 2017 1:05 am

Weekend bump ...

-----
Opencart Version = v2.3.0.2
Theme = SimpleONE Boxed


New member

Posts

Joined
Mon Mar 27, 2017 10:03 pm

Post by Mountune » Mon Oct 30, 2017 11:21 pm

I managed to get this to work... To aid others in this community who searched and could not find help or a solution this is what I did.


Option 1: - Credit to Mojtaba Sabeti for this method

- Open stylesheet.css (shop/catalog/view/theme/? ? ?/stylesheet/stylesheet.css)
(Replace ? ? ? to the theme you have installed)

- Add this to the very end;

.owl-carousel img {
margin: auto;
}



Option 2: - Credit to Andrey Mamykin for this method

- Open stylesheet.css (shop/catalog/view/theme/? ? ?/stylesheet/stylesheet.css)
(Replace ? ? ? to the theme you have installed)

- Add this to the very end;

.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

-----
Opencart Version = v2.3.0.2
Theme = SimpleONE Boxed


New member

Posts

Joined
Mon Mar 27, 2017 10:03 pm

Post by richylh » Wed Aug 22, 2018 5:08 am

Thanks. the option 2 works for me (OC 3.0.2.0)
Option 2: - Credit to Andrey Mamykin for this method

- Open stylesheet.css (shop/catalog/view/theme/? ? ?/stylesheet/stylesheet.css)
(Replace ? ? ? to the theme you have installed)

- Add this to the very end;

.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

Newbie

Posts

Joined
Mon Feb 14, 2011 7:39 am
Who is online

Users browsing this forum: No registered users and 18 guests