Image as border

Hello,

As you can see here the product listing image has got a shadow-border.
I think they used images for it. I've heard that you can do it with divs, but I don't get how.
Is there any tutorial?

Sincerly,

Storm

Hi,

There is no tutorial for that.
What they did is that they override the file listing_div of the product view via the menu Display->Views and added a bunch of divs around the product information. Then, then coupled these divs with some CSS and images in order to have the borders.

I've found something with "nested divs".
Is it like this?:


<div id="box">

<div class="border-right"></div>
<div class="content"></div>
<div class="border-left"></div>

</div>



css:

.border-right {

float: right;
background-image: url(border.jpg);

]

.border-left {

float: left;
background-image: url(border.jpg);

}




or do I have some special css codes for this?
Would the way above work?

Regards,

Storm

Probably.

Another solution would probably be to just use the CSS class already there and set one image as background-image. It's less flexible as the size of the image is fixed so if you change the number of columns it won't be the good size anymore, but if it's only for one website (and not a template), it should be enough and way easier to implement.