View and Price in one line?

[Detelin Markov]

Hallo gays,

 

How i can combine "view" and "price" in my homefeatured module design in one line like the pictures?

 

I trying but dont work, help me.

 

First picture is that i want - how to combine it in one row?

 

and.... sorry for my Еnglish.

 

Regards!

Dodi Markov

Edited January 26, 2013 by dodimarkov (see edit history)

[PotionsFactory]

Could you post a link to you website? It might be a simple CSS fix rather than a TPL one, but we'd need to see your current theme to verify.

 

Cheers

[Detelin Markov]

http://bijutaniki.com

 

homefeatured.css

#featured-products_block_center li {
margin-right:10px;
padding:10px 0;
width:126px;
height:275px
}
#featured-products_block_center li.last_item_of_line  {margin-right:0;}
#featured-products_block_center h5 {
padding-top:5px;
height:30px;
font-size:12px;
color:#222
}
#featured-products_block_center .product_image {
display:block;
position:relative;
overflow:hidden
}
#featured-products_block_center .product_image span.new {
display: block;
position: absolute;
top: 15px;
right:0px;
padding: 1px 4px;
width: 30px;
font-size:10px;
color: #fff;
text-align: center;
text-transform: uppercase;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background-color: #FF6600;
border-color: #fff;
}
#featured-products_block_center .product_desc {height:60px;}
#featured-products_block_center .product_desc,
#featured-products_block_center .product_desc a {
color:#666
}
#featured-products_block_center .lnk_more {
display: block;
padding:6px 8px;
width: 118px;
hight: 20px;
font:bold 10px Helvetica,Arial;
color:#fff;
background-color: #BE0D51;
border-color: #fff;

}
#featured-products_block_center .price_container {
margin-top:10px;
padding:0;
}
#featured-products_block_center .price {
display: block;
padding:6px 8px;
width: 118px;
hight: 30px;
font: 14px Helvetica,Arial;
text-align: right;
color:#fff;
background-color: #6B3299;
border-color: #fff;
}
#featured-products_block_center li .ajax_add_to_cart_button {display:none;}
#featured-products_block_center li span.exclusive {display:none;}

 

and homefeatured.tpl

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!-- MODULE Home Featured Products -->
<div id="featured-products_block_center" class="block products_block clearfix">
<h4 class="title_block">{l s='Featured products' mod='homefeatured'}</h4>
{if isset($products) AND $products}
 <div class="block_content">
  {assign var='liHeight' value=250}
  {assign var='nbItemsPerLine' value=4}
  {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>
 <h5 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></h5>
 <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 -->

 

That is using in my theme now.

 

Thank you!

[PotionsFactory]

Like this screenshot? If so, you just need to add these CSS edits

 

#featured-products_block_center .lnk_more {
display: block;
padding: 6px 8px;
width: 52px;
font: bold 10px Helvetica,Arial;
color: #fff;
background-color: #BE0D51;
border-color: #fff;
float: left;
}
#featured-products_block_center .price {
display: block;
padding: 6px 8px;
width: 42px;
height: 12px;
font: 12px Helvetica,Arial;
text-align: right;
color: #fff;
background-color: #6B3299;
border-color: #fff;
float: left;
}

 

I tweaked the font size a bit, so you may need to play around with the styles to get the final result that you're looking for. But this should be a good starting point.

 

 

2

[Detelin Markov]

Thank you men! That i exactly want.

 

Cheers