change feature product list designs

Hi I want to change my zencart product list to be more neat and design.

I open up this file : includes/modules/mytemplate/new_products.php

I have managed to put a bg for it, and now I need to edit how the image show, description, and button, I want to put table design in them so that they can look like this :

I am trying to modify this : but no clues

'text' => (($new_products->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<a href="' . zen_href_link(zen_get_info_page($new_products->fields['products_id']), 'cPath=' . $productsInCategory[$new_products->fields['products_id']] . '&products_id=' . $new_products->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $new_products->fields['products_image'], $new_products->fields['products_name'], IMAGE_PRODUCT_NEW_WIDTH, IMAGE_PRODUCT_NEW_HEIGHT) . '</a><br />') . '<a href="' . zen_href_link(zen_get_info_page($new_products->fields['products_id']), 'cPath=' . $productsInCategory[$new_products->fields['products_id']] . '&products_id=' . $new_products->fields['products_id']) . '">' . $new_products->fields['products_name'] . '</a><br />' . $products_price . '<br><br><a href="' . zen_href_link( $_GET['main_page'], 'products_id=' . $new_products->fields['products_id'] .'&action=buy_now') . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT) . '</a>');

can any master zen please help me, I want to make my cart more pretty.

thanks very much :smartalec:

hope there is someone willing to help and teach me :)

You probably don't need to change the code for this; use your stylesheet to restyle the elements. If some elements do not have sufficient identifiers, it may be necessary to go in and add a span or a class here and there.
A link to see your site will let us give detailed advice.

There is no need to use an HTML table in any case.

I havent host it yet, its still in local server, I am trying to make it fixed so that when it dont have image it wont move around that much..

the image and all of it.
can css do it?

thanks

If you want to keep the text in the same vertical location for products with and without images, you will need to add a span around the image so that can be fixed height.
<span class="featuredImage"> </span>```
'text' => (($new_products->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<span class="featuredImage"><a href="' . zen_href_link(zen_get_info_page($new_products->fields['products_id']), 'cPath=' . $productsInCategory[$new_products->fields['products_id']] . '&products_id=' . $new_products->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $new_products->fields['products_image'], $new_products->fields['products_name'], IMAGE_PRODUCT_NEW_WIDTH, IMAGE_PRODUCT_NEW_HEIGHT) . '</a></span><br />') . '<a href="' . zen_href_link(zen_get_info_page($new_products->fields['products_id']), 'cPath=' . $productsInCategory[$new_products->fields['products_id']] . '&products_id=' . $new_products->fields['products_id']) . '">' . $new_products->fields['products_name'] . '</a><br />' . $products_price . '<br><br><a href="' . zen_href_link( $_GET['main_page'], 'products_id=' . $new_products->fields['products_id'] .'&action=buy_now') . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT) . '</a>');

.featuredImage {height: 123px;}

Adjust the height to fit your tallest image.