Jump to content

Couleurs d'arriere plan pour chaque catégorie


Recommended Posts

Bonjour,

J'aimerai pouvoir transformer la rubrique catégorie, tel que le fichier que j'ai mis ici en pièce jointe.
Je voudrais faire en sorte que l'arrière plan et la couleur de chaque rubrique change, une fois sur deux...et je ne sais pas comment, ni où il faut paramétrer ça. Parce que je pense que changer le css de peut pas fonctionner, vu que ça touche toujours l'ensemble des catégories...

Pouvez vous m'aider?? Merci d'avance.

Share this post


Link to post
Share on other sites

Je pense sans me tromper que pour résoudre ton problème, il faut utilisé une image déjà faite pour avoir le fond comme tu le désire.
Tu dois créer ton image comme bon te semble et l'inclure à la place de celle utilisée de base mais je suis pas tout à fait sur que ça ne touche que les catégories.
Il te faut déjà modifier cet image:

block_bg.jpg

A voir et surtout à tester mais je le répette je ne suis pas sur à 100% et je ne peux pas tester.

Share this post


Link to post
Share on other sites

oui d'accord, j'avais compris que je devais changer l'image, mais en fait,ce que je cherche à faire, c'est que le texte soit blanc ou noir, une fois sur 2, et ça, je sais pas où ça se passe..

Merci de votre aide

Share this post


Link to post
Share on other sites
oui d'accord, j'avais compris que je devais changer l'image, mais en fait,ce que je cherche à faire, c'est que le texte soit blanc ou noir, une fois sur 2, et ça, je sais pas où ça se passe..

Merci de votre aide

Alors là je passe la main désolé je peux pas t'aider je ne sais pas faire ça on peux changer la couleur au passage de la souris facilement mais le changer une fois sur deux là je sèche.

Share this post


Link to post
Share on other sites

bonjour,

en css3 il y a un sélecteur qui permet cela (jamais testé)
par exemple :
li:nth-child(even) {}

ou

li:nth-child(odd) {}

problème : CSS3 n'es pas vraiment encore supporté (ou alors sur les navigateurs vraiment très récents)


sinon tu peux passer par jquery (mais attention, cet effet ne sera pas pris en compte chez ceux qui ont javascript désactivé)
par exemple en faisant un truc du style

${

$("li:odd").addClass("odd"); 

}



à adapter bien sur à ton menu.

Il ne reste plus alors qu'à définir ta classe odd dans global.css

.odd {

background-color : ...etc.

}


note : odd veut dire pair et even veut dire impair... ou l'inverse :)

Share this post


Link to post
Share on other sites

Merci pour ta réponse ;)

J'ai commencé à expérimenter ça, mais par contre, je ne sais pas où je dois mettre ça

${

$("li:odd").addClass("odd");

}

Parce qu'il y a plusieurs fichiers qui régissent les catégories et je ne voudrais pas faire de grosse bêtise...

Merci d'avance

Share this post


Link to post
Share on other sites

Bonjour,

c'est en forgeant que l'on devient forgeron, si tu gardes une sauvegarde des fichiers que tu modifies il n'y a aucune raison d'avoir peur de faire une bêtise :)
c'est le seul moyen que je connaisse pour avancer.

Pour faire les choses bien et commencer par le commencement, le site officiel de jQuery propose plein de lien vers des tutoriels en Français : http://docs.jquery.com/Tutorials#Tutoriaux_en_Fran.C3.A7ais

je te conseille celui là qui est simple clair et précis : http://www.jquery.info/spip.php?article21

Une petite heure sur ces sites te donnera une vision plus précise de ce que tu manipules, tu verras c'est vraiment bien fait et simple.

Pour ta question, comme il s'agit de code javascript, il s'insère comme tout code javascript entre les balises <head></head> de ton thème
soit depuis un fichier .js externe < script type="text/javascript" src="tonFichier.js">< /script>
soit entre des balises < script type="text/javascript"> ...ton code... < /script>

:exclaim: enlever les espaces au début des balises < script> et < /script>

note : même pour ça, Firebug (plugin pour firefox) est indispensable.

Share this post


Link to post
Share on other sites

Alors une solution graphique acceptable est de créer des images PNG 24 bits pour chaque catégorie. avec une règle de nommage stricte, par exemple :

1-bcat.png

"1" est le numéro (ID) de la catégorie dans la base MySql de Prestashop (affichée dans l'admin->catalogue)
Ensuite pour que cela fonctionne correctement, il faudra modifier le module :

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

de la manière suivante :

>


<!-- Debut affichage catégorie sous forme d'images PNG -->   



<!-- Fin de la bouckle d'affichage des catégories sous forme d'images PNG -->



   {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



Entre la balise il faudra donc supprimer l'ensemble du code HTML existant dans votre module et le remplacer par




Où sauvegarder les images crées pour les catégories ?
Tout simplement dans le dossier

prestashop/img/c/

:)

Share this post


Link to post
Share on other sites

pour modifier category-tree-branch.tpl tout en restant dans le cadre du thème,

il suffit, dans le dossier du thème de créer un dossier /module/
puis un dossier /blockcategories/

et y placer le fichier .tpl modifié qui sera surchargé à la place du fichier normal
(ici category-tree-branch.tpl)

le problème de cette méthode est que les noms des catégories sont en dur, il faut donc ouvrir photoshop et faire une image pour rajouter une simple catégorie.

Share this post


Link to post
Share on other sites

je ne suis pas un pro du PHP mais je me souviens qu'il était possible via une portion de code d'attibuer des class différentes aux balises .

ça donnait deux classes différentes - Pair ou impair, 1 sur 2 quoi.

Il suffirait de modifier category-tree-branch.php et tpl pour y inclure cette portion de code. mais le code je ne le connais pas, désolé :(

peut etre un début de voie à suivre...

V++

Atch

Share this post


Link to post
Share on other sites

Je pense que la solution de Rémi est la meilleure :

dans le ton dossier de ton thème,
tu crées un dossier module,
dans ce dossier tu fais un dossier blockcategories
dans ce dossier tu met une copie du fichier category-tree-branch.tpl

la modif à faire dans ce fichier est simple :
remplacer



par ça :




Ainsi, chaque ligne aura une classe paire ou impaire...

ensuite dans global.css tu peux leur donner le style que tu veux :

.ligneImpaire {
...
}
.lignePaire {
...
}

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