Image as border

  • Posts: 39
  • Thank you received: 0
13 years 6 months ago #15831

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

Please Log in or Create an account to join the conversation.

  • Posts: 82867
  • Thank you received: 13374
  • MODERATOR
13 years 6 months ago #15838

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.

Please Log in or Create an account to join the conversation.

  • Posts: 39
  • Thank you received: 0
13 years 6 months ago #15844

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

Please Log in or Create an account to join the conversation.

  • Posts: 82867
  • Thank you received: 13374
  • MODERATOR
13 years 6 months ago #15846

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.

Please Log in or Create an account to join the conversation.

Time to create page: 0.061 seconds
Powered by Kunena Forum