To add this effect on the main product boxes, edit the CSS and find this part (near the bottom)
.PrDescr {
VERTICAL-ALIGN: top; TEXT-ALIGN: left;
}
and add this code underneath it:
.PrDescr UL {
LIST-STYLE-TYPE: none;
PADDING: 0;
MARGIN: 0 0 1em 0;
}
.PrDescr LI {
BACKGROUND-IMAGE: url('images/custom/arrowrsmall.gif');
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: 0;
PADDING: 0 0 0.1em 1.2em;
}
This affects the following line in customer/main/product_box.tpl:
<td class="PrDescr">{$products[product].descr}</td>
This code loads the short product description into the product box.
You will need to amend your short product descriptions to say:
<ul>
<li>1st line of short description
<li>2nd line of short description
</ul>
in the same way as you amended the longer descriptions in my previous post.
It took me a few hours to work out where I was going wrong with my CSS code with this simple mod., but it's a nice feeling when you work it all out!
Using this mod. I can now adjust the 'right arrow' .GIF I am using, with just one upload, and it then updates every single product description and the product boxes. Great stuff!