Le laboLors du dernier SPIP Apéro brestois Hélène nous posait la question suivante :
Comment faire pour afficher une liste d’articles ou de brèves avec une couleur de fond différente pour chaque élément ?
Les styles
Afin de pouvoir contrôler l’apparence de notre liste d’élément on va d’abord définir dans notre feuille de style une palette de couleur à utiliser pour l’arrière plan.
.couleur0 { background: #899d25; }
.couleur1 { background: #800f25; }
.couleur2 { background: #c3ff68; }
.couleur3 { background: #1693a5; }
.couleur4 { background: #ad234b; }
.couleur5 { background: #fbb829; }
.couleur6 { background: #f4fce8; }
.couleur7 { background: #7f94b0; }
.couleur8 { background: #d2e4fc; }
.couleur9 { background: #e0b5cb; }
.couleur10 { background: #a662de; }
.couleur11 { background: #919999; }
.couleur12 { background: #afcca8; }
.couleur13 { background: #f5faac; }
.couleur14 { background: #7d6942; }
.couleur15 { background: #ffa833; }Le code du squelette
Ensuite on doit appliquer une de ces classes à chaque ligne de notre liste d’éléments de façon aléatoire. Pour y arriver on va utiliser la fonction rand(a, b) de PHP qui renvoie un nombre aléatoire compris entre a et b inclus. Pour pouvoir utiliser une fonction PHP dans notre squelette on se sert de la balise #EVAL de SPIP qui permet d’exécuter une expression PHP.
Code à coller dans le squelette :
<B_dede>
<ul class="liste-articles">
<BOUCLE_dede(ARTICLES){!par date}>
<li class="couleur#EVAL{rand(0,15)}">#INTRODUCTION</li>
</BOUCLE_dede>
</ul>
</B_dede>
Messages
22 juin 2008, 21:40, par Hélène
Bonjour Bruno,
Je suis contente d’avoir contribué (enfin que ma question y contribue) à la rédaction d’un nouvel article. Je voulais juste préciser pour les personnes intéressées, que la couleur de fond est choisie de manière aléatoire (cela va de soi) mais qu’en plus elle change à chaque rechargement de ladite page. Je ne sais pas s’il y a moyen d’empêcher cela ? En l’occurrence cela ne me dérange pas, d’autant que j’ai choisi finalement de faire une bordure de couleur différente...
Merci encore Bruno
4 juillet 2008, 15:45, par Manar
bah utiliser #COMPTEUR_BOUCLE au lieu de rand (si j’ai bien compris votre question) :
mais faudra commencer l’indice des classe par 1 :
couleur1
couleur2
...
couleur16
@+
Voir en ligne : i3lane:petites annonces classées