Home Featured looking a mess

[Ueshi28]

Hello

 

I need help to adapt the module "home featured products" to the theme I use.

When I install this module it shows 1 product per row, the image is on the left and the button below the box. It looks totally a mess!

 

How can I make it look better, for example 4 products per row as in the prestashop default theme?

 

I use prestashop 1.4.8.3

I use a theme I bought

 

I enclose a picture of how I would like it to look.

 

This is my CSS:

 

 

/* ————— homefeatured.tpl ————— */

 

#featured_products {}

 

#featured_products .block_content {

padding: 15px 15px 12px 15px;

}

 

#featured_products a.product_image {

display: block;

padding: 6px;

background: #fff;

border: 1px solid #e1dfdf;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

}

 

#featured_products div {}

 

#featured_products h5 {

padding: 13px 0 9px 0;

line-height: 18px;

}

 

#featured_products span.price {

font: normal 16px "Arial";

color: #3d474f;

}

 

#featured_products .exclusive {

margin: 18px 0 0 0;

 

This is my homefeatured.tpl

 

 

<!-- MODULE Home Featured Products -->

<div id="featured_products" class="block">

<h4>{l s='Featured products' mod='homefeatured'}</h4>

{if isset($products) AND $products}

<div class="block_content">

<ul>

{foreach from=$products item=product name=homeFeaturedProducts}

<li class="ajax_block_product">

<a class="product_image" href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.name|escape:html:'UTF-8'}" /></a>

<div>

<h5><a class="product_link" href="{$product.link}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:25:'...'|escape:'htmlall':'UTF-8'}</a></h5>

<span class="price">{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}{/if}</span>

{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}

{if ($product.quantity > 0 OR $product.allow_oosp)}

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

{else}

<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>

{/if}

{/if}

</div>

</li>

{/foreach}

</ul>

</div>

{else}

<p>{l s='No featured products' mod='homefeatured'}</p>

{/if}

</div>

<!-- /MODULE Home Featured Products -->

 

Thank you!

[mohsart]

global.css:

#tmslider1 ul li div: change left:133px; to top:120px;

#tmslider1 ul li: change width to 150px and height to 250px

 

Play around with those and I'm sure you'll find a view that suits you :-)

 

This is what looked kind of like what you want, for me, using Firefox and inspect element. Try it out!

 

/Mats