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?:
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?:
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.)
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.
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?
Before adding right categories module and after adding it looks like this and after adding both left and right is looks like this
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?
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.
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.
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.
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.).
Well , you could edit the catalog/view/theme/yourtheme/template/module/special.tpl and find the line:
its right below the product foreach line.
and either add the styleing directly in the file like:
or apply a class to it:
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).
Code: Select all
<div>
and either add the styleing directly in the file like:
Code: Select all
<div style="margin-left: 10px; margin-right: 0px; etc....">
Code: Select all
<div class="special">
(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).
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;
Mine looks like this :
.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 0px;
margin-left: 18px;
margin-bottom: 20px;
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
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
It seems by changing image width and height in admin side only doesn't really work.
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.
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.
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:
it might also look like this:
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:
---
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
It looks about like this:
http://www.ipc.li/shop/
---
Just an Idea, good Luck!
Ernie
---
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%;}
Code: Select all
img{
max-width:100%;
}
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
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.
Who is online
Users browsing this forum: No registered users and 121 guests