Help Me....problem With Featured Product Homepage

[nufaha]

hye, i have a few question, i hope someone will help me

 

1. I want make 6 picture in a row under featured product, i already change in homefeatured tpl file to 6 picture in a row, but it didnt work, i use default theme only, and i remove the right column, and make the center column wider

 

the 6th picture is in the second row, i thought because of not enough space in the first row, so i change the image size through back office-->preferences-->image-->home_default, the size is become smaller, but it didnt change anything, the space between picture (refer the picture) is become bigger....

 

this is picture before i change the size picture

 

 

 

this is picture after change size picture

 

 

 

because i though there is no solution to fix 6 picture in a row, i try to make the picture bigger to fix 5 picture in a row, but this happened...

 

 

 

 

ok, my question is why there is a space at the end even i change the size to bigger picture, and why the picture look like that, how to make it fix in a row without space at the end?

 

another question, is there a way to make it it fix for 6 picture in a row?

 

ok. thats all....i hope anyone who read my post understand what i try to tell my problem, sorry if my english is bad

[NemoPS]

Hi,

The space in your second screen is not more than in the first. It's an illusion, because none of the text is filling up all the available space. You've got to change the list items width (which is hardcoded) in global.css.

 

Also, be sure your 6th item has the last_row_item or such class, so that you can target it in the css and remove the right border

 

Cheers!

[nufaha]

ok, can u please show me where i can change the list item width in global.css ???

 

and for the 6th item, where i can check in css to make sure the 6th item is the last item in the row?

 

please guide me, im still new with coding, tq

[NemoPS]

Hi, sorry, in ps 1.5 it's in homefeatured.css (same module folder)

 

You'll immediately see the li selectors (first line)

The default with is 126

 

To inspect the items, use chrome dev tools or another tool like firebug. Basically, in homefeatured.tpl, you said you already edited this file anyway

[nufaha]

hye again

 

ok, in homefeatured, where i need to adjust the width? bcos i dint find any... ><

this is the coding from featuredhome, pls take a look and guide me

 

--------------------------------------------------------------------------------------------------------------

 

 

<!-- MODULE Home Featured Products -->

<div id="featured-products_block_center" class="block products_block clearfix">

<p class="title_block">{l s='Featured products' mod='homefeatured'}</p>

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=250}

{assign var='nbItemsPerLine' value=6}

{assign var='nbLi' value=$products|@count}

{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}

<ul style="height:{$ulHeight}px;">

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

{math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

<p class="s_title_block"><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></p>

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>

<div>

<a class="lnk_more" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>

{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}

 

{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')}?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}

{else}

<div style="height:23px;"></div>

{/if}

</div>

</li>

{/foreach}

</ul>

</div>

{else}

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

{/if}

</div>

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

 

-----------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

ok, i inspect the item usind firebug, and it shown like this, thats mean 6 picture in a row right?

 

----------------------------------------------------------------------------------------------------------------------

 

<p class="title_block">Featured products</p>

 

<div class="block_content">

 

<ul style="height: 250px;">

 

<li class="ajax_block_product first_item last_line">

 

<li class="ajax_block_product item last_line">

 

<li class="ajax_block_product item last_line">

 

<li class="ajax_block_product item last_line">

 

<li class="ajax_block_product item last_line">

 

<li class="ajax_block_product last_item last_item_of_line last_line">

</ul>

-----------------------------------------------------------------------------

[nufaha]

bump....anyone pls help me

[nufaha]

Hi,

The space in your second screen is not more than in the first. It's an illusion, because none of the text is filling up all the available space. You've got to change the list items width (which is hardcoded) in global.css.

 

Also, be sure your 6th item has the last_row_item or such class, so that you can target it in the css and remove the right border

 

Cheers!

 

hye nemo, i change the width from 126px to 100px, and image size is 100px, but still there is space at the end of right side, i try change the width at firebug and shown 6 picture in a row, but when i change the width at homefeatured.css, it doesnt change anything, the 6th picture still at the second row......pls help me

[NemoPS]

Well, you've got to do some math and find the correct width of each element + each rightside margin. You've got to do like (overallWidth - (margins*5)) / 6 to get each element's width