X-Cart forums

[Sisom]

Hi, I am trying to find out where (or what) {$product.fulldescr} is, I want to add some CSS so that I can put in <li> tags to the product description and have them appear as a graphic (an arrow) at the start of each line.
Can anybody tell me where I need to look to edit {$product.fulldescr}?

[balinor]

If you want to add <li> tags to the product description, you need to do that IN the product description by editing it in the modify product area.

[Sisom]

Sorry, I didn't make myself very clear - I know I have to add the <li> tags in the product description, but I wanted to avoid having to put <div> tags in there as well, so I thought if I could find out where the {$product.fulldescr} was, I could put the <div class=> tag in there and then I wouldn't have to put it in every single product description. Is this possible?

[balinor]

Sure, customer/main/product.tpl

[Sisom]

Thanks, Balinor.
This is what I did to (finally) make it work. (After several hours of mucking about!) I changed this part of customer/main/product.tpl:

<span>{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{ /if}</span>
^^^^^

to:

<span class="Productbullets">{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{ /if}</span>
^^^^^^^^^^^^^^^^^^^

I then defined Productbullets in the CSS as follows:

.Productbullets UL {
LIST-STYLE-TYPE: none;
PADDING: 0;
MARGIN: 0 0 3px 0;
}
.Productbullets LI {
BACKGROUND-IMAGE: url('images/custom/arrowrsmall.gif');
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: 0;
PADDING-LEFT: 1.2em;
}

(arrowrsmall.gif is the custom graphic I used for the bullet, just upload it to your images/custom directory.)

And I used the following code in the product description:

<ul>
<li>1st line of description
<li>2nd line of description
<li>3rd line of description
<li>4th line of description
</ul>

And it now works great! Many thanks for your help.
This is a very nice mod for anybody who wants to add custom bullets to their product descriptions.

[Sisom]

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!

[Sisom]

I have just one small problem that only comes up on a few products: when the line wraps around so there are two or more lines, the bullet is centred vertically between the lines, which looks odd; I would like it to be aligned with the top line.
Does anybody know how to do this?


...I worked it out

I used:
BACKGROUND-POSITION: top;

I would like to move the GIF down a couple of pixels, but I've tried changing the margin in
.Productbullets LI
but I can't seem to make it do anything useful. If I make the top margin 2px (or whatever) the .GIF seems to move UP, but surely that's wrong? I tried a minus value and the text ended up on top of the .GIF.

...I fixed this problem by just adjusting the .GIF in PhotoImpact 12, so that the arrows are two pixels lower in the image. But I think that's cheating!