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!
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
replace with:
to make the "Add to Wishlist" font smaller:
in your theme stylesheet.css find
replace with:
to make the "Add to Compare" font smaller:
in your theme stylesheet.css find
replace with:
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;
}
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;
}
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;
}
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;
}
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;
}
Who is online
Users browsing this forum: No registered users and 24 guests