Affichage des résultats d’une boucle avec un dégradé de couleurs

Utilisation de la balise #COMPTEUR_BOUCLE pour obtenir l’affichage des résultats d’une boucle avec un dégradé de couleur pour le fond

On souhaite obtenir un affichage des résultats d’une boucle avec un dégradé de couleurs, comme sur la figure ci dessous.

Principe

Pour obtenir un fond d’une couleur particulière, il suffit de mettre dans la feuille de style une ligne contenant

background-color:RGB(50%,50%,50%)

Un boucle comme celle ci-dessous va afficher les résultats avec le meme fond pour chaque résultat.

<BOUCLE_art(ARTICLES) {0,9}>
<li style="background-color:RGB(50%,50%,50%)" >
	<a href="#URL_ARTICLE">[(#TITRE*|supprimer_numero)]</a>
</li>
</BOUCLE_art>

Si on pouvait faire varier le taux de Rouge, Vert(G), Bleu pour chaque ligne affichée, on obtiendrait le résulat souhaité. La balise #COMPTEUR_BOUCLE va nous permettre de le réaliser.

<BOUCLE_art(ARTICLES) {0,9}>
<li style="background-color:RGB([(#COMPTEUR_BOUCLE)]0%,[(#COMPTEUR_BOUCLE)]0%,[(#COMPTEUR_BOUCLE)]0%)" >
	<a href="#URL_ARTICLE">[(#TITRE*|supprimer_numero)]</a>
</li>
</BOUCLE_art>

Ici, l’affichage va varier de RGB(1%,1%,1%) à RGB(9%,9%,9%) c’est à dire avec une très faible variation du Noir au Noir un peu plus clair, pour avoir un dégradé plus signifiant, il faudrait varier de 10% à chaque boucle.Pour cela on peut écrire :

<BOUCLE_art(ARTICLES) {0,9}>
<li style="background-color:RGB(8[(#COMPTEUR_BOUCLE)]%,[(#COMPTEUR_BOUCLE)]0%,8[(#COMPTEUR_BOUCLE)]%)" >
	<a href="#URL_ARTICLE">[(#TITRE*|supprimer_numero)]</a>
</li>

-  Le premier terme 8[(#COMPTEUR_BOUCLE)]% varie de 81% à 89% en effet Spip va concaténer 8 avec #COMPTEUR_BOUCLE
-  Le deuxième terme [(#COMPTEUR_BOUCLE)]0% varie de 10% à 90% de 10% à chaque itération.
-  le troisième varie comme le premier

Vous pouvez voir le résultat sur cette page. N’hésiter pas à regarder le source de la page pour voir le codage des couleurs.

Extension

Vous pouvez aussi coder les couleurs à partir de la description hexadécimale #[(#COMPTEUR_BOUCLE)][(#COMPTEUR_BOUCLE)][(#COMPTEUR_BOUCLE)] pour faire varier de #111 à #999999, vous avez ainsi 99 niveaux de dégradé

Par extension, on peut faire varier ainsi tous les paramètres numériques de style, la couleur des caractères, la taille des caractères, ..., qu’ils soient en pixels, en pourcentage, en hexa ou autres em.

Limitations

Attention de ne pas utiliser les majuscules pour coder les couleurs il ne faut pas écrire #COMPTEUR_BOUCLEA mais #COMPTEUR_BOUCLEa en effet Spip considère que tous les termes en majuscules qui suivent un # désigne la balise.

On ne peut pas décompter avec la variable #COMPTEUR_BOUCLE, il est nécessaire de faire un peu de php.

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom