change feature product list designs

[chubbyboy]

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

[chubbyboy]

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

[gjh42]

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.

[chubbyboy]

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

[gjh42]

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>');

Then add to your stylesheet

.featuredImage {height: 123px;}

Adjust the height to fit your tallest image.