17 replies to this topic

[nabot]

Bonjour à tous,

J'aimerais configurer le blocks de prestashop avec des couleurs et des images différentes:

Par défaut, le CSS ne détermine que deux sortes de blocks, les blocks en général et les blocks "Panier" et "Réductions" qui sont gerés par des CSS différents...

J'aimerais au moins avoir la possibilité de donner des couleurs et des images de fond différentes ( 4 possibilités par exemple)

Quelqu'un a-t-il déjà tripatouillé le CSS pour permettre cela? j'y ai passé quelques heures mais sans succès!

Merci pour votre aide

[SotEW]

Dans le CSS, tu trouvera des lignes ressemblant à ceci :

#left_column div.myaccount, #right_column div.myaccount {global.css (ligne 906)
background:#F6DCE8 url(../img/block_footer_myaccount.jpg) no-repeat scroll left bottom;
}

Dans cet exemple, il s'agit du bloc du compte de l'utilisateur, qui ici possède lorsqu'il se trouve dans la colonne de gauche ou de droite l'image block_footer_myaccount.jpg. cette image est collé à gauche, le plus en bas possible. Il est aussi précisé ici la couleur de fond.

Il manque encore deux choses : l'image d'entête, et l'image de fond. on les trouves ici :

div.myaccount h4 {global.css (ligne 907)
background:#971D58 url(../img/block_header_myaccount.jpg) no-repeat scroll left top;
}

Pour l'image d'entête.

et

div.myaccount .block_content {global.css (ligne 917)
background:#F6DCE8 url(../img/block_bg_myaccount.jpg) repeat-x scroll left bottom;
border-left:1px solid #F6DCE8;
border-right:1px solid #F6DCE8;
}

pour l'image de fond, et les bordure gauches et droite.


On remarque donc que pour chaque élément d'un block, ils sont identifiés par des

et c'est ce XXXX que tu vas devoir préciser dans les templates des modules que tu souhaites personnaliser.


Ainsi, par exemple. Si tu shouaites que le block des meilleurs ventes possède disons, la couleur de fond #FF0000, l'image de fond block_bg_bestsellers.jpg, l'image d'en-tête block_header_bestsellers.jpg et l'image du footer block_footer_bestsellers.jpg. Ces images, tu les as faites toi-même, et placé dans le dossier /img/, évidemment.

et bien, en ouvrant /modules/blockbestsellers/blockbestsellers.tpl, tu trouvera ceci :

<!-- MODULE Block best sellers -->

    
{l s='Top sellers' mod='blockbestsellers'}

    

    {if $best_sellers|@count > 0}
        

            

            {if $best_sellers|@count > 1}
{/if}
        

        

        {foreach from=$best_sellers item=product name=myLoop}
            
{$product.name}

            {if $product.description_short}
{$product.description_short|truncate:50}
{/if}
        {/foreach}
        

        
{l s='All best sellers' mod='blockbestsellers'}

    {else}
        
{l s='No best sellers at this time' mod='blockbestsellers'}

    {/if}
    


<!-- /MODULE Block best sellers -->

personnalise-le, par exemple en précisant à la 2ième ligne :

Ensuite, dans le CSS, duplique les lignes CSS que je t'ai signalée plus haut, en remplaçant myaccount par bestsellers_block et les couleurs & images par celles de ton choix

ceci donnera, pour mon exemple :

#left_column div.bestsellers_block, #right_column div.bestsellers_block {
background:#FF0000 url(../img/block_footer_bestsellers.jpg) no-repeat scroll left bottom;
}

div.bestsellers_block h4 {
background:#FF0000 url(../img/block_header_bestsellers.jpg) no-repeat scroll left top;
}

div.bestsellers_block .block_content {
background:#FF0000 url(../img/block_bg_bestsellers.jpg) repeat-x scroll left bottom;
border-left:1px solid #FF0000;
border-right:1px solid #FF0000;
}

Voila, j'espère que j'ai été assez clair et précis. J'ai fait ça en live, sans tester, mais en théorie ça devrait marcher.

Add content on your PrestaShop website (pictures, flash, html and SLIDESHOW) with AddBlocks V1.4
Documentation for AddBlocksV1.3b (french and english)
Demo website: http://demo.sotew.com/ - http://demo.sotew.com/back/

[nabot]

G.E.N.I.A.L !!!

Merci beaucoup, je m'y colle immédiatement et mettrai mon template à disposition!

a+

[FranWeb]

Très belle explication SotEW ;)

[SotEW]

Ouai, il parait que je ferrais un bon prof.

regarde son parcours scolaire

Il semblerais que je soit mal partit. Mais qui sais ? :)

[FranWeb]

Il ne m'était pas non plus prévu de devenir formateur agréé et consultant, et au final c'est aussi ce que je fais ;)

[Jean-Bruno]

Bonjour
Encore moi ! Quelqu'un pourrait m'expliquer pour changer les attribut des typos. (par exemple changer la ouleur du prix de mon bloc panier :red: ) La je seche, tout seul dans mon coin.

Merci d'avance

[fistou]

From 1222412867:

Bonjour
Encore moi ! Quelqu'un pourrait m'expliquer pour changer les attribut des typos. (par exemple changer la ouleur du prix de mon bloc panier :red: ) La je seche, tout seul dans mon coin.

Merci d'avance

Bonjour Jean-Bruno,

Utilise l'extension Firebug avec FF3 pour déterminer quoi changer dans ton css.
Par exemple pour changer la couleur du prix dans ton panier modifie la ligne 1277 dans ton fichier global.css

Salutations.

[Midano]

Merci sotEW, j'ai suivi à la ligne tes instructions et suit parvenu à modifier de manière importante le bloc meilleures ventes du site http://www.ahrt-cosmetics.fr/ :) .

Par contre malgré tous mes efforts, je n'arrive pas à modifier l'image de pied, qui reste désespérément grise alors que j'ai uploadé un petit fichier gif vert de 191x6 pixels ( http://www.ahrt-cosm...er_topvente.gif )

Voici le code :

/* Bloc Meilleures Ventes (Rajout) */

#left_column div.bestsellers_block, #right_column div.bestsellers_block {
background:#138e4f url(../img/footer_topvente.gif) no-repeat scroll left bottom;
}

/* Image d'entête */
div.bestsellers_block h4 {
background:#138e4f url(../img/topventes.jpg) no-repeat scroll left top; /* Image de fond avec l'étoile*/
color: white;
outline-color: #FFFFFF;
}

/* image de fond, et les bordures gauche et droite */
div.bestsellers_block .block_content {
background:#e1efe4 url(../img/footer_topvente.gif) no-repeat scroll left bottom;
border-left:1px solid #e1efe4;
border-right:1px solid #e1efe4;
}

Aurais-tu une idée sur la provenance du problème ?

[Midano]

Bonjour,

Personne n'a d'idées ? :)

[SotEW]

l'image qui est affichée est block_footer.gif

Tu dois donc avoir un problème au niveau du .tpl ou du css qui fait que ta désignation

#left_column div.bestsellers_block, #right_column div.bestsellers_block

ne convient pas.

Essaie de vérifier avec Firebug

[Midano]

Oui, j'ai installé Firebug - merci d'ailleurs à Fistou pour sa suggestion, ce logiciel est vraiment génial ! ;) - et suis arrivé aux mêmes conclusions que toi, mais je ne comprend pas d'où vient le problème, ni comment Firebug peut m'aider à aller plus loin ?

Ce qu'il m'indique, c'est que c'est le code commençant à la ligne 874 du fichier global.css qui est utilisé pour afficher le footer :

#left_column div.block, #right_column div.block
background:transparent url(../img/block_footer.gif) no-repeat scroll left bottom;
padding-bottom:6px;

Et que donc #left_column div.block, #right_column div.block est prioritaire sur #left_column div.bestsellers_block, #right_column div.bestsellers_block . Mais comment changer cette priorité ?

[SotEW]

Qu'il est prioritaire, ou que ton block des meilleurs ventes n'est pas désigné de la bonne façon ?

[Midano]

J'avoue ne pas le savoir. J'ai pourtant suivi tes instructions à la lettre. Si tu as une idée, je pense que cela me ferait gagner du temps si tu pouvais me la donner, sinon je vais faire une recherche par moi-même ;) . Merci encore pour ton topic.

[SotEW]

Bah, je ne suis pas un pro du css, je sais juste modifier ce qu'il faut pour adapter lorsque j'en ai un sous la main.

Le problème, c'est qu'il faudrait que je change trop de choses (notamment dans le .tpl) pour faire marcher ça, mais je peux te mettre sur la piste :


Pourquoi le div de ton block porte l'id de *best-sellers_block_right* alors qu'il est à gauche ??

[Midano]

Bonne question, merci à toi je vais investiguer de ce coté ! ;)

[Midano]

Bon, j'ai trouvé, c'était cette ligne de code à la ligne 876 :

background: transparent url('../img/block_footer.gif') no-repeat bottom left;

qui était prioritaire, pour une raison que j'ignore. Je l'ai mis en commentaire et tout est rentré dans l'ordre :) .

[SotEW]

Et bien tout s'arrange, félicitations !