Faire varier la couleur de fond d’une liste d’éléments dans SPIP

dimanche 22 juin 2008

CSS / SPIP / PHP

Lors 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>

Voir le résultat sur la page de démonstration.

Vos commentaires

  • 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

    22 juin 2008, 21:40

  • Manar

    Je ne sais pas s’il y a moyen d’empêcher cela ?

    bah utiliser #COMPTEUR_BOUCLE au lieu de rand (si j’ai bien compris votre question) :

    <B_dede>
    <ul class="liste-articles">
    <BOUCLE_dede(ARTICLES){!par date}{pagination 16}>
           <li class="couleur#COMPTEUR_BOUCLE">#INTRODUCTION</li>
    </BOUCLE_dede>
    </ul>
    </B_dede>

    mais faudra commencer l’indice des classe par 1 :

    couleur1
    couleur2
    ...
    couleur16

    @+

    4 juillet 2008, 15:45

Répondre à cet article

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.