Des blocs tous différents

Date 02/05/2006 | Sujet : Documentations

Voici une astuce qui intéressera les créateurs de thèmes. Elle permet d'afficher chaque bloc de votre thème dans un format différent sans pour autant compliquer le code (x)html en rajoutant des tests sur les titres des blocs.

L'astuce consiste à remplacer l'utilisation de classes dans les boucles "foreach" par des IDs générés à la volée (pour rappel une classe peut-être utilisée plusieurs fois dans un même document, mais pas un ID qui doit rester unique).
Une boucle classique (simplifiée) :

<{foreach item=block from=$xoops_lblocks}> 
    <
div class="BlocGauche"
    <{
$block.title}> 
    <{
$block.content}>
    </
div
<{/foreach}>


Pour remplacer la classe par un ID il faudra que tous les blocs affichés par la boucle utilisent un ID différent.
Pour cela il suffit d'utiliser la variable d'itération générée par le foreach.
(variable d'itération = compteur de boucles)

Cette variable est identifiée comme ceci :
{$smarty.foreach.foreachname.iteration}
elle démarre à 1 et est incrémentée de 1 à chaque tour.

Remarque : il est nécessaire de nommer la boucle(foreachname) pour extraire cette valeur.

Sachant cela on peut maintenant utiliser des IDs :

Exemple :
<{foreach name=bouclegauche item=block from=$xoops_lblocks}> 
    <
div id="BlocGauche<{$smarty.foreach.bouclegauche.iteration}>"
    <{
$block.title}> 
    <{
$block.content}>
    </
div
<{/foreach}>


Chaque ID prendra alors les valeurs :
BlocGauche1
BlocGauche2
BlocGauche3
etc....

Il ne reste plus qu'à personnaliser leur format dans le css.
Exemple :
#BlocGauche1 {background:white}
#BlocGauche2 {background:blue}
#BlocGauche3 {background:yellow}
etc...


Remarque :
Penser à prévoir assez d'IDs dans le css pour palier à toute éventualité, 5 à 6 IDs doivent normalement être largement suffisant mais rien n'empêche d'en prévoir une dizaine.




Cet article provient de Communauté Francophone des Utilisateurs de Xoops
https://www.frxoops.org

L'adresse de cet article est :
https://www.frxoops.org/modules/news/article.php?storyid=991