How to modify the Product Details List on the Product Details Page to look tabular?

[CaptainCarlton]

Hi guys,
A total noob here but have progressed very well thanks to this great forum.

I am trying to customise the Product Details List on the Product Details page (tpl_product_info_display.php). That is, the <UL> containing model, weight, etc... I have already removed the bullets via adding a custom tag in the stylesheet with list-style-type: none, and that's fine.

Basically I want to make this list appear column-like, so that the model ($products_model), weight ($products_weight) etc are all say right justified at some small distance from the colon :

So, instead of (the 'z' and '1' not vertically aligned)

Model: zencart139
Weight: 1 kg

I would like (the 'z' and '1' vertically aligned)

Model: zencart139
Weight: 1 kg

Any ideas ?

Many thanks,

adam

[gjh42]

There is no distinction possible in the stock output, but you can easily modify the code to allow it.
In /includes/templates/your_template/templates/tpl_product_info_display.php, find this line

  <?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>

and add
<span class="detailItem">
and
. '</span>'
as shown:

  <?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li><span class="detailItem">' . TEXT_PRODUCT_MODEL . '</span>' . $products_model . '</li>' : '') . "\n"; ?>

Repeat this for other details you want to affect, then add to your stylesheet

.detailItem {display: inline-block; width: 8em;}

Adjust to taste.

[CaptainCarlton]

Thanks for that, excellent.

Just curious about this list, for example in the line you posted where you added the span class... I tried to remove the <li> tags (and the <ul> tags to see if I could remove the bullet points by removing the actual list, instead of removing the bullets via the stylesheet (which works fine). When I remove the <li>'s and <ul>'s it breaks the page. Not sure if its me not understanding the resultant syntax (likely!!).

Anyway, thanks again.

[gjh42]

The list is useful for more than just the bullets - it sets the organization of the elements. You could replace it with a div or something else, but it really is a list no matter how you want to style it.