Jump to content

Soucis de block


loick

Recommended Posts

Bonjour,

 

je suis responsable de la nouvelle mise en page du site web d'un client qui souhaite passer sur la version 1.5.

 

Seulement je n'arrive pas a trouver comment modifier le block des produits phares sans modifier tout les éléments de la homepage....

J'aimerais que le block du titre prenne toute la largeur de la partie "produit phare"

 

Pourriez-vous m'éguiller?

 

voici les css que j'ai actuellement:

 

global.css:

 

/* BLOCK .block ******************************************************************************** */
.block {margin-bottom:20px}
#footer .block {margin-bottom:1px
}
    .block .title_block, .block h4 {
        padding:6px 11px;
        font-size:12px;
        /*couleur des titres block categorie et deja vue*/
        color:#000;
        /*text-shadow:0 1px 0 #000;*/
        text-transform:uppercase;
        /*background:#383838;*/
        background: transparent url('../img/block_header.png') no-repeat center top;
        /*font-weight: bold*/
    }
        .block .title_block a, .block h4 a {color:#fff}
    .block ul {list-style-type:none}
        .block li.last {    border:none}
            .block li a {
                display:block;
                color:#333

 

homefeatured.tpl:

 

 

<!-- 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=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|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" 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|escape:'html'}" 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|escape:'html'}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</a></div>
                    <div>
                        <a class="lnk_more" href="{$product.link|escape:'html'}" 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')|escape:'html'}?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 -->

 

Merci d'avance.

Link to comment
Share on other sites

bonjour,

 

Par défaut, ça n'est pas déjà le cas ? le titre ne fait pas 100% la largeur du module ?

 

Sinon vous pouvez toujours faire un truc du genre :

 

#featured-products_block_center .title_block { votre css }

 

Pour isoler le titre des produits phares...

 

V++

 

Atch

Link to comment
Share on other sites

oui j'ai cette ligne, mais le soucis c'est que le background du titre le prend pas tout la largeur...

C'est la mon soucis... désolé de m'être mal exprimé.

 

J'aimerai aussi mettre un degradé en fond sur mes produits pahres mais sans succès, si vous pouviez aussi m'aider sur ce point, je vous en serais grès!

 

Merci d'avance!!!

Link to comment
Share on other sites

Votre background est une image en no-repeat. Si elle n'est pas assez longue, normal qu'elle ne prenne pas toute la largeur.

Vous devez :

  • Soit modifié l'image pour qu'elle soit assez longue
  • Soit utilisé une image en repeat.

Pour les dégradé des blocs, cela peut se faire en CSS. Il existe des générateurs de dégradé en CSS (par exemple : http://www.colorzilla.com/gradient-editor/)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...