Jump to content
loick

Soucis de block

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.

Share this post


Link to post
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

Share this post


Link to post
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!!!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Merci pour ta reponse szed!

 

Seulement j'aimerais rentrer des codes couleurs particuliers... en top: #3366CC et en bottom: #FFFFFF

 

Si vous pouvez m'éclairer... je vous en remercie d'avance! ;)

Share this post


Link to post
Share on other sites

merci pour vos réponses, ma solution fût de créer moi même mon gradient avec gimp et de l'integrer! ;)

 

Bonne continuation à tous!

Share this post


Link to post
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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More