"Newbie" with question on displaying products in grid form

[dece]

Here's an example of what I'm trying to accomplish ( http://www.chifactory.com/default.php?cPat...6c5104aa3931dc).

 

I would love to know how to get the grid look with boxes around products.

 

Thanks

[dece]

please

[Guest]

I am kind of a newbie myself but I wanted the same look. I have installed a contribution called 'Product Listing in Columns'. It seems to have done the trick.

 

Here is a link to it.

http://www.oscommerce.com/community/contri...ting+in+columns

 

Hope this helps!

goobs

[rrrhythm]

Here's an example of what I'm trying to accomplish ( http://www.chifactory.com/default.php?cPat...6c5104aa3931dc).

 

I would love to know how to get the grid look with boxes around products.

 

Thanks

please

when you don't get an answer on the forums, it's generally because you haven't asked a very good question. i'm not trying to harsh on you, just pointing out why you haven't gotten an answer (up until now). your question was both too general (how do i get a border?, implying you might not know the basics of HTML and CSS) and too specific (how do i get a border right where you wanted it, which is going to require some pretty deep level coding)

 

i'm going to give you a general answer, rather than a specific one.

 

your basic options are to pay someone to do your coding for you, or to learn how to do it yourself. it's not very hard, even though it can be a little overwhelming at the beginning. but you can do it, and i recommend you learn how to do it yourself.

 

1. read some good books on HTML and CSS. i like the Visual Quickstart series. This will cover the basics, like how to put borders where you want them.

 

2. dive in and start trying. always backup before you start messing with things, so you can recover when you goof up, which we all do, routinely.

 

3. understand the basic architechture: PHP generates HTML. the HTML, together with the CSS, is interpreted by the browser to give final page layout.

 

4. see something you like, like the website you quoted, use the VIEW SOURCE in your browser, and figure out how they did it. this will tell you the HTML they used. now you'll have to backward deduce what PHP they used to generate that HTML.

 

5. now you're programming PHP, so get a good book on that, too.

 

6. one trick i've used to figure out what bit of PHP code generates what bit of HTML, is to go into the PHP file, and wherever i see <table >, i'll insert border="15" bordercolor="#ff0000" between the braces, save, upload, and reload the page. that will but a big red border around that table, so i can see what that specific bit of PHP is coding for. then go back to the php file and comment it!

 

7. get a decent HTML editor, which will color code and automatically indent everything for you, making your code much easier to read. for mac, i like Taco. it's great, and it's free.

 

now, a more specific answer:

quick and dirty: download and open stylesheet.css, find the style for TD.smallText, and add "border: 1px solid, #000000;" i could spell this out a lot more explicitly, but try to work it out for yourself first.

 

what they did: looking at the source for the site you quote, i see:

 

<table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBoxContents">

<tr>

<td align="center" class="smallText" width="300" valign="bottom"><br><br><a href="http://www.chifactory.com/product_info.php?products_id=48&osCsid=88c1a79b009e33517e6c5104aa3931dc)"><img src="images/291-019.jpg" border="0" alt="Amethyst Prayer Box" title=" Amethyst Prayer Box " width="100" height="100"></a><br><a href="http://www.chifactory.com/product_info.php?products_id=48&osCsid=88c1a79b009e33517e6c5104aa3931dc)">Amethyst Prayer Box</a><br> $22.50 <br><form name="buy_now_" method="post" action="http://www.chifactory.com/default.php?cPath=30&sort=2a&page=1&action=add_multiple&osCsid=88c1a79b009e33517e6c5104aa3931dc)"><table><tr><td valign="center">Qty: <input type="text" name="Qty_ProdId_48" value="1" maxlength="6" size="3"> </td><td valign="center"><input type="image" src="includes/languages/english/images/buttons/button_in_cart.gif" border="0" alt="In Cart"></form></td></tr></table><br><br><img src="images/spacerdkgrey.gif" border="0" alt="" width="100%" height="1"></td><td width="1" height="100%" bgcolor="#666666"><img src="images/spacerdkgrey.gif" width="1"></td>

 

the bits in red are how they are specifying the borders (which look more elegant than what you'll get using the quick and dirty CSS method i suggested). now, what PHP did they use to get those bits into their HTML? well, that's a question that will involve very deep level programming, probably in includes/modules/product_listing.php, and maybe even involve altering includes/classes/boxes.php. these are very deep programming, and way more than i (or anyone else, by the lack of response) have the time/desire to get into. but i've given you the outline of attack.