Post by Wolfman2 » Sat Oct 06, 2012 3:37 pm

How to change the width featured, catagories, and Special Modules so that they can display more items per row?
When installing a catogories Module Left alligned, it effects the number of items displayed in top and bottom alligned modules such as featured and Special. Please see screen shot, how can I make the modules still display 5 pics per row and utilize all the space?:
Untitled picture.png

Untitled picture.png (192.26 KiB) Viewed 8895 times


New member

Posts

Joined
Wed Oct 03, 2012 12:49 pm

Post by inactiveaccount9912 » Sat Oct 06, 2012 3:50 pm

Edit the file catalog/view/theme/yourtheme/stylesheet/stylesheet.css and find the block .box-product > div and in that block, first you should change the margin right from 20px to 10 or 15, and then alter the value of the width property by making it smaller until 5 products fit on one line.(make sure that the width of the element is bigger than the width you set for the image when you added the module in admin, or if it cant be, edit the module in admin and make the image width smaller.)

Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am

Post by Wolfman2 » Sat Oct 06, 2012 10:32 pm

I have done what you said and yes if I reduce the division it allows 5 items. But there is still a big gap between the end of the item and the end of the box and as soon as a right module is turned on it crops this central area back to 4 items wide only. I believe that this may be do do with the interference of the margin of aligned right modules and the center module area allocated.
Untitled picture 2.png

Untitled picture 2.png (92.73 KiB) Viewed 8879 times

Before adding right categories module and after adding it looks like this and after adding both left and right is looks like this
Untitled picture 3.png

Untitled picture 3.png (55.13 KiB) Viewed 8879 times


I think what I am asking really is how do I keep the central module area the same once left aligned modules are activated. As I believe the left aligned modules are pushing the central module across and the right aligned module margins are restricting how far the edge of the central module may move. Hence when a right aligned module is turned on it crops the central area.

Is there some way to increase the overall total width of the page so that the central area does not get too crowded?

New member

Posts

Joined
Wed Oct 03, 2012 12:49 pm

Post by labeshops » Sat Oct 06, 2012 11:40 pm

All such settings are in the stylesheet so it's just a matter of going thru it and changing what you want. The major sections like overall width is towards the top of the stylesheet and it pretty much goes thru in order. View the source of your page to find the class for whatever section you want to edit, then find that class in the stylesheet. It's usually a bit of trial and error but you can change pretty much anything you want.

Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by Wolfman2 » Sun Oct 07, 2012 12:01 pm

Thank You, I will play around with it.

New member

Posts

Joined
Wed Oct 03, 2012 12:49 pm

Post by Dr. Bogger » Mon Oct 08, 2012 12:03 am

Did u ever figure out how to fix this?
It seems it only happens in IE.. It all displays fine in Google Chrome.

*EDIT*
I changed the margin-right for .box-product > div to 19, instead of 20, and it works good... Plus it doesn't have as much of a gap on the right side.

I guess all it needed was just 1 extra pixel to fit.

User avatar
Newbie

Posts

Joined
Sun Jul 15, 2012 7:01 am
Location - Saratoga Springs, NY

Post by inactiveaccount9912 » Wed Oct 10, 2012 3:54 pm

I usually change the margin right in margin left and make it even smaller (this way you couldhave an equal gap left and right, would look more alinged.).

Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am

Post by Wolfman2 » Wed Oct 10, 2012 4:18 pm

Thank You guys for your help I got it.

New member

Posts

Joined
Wed Oct 03, 2012 12:49 pm

Post by wizcbg » Tue Nov 06, 2012 1:04 am

Can you tell me how to show only the "specials" items ?

Newbie

Posts

Joined
Tue Nov 06, 2012 12:35 am

Post by inactiveaccount9912 » Fri Nov 09, 2012 12:43 am

Well , you could edit the catalog/view/theme/yourtheme/template/module/special.tpl and find the line:

Code: Select all

<div>
its right below the product foreach line.
and either add the styleing directly in the file like:

Code: Select all

<div style="margin-left: 10px; margin-right: 0px; etc....">
or apply a class to it:

Code: Select all

<div class="special">
and then specify different styling fo it in stylesheet.css
(ex in stylesheet.css , below the block .box-product > div add the block .box-product > div.special where you overwrite the properties of the above block).

Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am

Post by Robert1970b » Wed Sep 18, 2013 12:50 pm

I was able to get 5 lines in and center them by altering the stlyesheet and adding a margin-left and setting the margin right to 0:

Mine looks like this :

.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 0px;
margin-left: 18px;
margin-bottom: 20px;

Newbie

Posts

Joined
Tue Sep 10, 2013 7:51 pm

Post by NigelM » Tue Aug 05, 2014 1:02 pm

I am having a similar problem.
However this is in regards to the width of the box Class.
I have been trying to make a new special class with the exact width i need the special box to be.

However i can not get the special.tpl to use this class. Instead it reverts back to the box class for its dimensions.

any idea on how/where to change it so it points to the class i have made?

I am using Opencart-1.5.6.4

Newbie

Posts

Joined
Tue Aug 05, 2014 12:56 pm

Post by LongerVogue » Sat Mar 31, 2018 3:30 am

It seems by changing image width and height in admin side only doesn't really work.
Image

The top module image size is 170*170 which is default size, bottom module image size is 200*200 which is modified size. However, the display doesn't seem correct. There are large margin at right hand side and images are overlapped. There is still some code limiting the image width. How to make it display properly.

Any idea how to change the no. of products in each row.

New member

Posts

Joined
Sat Mar 24, 2018 8:24 pm

Post by IP_CAM » Sat Mar 31, 2018 8:47 am

Well, better forget that not responsive default OC Theme, and switch to a
responsive free Theme, many of them exist for OC v.1.5.6.x Versions, and
most of them look and work quite well, as they come:
https://www.opencart.com/index.php?rout ... Zerocarter
https://www.opencart.com/index.php?rout ... er=Yoocart
https://www.opencart.com/index.php?rout ... forest.net
---
But they all have one 'common' flaw in the responsive.css Stylesheet,
this Line:

Code: Select all

img{max-width:100%;}
it might also look like this:

Code: Select all

img{
max-width:100%;
}
needs to be changed to look like this, to present images in a correct width/height-
relation, if they are shrinked, to match smaller Display Resolutions:

Code: Select all

img{max-width:100%!important; height:auto;}
---
OR BETTER, switch to REAL Bootstrap-3 OC-2 look-a-like Theme 1.5.6.x Technology,
by use of this very nice working Theme, it also comes for free, and it's easy to install as well:
OC Bootstrap - Opencart Bootstrap 3 Theme free, OC v.1.5.2 - 1.5.6.5_rc:
https://www.opencart.com/index.php?rout ... n_id=14631
Image
It looks about like this:
http://www.ipc.li/shop/
---
Just an Idea, good Luck! ;)
Ernie
---

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Who is online

Users browsing this forum: No registered users and 19 guests