[SOLVED] Product List in GRID view

[archproject]

Greetings,

Can someone take a look at my coding I used some codes from THIS POST and added it to my themes product-list.tpl like so :

My Product-list.tpl is attached

Then I edited my global.css like so

global.css

/* product-list.tpl */
ul#product_list{ margin-top:2em; list-style-type:none; }
ul#product_list li {
   /*background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;*/
   /*border: solid 1px #d0d3d8;*/
       float:left;
   padding: 0px;
       width:210px;
   height:280px;
   clear:both;
   margin-bottom:1em;
}

ul#product_list li a {
   text-decoration:none;
   color:#374853;
}

ul#product_list a.product_img_link{
   /*border: solid 1px #d0d3d8;*/
   float:left;
   margin-right:0.6em;
}

ul#product_list a.product_img_link img{
   vertical-align:bottom;
}
ul#product_list li h3{ margin:0.4em 0; }
ul#product_list li .new{
   background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
   border:1px solid #488C40;
   color:black;
   font-size:1em;
   font-weight:bold;
   margin:0pt 1em 0pt 0pt;
   padding:0pt 0.4em;
   text-transform:uppercase;
   vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:0.92em; }
ul#product_list li div.center_block{
   float:left;
   width:74%;
}
ul#product_list li div.right_block{
   float:left;
   width: 11em;
   text-align:right;
   margin-left:0em;
   margin-top:0;
}
ul#product_list li .discount{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .on_sale{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .reduction {
   display: block;
   margin-bottom: 0.3em;
}
ul#product_list li .price{
   display: block;
   font-size: 1.5em;
   margin-bottom: 0.2em;
}
ul#product_list li span.availability{
   float: right;
   color:#488c40;
   font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }

FIRST

So now the problem is that the I want everything to be

for picture, product_name, product availability, product on sale etc including all the buttons. How can I achieve that with the current codes i have above. Where do I need to change since I tried to put the tag every where but no luck ....

SECOND

I need to remove the line that is next to every single product that is displayed in the product list. as illustrated in the pic

I just don't know which one to edit and where.

Please help.

product-list.txt

[archproject]

Ok after about 2-3 hrs or change- test-change-test-change-test ... I manage to make the buttons and the wording to be centered..... Yeaaaaaa..... but the space at the right of the product image is still there... I just don't know where to change it..... I am sooo tired..... Sleepy I have to drive 120 KM after this post ... going home...

As usual my product-list.tpl as attached

Global.css

/* product-list.tpl */
ul#product_list{ margin-top:2em; list-style-type:none; }
ul#product_list li {
   /*background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;*/
       background: #d0d3d8 url('../img/bg_box.jpg') repeat-x;
   border: solid 0px #d0d3d8;
       float:left;
   padding: 0px;
       width:200px;
   height:280px;
   clear:both;
   margin-bottom:1em;
}

ul#product_list li a {
   text-decoration:none;
   color:#374853;
}

ul#product_list a.product_img_link{
   border: solid 0px #d0d3d8;
   float:left;
   margin-right:0.6em;

}

ul#product_list a.product_img_link img{
   vertical-align:bottom;
}
ul#product_list li h3{ margin:0.4em 0; }
ul#product_list li .new{
   background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
   border:0px solid #488C40;
   color:black;
   font-size:0.7em;
   font-weight:bold;
   margin:0pt 1em 0pt 0pt;
   padding:0pt 0.4em;
   text-transform:uppercase;
   vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:0.92em; }
ul#product_list li div.center_block{
   /*float:left;*/
   width:100%;
}
ul#product_list li div.right_block{
   /*float:left;*/
   width: 11em;
   text-align:right;
   margin-left:0em;
   margin-top:0;
}
ul#product_list li .discount{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .on_sale{
   color:#da0f00;
   text-transform:uppercase;
   font-weight:bold;
   display: block;
}
ul#product_list li .reduction {
   display: block;
   margin-bottom: 0.3em;
}
ul#product_list li .price{
   display: block;
   font-size: 1.5em;
   margin-bottom: 0.2em;
}
ul#product_list li span.availability{
   /*float: right;*/
   color:#488c40;
   font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }

Can somebody help me ...

product-list.txt

[archproject]

are there no takers here ? I think for someone who has experience in CSS it's a simple answer

[archproject]

It's hard to find good help these days heheheh .. anyway ... i got it to work .... it was another parameter in the global.css I think it's called the block_content or something .... I just need to remove a couple of pixels from the right and now it looks great and I have installed the image enlarger as well ... cool module from marghoob THIS POST and it was really nice.

anyway ... thanks for you all that viewed this post ...

look at the attachment ... it looks nice right ....

[fallenleader]

took me more than a few days to sort mine out.
i believe, i use position:absolute; bottom: 6px; to lock my buttons in place
if im mistaken, sorry, i didnt keep notes and changed a LOT of code.

ul#product_list li div.right_block{ float: left; padding: 0 6px 0; position:absolute; bottom:6px; text-align:center;}

just a note about the photo i supplied, those gradients and buttons are all CSS, not stock presta images anymore. the only images are the product ones.

[iboMonkey]

Thanks, I just started on using Prestashop and this was very useful for me.

[archproject]

fallenleader,

Thanks for sharing that "absolute" thing with this thread ... I was beginning to accept the fact that the buttons will be moving around heheheh ... anyway .. really appreciate the suggestion ... I will try it 1st thing tomorrow morning....

IboMonkey,

Cool ... Prestashop is cool right hehehehe ... I started with OSCOMMERCE .. but it 's just sooo hard to customise ... heheheh .. prestashop .. just needs some time and it will be the best open source FREE shopping cart .. heheheh ..

[iboMonkey]

Say, Archproject or Fallenleader, I have an issue with the imagesize of the thumbnails (see attachment). I've adjusted the size of the display, but see what happens! No matter in what size I upload the images.

Do you have a clue?

[fallenleader]

well imagesize is part of the back office, and not something i've really messed with.
i would say, mess with the back office, preferences, images area. and regenerate your thumbnails after

[archproject]

ibomonkey,

Usually i just upload a square image like 500x500 or 200x200 or 350x350 ... and when you create the product it will autogenerate the smaller images for you. Fallenleader is right you need to play around with the image sizes in the BO>Preference>image to achieve what you want ... but I don't see any faults in your picture .. it looks perfect ... maybe you can point out what seems to be a problem to you ?

Regards
Archproject

[iboMonkey]

Thank you both for commenting.

In 'preferences > image' I can put up several defaults for image sizing. For example, the images in my product-list are meant to be 240x180, so I created a set for that. However, when I upload them, in that size, I only get the smaller 100x100 (or so I think) images show up in the list. Like in the attached dumpscreen of the earlier post, it shows the 240x180 in grey, but with just very small thumbnails in it. And I'd like that to be fixed.

Kind regards,
ibo

[fallenleader]

yes, you will need to make adjustments in the back office, try some searching for thumbnail size that should come up with results, but to help you quick, since i already searched. try adjusting the properties for "home" in the back office/preferences/image
that will redo the product images on the whole site after you use the regenerate button after making your changes.

[iboMonkey]

When regenerating I receive an error, so maybe I've messed up something internally... (wouldn't know what though).

However, I've edited 'home' in the backoffice>preferences>image as you suggested, so I'll let you know if it works.

Thanks,
ibo

[fallenleader]

depending on the error, it may be a CHMOD permission.

[iboMonkey]

Thanks so much for the advise fallenleader, it looks proper now. The image pushed out the 'price' tag, but this will be easily solved in css (fingers crossed of course

[fallenleader]

no problems, really all i can do is help out some, presta can be a major pain, web stuff can be a major pain. my site design is done and im currently at shipping nightmare.

[iboMonkey]

Before I posted the question about image sizes, I had already made a custom pre-set in backoffice>preferences>image with size 240x180. However, it worked only after adjusting the size for 'home'. Now I have a similar problem in the page with detailed description of the product and larger roduct photo. For some reason I keep getting images with big black borders around it. (the attachment contains only part of that page, but shows the problem nevertheless)

[fallenleader]

im not able to help you anymore with this, it's beyond my experience, but you might consider making a topic and posting the question in that.

good luck.

[iboMonkey]

Ok, thanks so far. Really appreciate it.

[iboMonkey]

A new question again on this matter,

I have made changes to both 'home' (240x180) and 'thickbox' (710x533). Then I uploaded an image again to test it and automatically it got 'resized' into an image suitable for home and thickbox. The imagesize of the originally uploaded image is 710x533, in high standard jpg. But look at the picture in thickbox-size (attached).... It's nowhere near good to show, even though in reality it didn't even have to be resized.

What are your experiences with this? Is there a way to improve it? Because this way I could never show my customers.

Kind regards,
ibo

[fallenleader]

as i've said, i'm no help in this matter.
please make a topic in the appropriate area because you will attract more attention and help that way, since this topic has been "solved" it wont get many visitors other than people looking about grids.
that is really your best option to getting a solution. sorry.

[nuchie1]

How can I get the bottoms to line up like in the pics?

[pepekmentul]

i was told that i better copy and paste code from homefeatured to product-list.tpl which i tried and it worked like charm. can i just do so??? if not, why? does it have any effect?

[ScubaLessonsInc]

took me more than a few days to sort mine out.
i believe, i use position:absolute; bottom: 6px; to lock my buttons in place
if im mistaken, sorry, i didnt keep notes and changed a LOT of code.

ul#product_list li div.right_block{ float: left; padding: 0 6px 0; position:absolute; bottom:6px; text-align:center;}

just a note about the photo i supplied, those gradients and buttons are all CSS, not stock presta images anymore. the only images are the product ones.

Can you please upload your product-list.tpl file? and if you changed CSS supply that too?
Love this look!
thanks.

[Hayati]

Hello everybody,

 

For the past days I read every message about modifing the view of products from list to grid. I took the hints given by other users (float: left and position: absolute are the most important ones), I started applying them to my product_list.css and changing all the characteristics (one by one) in order to see what they actually do. I finally have a 3 row grid and I love it! You can see below 2 print screens (one with add to cart button and one without):

 

 

 

You only have to modify the file named product_list.css which you can find in themes->prestashop->css.

 

Here is my product_list.css:

 

/* product-list.tpl */
ul#product_list { margin-top: 2em; list-style-type: none 
}
ul#product_list li {
background: #d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x;
padding: 1px;
height: 370px;
margin-bottom:0.3em;
border: solid 1px #d0d3d8;
float: left;
width: 29%;
margin-right:1px;
margin-left:1px;
margin-top:1px
}
}
* html ul#product_list li {
height: auto !important
}
ul#product_list li a {
text-decoration: none;
color: #383838
}
ul#product_list a.product_img_link {
border: solid 1px #d0d3d8;
float:left;
margin-right: 10px;
margin-left: 15px;
margin-top: 1px
}
ul#product_list a.product_img_link img { 
vertical-align: center	 
}
ul#product_list li h3{ 
margin:0.1em 0;
width:160px;
padding-bottom:2px;
text-align:center
}
ul#product_list li .new {
background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border:1px solid #488C40;
color:white;
font-size:0.6em;
font-weight:bold;
margin:0pt 1em 0pt 0pt;
padding:0pt 0.4em;
vertical-align:0.3em
}
ul#product_list li p.product_desc { 
margin-top: 1em;
text-align: center;
font-size: 0.92em 
}
ul#product_list li div.center_block {
float: left;
width: 100%
}
ul#product_list li div.right_block {
float: left;
width: 11em;
margin-left: 2em;
margin-top: 22em;
position: absolute;
text-align: center;
color: #da0f00;
font-weight: bold
}
ul#product_list li .discount {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .on_sale {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em
}
ul#product_list li .price {
display: block;
font-size: 170%;
margin-bottom: 0.3em

}
ul#product_list li span.availability {
color: #488c40;
font-size: 0.9em	
}

ul#product_list li span.notavailable {
 color: red;
 font-size: 0.9em
 }
ul#product_list li a.button { margin-top: 0.5em }

input.exclusive, input.exclusive_disabled, a.exclusive, span.exclusive { margin-top:6px; background-image: url('../img/button-medium_exclusive.png') }
div.pagination {clear:both; padding: 1em 0 }

 

 

I still have one minor problem with the cart module. The CART button is not on the same level as the PAY button. Do you have any idea on how to fix this?

 

[ScubaLessonsInc]

Just open up the page in firefox,and use the firebug add on. right click on the line and choose inspect element, then it will show you what needs to be adjusted. This is great for seeing the CSS code as your changing visual aspects of your site.

 

firefox.com has the download and the browser and add on are both free open source software.

 

Gotta love open source.

[ScubaLessonsInc]

I would also reccomend the css class on google code university, just google it and it will come up. It will help you understand what affects what allot better and it would only take about an hour to get through the videos on it. Or W3 Schools.. online and free classes..

 

http://www.w3schools.com/css/css_syntax.asp

 

This is quick and easy and will help you allot.

 

 

Thanks, Tina