[Résolu] Comment insérer un fond différent pour chaque catégorie?

alexmaislautre · August 26, 2009

Bonjour à tous!

Je tente d'insérer un fond différent pour chaque catégorie. J'ai tenté avec firebug de modifier le css mais je suis bloqué. Voilà ce qu'il se passe: j'ai 4 catégories les unes en dessous des autres, dans la colonne de gauche. Je souhaite que le fond de chaque catégorie ait une couleur différente. Problème: si je modifie la ligne background dans mon css, la modification s'applique à toutes les catégories. Voici l'extrait du css que j'ai essayé de modifier:

div#categories_block_left ul.tree li {
   border:none;
   padding-left:50px;
   padding-top: 20px;
   padding-bottom: 17px;
   background: url('../img/cat-bg.jpg') no-repeat top left;
   margin-left:-10px;
   font-weight:bold;
   font-size:13px;
   line-height:13px;
   margin-top:2px;
}

Quelqu'un a une idée pour assigner une image en fond, différente pour chaque catégorie?

bruno76 · August 27, 2009

Hello,

Pourquoi ne pas utiliser des boutons sous forme d'image réalisée sous Photoshop par exemple ? Pour ce faire il faut modifier le code de

../modules/blockcategories/category-tree-branch.tpl

de la manière suivante :

>




   {if $node.children|@count > 0}
</pre>
<ul>
       {foreach from=$node.children item=child name=categoryTreeBranch}
           {if $smarty.foreach.categoryTreeBranch.last}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'}
           {else}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'}
           {/if}
       {/foreach}
</ul>
<br>   {/if

Dans ce cas il faudra nommer les images de catégorie de la manière suivante :

id_categorie-bcat.png ou bien id_categorie-bcat.jpg (1-bcat.jpg,5--bcat.jpg etc.)
et stocker les images dans le répertoire Prestashop suivant :
.../img/c

Voir mon utilisation sur ce site que je finalise :
http://www.dapabox.com/

Sinon tu crées des boutons graphiques dynamiquement via PHP et GD

Pour verifier si GD est activé sur ton serveur, execute le code PHP suivant :

  1. <?php
  2. var_dump(gd_info());  
  3. ?> 
 /* En retour la fonction te renvoie un tablo du type */
array(9) { ["GD Version"]=>  string(24) "bundled (2.0 compatible)" ["FreeType Support"]=>  bool(false) ["T1Lib Support"]=>  bool(false) ["GIF Read Support"]=>  bool(true) ["GIF Create Support"]=>  bool(false) ["JPG Support"]=>  bool(false) ["PNG Support"]=>  bool(true) ["WBMP Support"]=>  bool(true) ["XBM Support"]=>  bool(false) }

Voir cet exemple, où j'affiche une image bouton avec texte dynamique :
http://www.dapabox.com/shop/dapa/dyn_img.php?titre=Essai
Le code source de la page dyn_img.php :

<?php
/* Example for : alexmaislautre Forum Prestashop */
/* version 0.a1 Date : 27 Aug 2009 */
/* Publisher : B.BARON */
/* For : http://www.dapabox.com/ */

// Nouvelle image 100*30
$im = imagecreate(100, 30);

// Fond  rouge texte blanc
$bg = imagecolorallocate($im, 255, 0, 0);
$textcolor = imagecolorallocate($im, 255, 255, 255);

// Ajout de la phrase en haut à gauche
imagestring($im, 5, 0, 0, $_GET['titre'], $textcolor);

// Affichage de l'image
header('Content-type: image/png');

imagepng($im);
imagedestroy($im);
?>

L'appel dans une page HTML, PHP ou TPL se fera de la manière suivante :

------ Ajout exemple utisation GD avec Polices True Type (TTF) ---------
Pour ce faire il doit exister un répertoire fonts avec les fichiers polices nécessaires
ex :../fonts/webdings.ttf
dans mon exemple j'ai sur le serveur :

prestashop/fonts/Dapa_Carton.ttf
prestashop/fonts/DAPAStamp1.ttf
prestashop/fonts/DAPAStamp2.ttf

URL de test :

http://www.dapabox.com/shop/dapa/dyn2.php?nomcategorie=Boite a crayons

où nomcategorie est le texte à afficher.

enfin le code exemple :

<?php
/* Example for : alexmaislautre Forum Prestashop */
/* version 0.b1 Date : 27 Aug 2009 */
/* use PHP + GD + TTF Fonts Files*/
/* Title : Affichage d'un texte avec caractère True Type personnalisé */
/* Publisher : B.BARON */
/* For : http://www.dapabox.com/ */

// Définition du content-type
header('Content-type: image/png');

// Création de l'image
$largeurpixel = 520;
$hauteurpixel = 80; 
$im = imagecreatetruecolor($largeurpixel, $hauteurpixel);

if ($im){

// Création de quelques couleurs
$white = imagecolorallocate($im, 255, 255, 255);
$red = imagecolorallocate($im, 255, 0, 0);
$black = imagecolorallocate($im, 0, 0, 0);

imagefilledrectangle($im, 0, 0, $largeurpixel-1, $hauteurpixel-1, $white);

// Le texte à dessiner
$text = $_GET['nomcategorie'];

// Remplacez le chemin par ton propre chemin de police
$font = 'fonts/Dapa_Carton.ttf';
$fontsize = 64;
$decofont ='fonts/DAPAStamp1.ttf';
$decofontsize = 72;

// Ajout du texte
$lefttextposition = 30;
$bottomtextposition = 70;
$leftdecoposition = 400;
$bottomdecoposition = 70;
imagettftext($im, $fontsize, 0, $lefttextposition, $bottomtextposition, $black, $font, $text);
imagettftext($im, $decofontsize, 0, $leftdecoposition, $bottomdecoposition, $red, $decofont, '*');
// Utiliser imagepng() donnera un texte plus claire,
// comparé à l'utilisation de la fonction imagejpeg()*/
imagepng($im);
imagedestroy($im);}
else
{echo 'erreur';}

?>

Intégration HTML, PHP, TPL :

Voir une utilisation dans ce site que je développe acctuellement :
http://www.dapabox.com/shop/dapa/product.php?id_product=16
http://www.dapabox.com/shop/dapa/product.php?id_product=25
etc.
L'affichage des titres "GD" est aussi présent sur les listes catégories et pages d'accueil
Bruno

Gregory Roussac · August 27, 2009

Hello,

Et en affectant un id ou une classe par catégorie en testant l'index du {foreach} puis en le stylisant en css ?

div#categories_block_left ul.tree li#c1 {
   border:none;
   padding-left:50px;
   padding-top: 20px;
   padding-bottom: 17px;
   background: red url('../img/cat-bg.jpg') no-repeat top left;
   margin-left:-10px;
   font-weight:bold;
   font-size:13px;
   line-height:13px;
   margin-top:2px;
}
div#categories_block_left ul.tree li#c2 {
   background-color: blue;
}

alexmaislautre · August 27, 2009

Hello à tous les deux et merci pour votre aide!

Alors dans l'ordre:

@bruno76:

j'ai créé 4 boutons différents sous photoshop, puis j'ai modifié le code de ../modules/blockcategories/category-tree-branch.tpl . J'ai copié collé le code que tu as donné, en enregistrant mes 4 images sous la forme 1-bcat.jpg, 2-bcat.jpg...
J'ai enregistré le tout mais absolument rien n'a changé pour mes catégories :-( Faut il que je modifie encore quelque chose dans le code category-tree-branch.tpl?

@Gregory Roussac:

dans mon global css, j'ai remplacé le code par ce que tu as expliqué, ce qui donne:

div#categories_block_left ul.tree li#c1 {
   border:none;
   padding-left:50px;
   padding-top: 20px;
   padding-bottom: 17px;
   background: red url('../img/cat1-bg.jpg') no-repeat top left;
   margin-left:-10px;
   font-weight:bold;
   font-size:13px;
   line-height:13px;
   margin-top:2px;
}
div#categories_block_left ul.tree li#c2 {
   border:none;
   padding-left:50px;
   padding-top: 20px;
   padding-bottom: 17px;
   background: red url('../img/cat2-bg.jpg') no-repeat top left;
   margin-left:-10px;
   font-weight:bold;
   font-size:13px;
   line-height:13px;
   margin-top:2px;
}

Seulement, plus d'image n'apparait... (voir fichier joint)

Je continue de chercher :-)

bruno76 · August 27, 2009

L'objet n'était pas de modifier le css mais le fichier:
/modules/blockcategories/blockcategories.tpl
dans ton dossier prestashop
Si tu as autres soucis je te passe mon tel en PM

<!-- Block categories module -->

{l s='Categories' mod='blockcategories'}


       /***** partie à mettre en commentaire HTML ou à supprimer ******/
       <!-- 
       {foreach from=$blockCategTree.children item=child name=blockCategTree}
           {if $smarty.foreach.blockCategTree.last}
                       {include file=$branche_tpl_path node=$child last='true'}
           {else}
                       {include file=$branche_tpl_path node=$child}
           {/if}
       {/foreach}

-->

       /***** fin de la partie à mettre en commentaire HTML ou à supprimer ******/




/****** debut de mes boutons catégories à afficher **********/
// on commence par le lien vers la catégorie concernée

//ensuite on affiche l'image souhaitée
    
// et on répète pour chaque catégorie comme cela on se passe du css    
// attention avec ce système ton image doit comporter le nom de la catégorie ad hoc dans le dessin de ce bouton    
       etc..


    

<!-- /Block categories module -->

Je sais cette méthode n'est pas très élégante, mais on ne peuit pas demander à tout le monde d'être un pro de PHP ou de Smarty, sachant très bien que ce n'est pas cette méthode que j'utiliserais.
BRUNO

alexmaislautre · August 27, 2009

Génial!!!!! Merci Bruno, ça fonctionne parfaitement :-)

Pour ceux qui sont intéressés, récapitulatif du code dans blockcategories.tpl qui permet d'afficher 4 catégories avec un fond différent pour chacune (voir exemple en pièce jointe):

<!-- Block categories module -->

{l s='Categories' mod='blockcategories'}





    








        





    

<!-- /Block categories module -->

Merci encore!!! :-)

Gregory Roussac · August 27, 2009

Hello,

Je vais paraitre rabat joie mais ce n'est plus dynamique et Smarty a été fait pour ne plus avoir à coder sur des lignes et des lignes pour ce genre de modif...

alexmaislautre · August 27, 2009

1 - Pas rabat joie du tout :-)

2 - J'ai essayé de faire ce que tu expliquais. J'ai créé 4

div#categories_block_left ul.tree li#

différents, mais ça n'a pas fonctionné. J'ai mis une capture de ce qu'il se passait dans le post #3...

Gregory Roussac · August 27, 2009

Tu avais des identifiants de 1 à 4 sur tes li dans le tpl ?

[EDIT]

Bref c'est pas grave si tu as le résultat escompté. J'aime bien Smarty c'est tout =)

alexmaislautre · August 27, 2009

Mais j'aime bien comprendre aussi. Dans blockcategories.tpl je n'avais pas mis d'identifiants. Donc pour que ça fonctionne, il aurait fallu que ma ligne ressemble à ça?

></pre>
<ul>

       {foreach from=$blockCategTree.children item=child name=blockCategTree}
           {if $smarty.foreach.blockCategTree.last}
                       {include file=$branche_tpl_path node=$child last='true'}
           {else}
                       {include file=$branche_tpl_path node=$child}
           {/if}
       {/foreach}

Gregory Roussac · August 28, 2009

Bonjour,

Si j'ai bien compris moi je ferais :

Dans category-tree-branch.tpl

ce qui nous mets un id pour chaque li en fonction de son identifiant.

Dans la css

div#categories_block_left ul.tree li {
   border:none;
   padding-left:50px;
   padding-top: 20px;
   padding-bottom: 7px;
   font-weight:bold;
   font-size:13px;
   line-height:13px;
   margin-top:2px;
   height:40px;
   width: 180px
}
#c2 {
   background: transparent url('../img/cat2-bg.jpg') no-repeat top left;
}
#c3 {
   background: transparent url('../img/cat3-bg.jpg') no-repeat top left;
}
#c4 {
   background: transparent url('../img/cat4-bg.jpg') no-repeat top left;
}

etc en fonction de l'id de la catégorie. Je n'ai pas testé mais cela doit ressembler à quelque chose comme ça.

alexmaislautre · August 28, 2009

Merci beaucoup, je vais tester en local.

Gregory Roussac · August 28, 2009

Il semble manquer width et height sur le style des li.

minirj01 · August 30, 2009

Bonjour alexmaislautre,
Quelle méthode as-tu utilisée pour arriver au [résolu] ? Merci d'avance !

alexmaislautre · September 1, 2009

Hello,

j'ai utilisé la méthode de Bruno. J'ai choisi celle ci car j'étais vraiment très pressé. Au prochain coup, j'utilise celle préconisée par Grégory, qui me semble être la manière la plus cohérente avec Prestashop.

bruno76 · September 2, 2009

Hello,

j'ai utilisé la méthode de Bruno. J'ai choisi celle ci car j'étais vraiment très pressé. Au prochain coup, j'utilise celle préconisée par Grégory, qui me semble être la manière la plus cohérente avec Prestashop.

Pense aussi à l'utilisation de la librairie GD pour la prochaine fois ; simple à mettre en oeuvre dans les templates Smarty...

Laurent_hunter · October 4, 2009

bonjour,

Gregory Roussac, ou place tu exactement ton code dans le fichier tpl en question stp ?
, j'essaye donc de faire la même chose mais je ne souhaite pas que mes image diffèrent prenne les sous categorie en même temps.

Exemple pour illustrés mes propos

cat A image
cat sous A1 (je veux pas l'image ici)
cat sous A2 (je veux pas l'image ici)

Cat B image differente
Cat sous B1 (je veux pas l'image ici)
Cat sous B2 (je veux pas l'image ici)

Cordialement,
Laurent

Laurent_hunter · October 4, 2009

Bonjour,

Si j’ai bien compris moi je ferais :

Dans category-tree-branch.tpl

ce qui nous mets un id pour chaque li en fonction de son identifiant.

Dans la css

div#categories_block_left ul.tree li {
border:none;
padding-left:50px;
padding-top: 20px;
padding-bottom: 17px;
margin-left:-10px;
font-weight:bold;
font-size:13px;
line-height:13px;
margin-top:2px;
}
#c2 {
background: transparent url('../img/cat2-bg.jpg') no-repeat top left;
}
#c3 {
background: transparent url('../img/cat3-bg.jpg') no-repeat top left;
}
#c4 {
background: transparent url('../img/cat4-bg.jpg') no-repeat top left;
}

etc en fonction de l’id de la catégorie. Je n’ai pas testé mais cela doit ressembler à quelque chose comme ça.
Signature

Gregory Roussac • PrestaShop

J'ai fait ta méthode, mais en enleant donc background du div#categories_block_left ul.tree li {
pour laissé apparaitre les autres background, il y a des pointillé qui apparaisse

Gregory Roussac · October 5, 2009

Hello,

Ce n'est pas un forum de support sur css (plus de PM merci).

Mettre un identifiant permet juste d'identifier la catégorie pour la css. Après vous pouvez mettre une image en background, une couleur en background, peu importe, chaque catégorie peut être stylisée par son identifiant. Pas besoin de gd ou faire des noeuds. C'est du css....

Pour les pointillés je suppose qu'il faut donner à la li une hauteur et une largeur.

Bye

Laurent_hunter · October 5, 2009

merci, pour ta réponse, j'y suis arrivé..

kouliyik · October 14, 2009

bonjour à tous,

j'essaie de faire un peu la meme chose que Laurent mais je voudrais changer juste la couleur du texte de chaque catégorie.
Pour cela j'ai fait ca dans mon tpl :

et j'ai donc créé des id pour chaque titre dans mon css.

div#categories_block_left ul.tree li#c5 a {color:red; }

cela fonctionne tres bien la couleur de la catégorie change, par contre ca change aussi la couleur des sous catégories ce qui est normal je pense car dans mon tpl j'ai ca pour la liste des sous catégories :

></pre>
<ul>
       {foreach from=$node.children item=child name=categoryTreeBranch }
           {if $smarty.foreach.categoryTreeBranch.last}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'}
           {else}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'}
           {/if}
       {/foreach}

je pense que le probleme vient de from=$node.children ....il reprend les propriétés de la catégories.

si qqun a une idée je suis preneur :-)

merci a tous

Gregory Roussac · October 14, 2009

Hello,

Je dirais plutôt que tous les a des li sont concernées par la règle css, y compris les ul li a.

Donc il faut styliser ces derniers, mais IE6 rend le truc assez lourd car il ne gère mal les pseudo classes (par exemple 'li#c5 > a {color:red; }').

Un truc comme ça donc...

div#categories_block_left ul.tree li#c5 ul li a {color: #000000; }

kouliyik · October 14, 2009

merci beaucoup pour ta réponse ca fonctionne très bien, je mets mon code ca pourra servir a quelqu'un :

Ce code permet de changer les propriétés du block catégories (catégories et sous catégories) :

Le CSS

div#categories_block_left ul.tree li#c1  a {color: red; } 
div#categories_block_left ul.tree li#c1  a:hover {color: green} 
div#categories_block_left ul.tree li#c1 ul li a {color: yellow;}
div#categories_block_left ul.tree li#c1 ul li a.selected {color: blue;}

Le TPL

>

{$node.name|escape:htmlall:'UTF-8'}
   {if $node.children|@count > 0}
</pre>
<ul>
           {foreach from=$node.children item=child name=categoryTreeBranch }
           {if $smarty.foreach.categoryTreeBranch.last}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'}
           {else}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'}
           {/if}
       {/foreach}
</ul>
<br>   {/if}<br><br

Merci beaucoup pour votre aide

Marie · October 18, 2009

Bonjour,

Merci pour toutes ces instructions, très intéressantes, exactement ce que je cherchais à mettre en oeuvre.

Je tente d'adopter la méthode Grégory, j'aime bien m'amuser avec le css

Mais je rencontre un problème après la modification de blockcategories.tpl et de category-tree-branch.tpl : mes catégories sont maintenant triplées et entièrement développées dans le block left.

Je me permets de vous exposer ici ces deux fichiers.

BLOCKCATEGORIES.TPL

[removed][removed]

<!-- Block categories module -->

{l s='Les Produits' mod='blockcategories'}



       {foreach from=$blockCategTree.children item=child name=blockCategTree}
           {if $smarty.foreach.blockCategTree.last}
                       {include file=$branche_tpl_path node=$child last='true'}
           {else}
                       {include file=$branche_tpl_path node=$child}
           {/if}
       {/foreach}


       {foreach from=$blockCategTree.children item=child name=blockCategTree}
           {if $smarty.foreach.blockCategTree.last}
                       {include file=$branche_tpl_path node=$child last='true'}
           {else}
                       {include file=$branche_tpl_path node=$child}
           {/if}
       {/foreach}


       {foreach from=$blockCategTree.children item=child name=blockCategTree}
           {if $smarty.foreach.blockCategTree.last}
                       {include file=$branche_tpl_path node=$child last='true'}
           {else}
                       {include file=$branche_tpl_path node=$child}
           {/if}
       {/foreach}




[removed]
// <![CDATA[
   // we hide the tree only if JavaScript is activated
   $('div#categories_block_left ul.dhtml').hide();
// ]]>
[removed]
<!-- /Block categories module -->

CATEGORY-TREE-BRANCH.TPL

>  
{$node.name|escape:htmlall:'UTF-8'}
   {if $node.children|@count > 0}
</pre>
<ul>
           {foreach from=$node.children item=child name=categoryTreeBranch }
           {if $smarty.foreach.categoryTreeBranch.last}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'}
           {else}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'}
           {/if}
       {/foreach}
</ul>
<br>   {/if}<br

Je suppose que mon problème vient d'un de ces deux fichiers, est-ce que l'un d'entre vous pourrait m'aider à repérer l'erreur ?

Merci par avance,

Marie · October 18, 2009

Je me réponds

Après avoir remis le blockcategories.tpl d'origine mon menu vertical n'est plus "triplé", reste les sous-catégories qui sont encore développées.

Cette méthode est géniale, j'espère pouvoir l'appliquer à ma barre horizontale, merci encore à vous tous

Gregory Roussac · October 18, 2009

Hello Marie,

Il doit manquer un espace juste avant class="selected"

Cordialement

Marie · October 18, 2009

Merci Grégory,

Je crois qu'en fait c'était la configuration du block catégories dans le FO qui n'était pas correcte. Maintenant ça ne se développe plus tout... bref je sors du sujet là...

En tous cas ça y est c'est nickel, j'obtiens le résultat escompté.

Allez je m'attaque à la barre horizontale maintenant !

paquitojuan · May 21, 2010

Salut marie,

Si tu as réussi à mettre une couleur de police sur chaque catégorie pourrais tu mettre tes fichiers modifier stp ou m'expliquer comment tu as fait stp.

Merci à toi

pasko · August 28, 2010

Bonjour, j'espère na pas arriver comme un cheveux dans la soupe :red:

Je cherche à modifier les images des catégorie (colonne du centre) en gif animés ou flash.
Prestashop converti automatiquement les images au format jpg!

Si vous avez une idée?

fherrard · January 16, 2011

Bonjour
Connaissez vous la variable pour définir une CSS differente sur une page produit celon le fabriquant

Je sais le faire sur une page category comme on le dit ici
{if $page_name == 'category'} class="macat_{$currentCategoryId}"

mais sure page produit j’ai changé {$currentCategoryId} en {$currentmanucaturedId} mais ce marche pas

j’ai bien activé le bloc fabriquant pour récupéré l’id mais il ne la recupere pas

merci

SCAMPAI · July 5, 2011

Bonjour,

Allez faire un tour ici

J'ai mis un petit exemple.

SCAMPAI · July 5, 2011

LA BARRE DE RECHERCHE...LA BARRE DE RECHERCHE...LA BARRE DE RECHERCHE

RENDEZ-NOUS LA BARRE DE RECHERCHE !!

[Résolu] Comment insérer un fond différent pour chaque catégorie?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in