OpenCart Community

Posted: **Wed Jun 29, 2011 12:42 pm**

Hello,

I am trying to figure out how to adjust list view. Basically, when I put products in List View, since the descriptions are minor their is a big gap of space between products. What I ideally would like to do is set up the List View much like a table and adjust the add to cart/wish list/compare buttons to be smaller and shrink the picture and give it a pop-up.

Simply looking for a guide on the files that need to be edited. Thanks!

Posted: **Thu Jun 30, 2011 6:29 am**

i can't help with the image pop ups.

BUT....

You can change the thumbnail size. Go to System > Settings.

Click Edit beside your Store Name. The click the tab Image. Then change * Category List Size: to 60px by 60px. You could go smaller if you want, but that should reduce a lot of space.

if you want to make your list view a tighter fit between products (reduce whitespace) then you can change this:

in your theme stylesheet.css find

Code: Select all

product-list > div {
    margin-bottom: 15px;
    overflow: auto;
}

replace with:

Code: Select all

product-list > div {
    margin-bottom: 3px;
    overflow: auto;
}

to make the "Add to Wishlist" font smaller:

in your theme stylesheet.css find

Code: Select all

.product-list .wishlist a {
    background: url("../image/add.png") no-repeat scroll left center transparent;
    color: #333333;
    display: block;
    padding-left: 18px;
    text-decoration: none;
}

replace with:

Code: Select all

.product-list .wishlist a {
    background: url("../image/add.png") no-repeat scroll left center transparent;
    color: #333333;
    display: block;
    font-size: 10px;
    padding-left: 18px;
    text-decoration: none;
}

to make the "Add to Compare" font smaller:

in your theme stylesheet.css find

Code: Select all

.product-list .compare a {
    background: url("../image/add.png") no-repeat scroll left 60% transparent;
    color: #333333;
    display: block;
    padding-left: 18px;
    text-decoration: none;
}

replace with:

Code: Select all

.product-list .compare a {
    background: url("../image/add.png") no-repeat scroll left 60% transparent;
    color: #333333;
    display: block;
    font-size: 10px;
    padding-left: 18px;
    text-decoration: none;
}

OpenCart Community

[1.5.0.5] Adjusting List View

[1.5.0.5] Adjusting List View

Re: [1.5.0.5] Adjusting List View