Les blocs configurables utilises dans certains modeles de mise en page de Niutopia constituent une avancee technologique a double tranchant : d'un cote, creer un nouveau modele est bien plus facile et rapide, et les utilisateurs de ce modele peuvent facilement creer de multiples mises en page en choisissant leurs blocs ; d'un autre cote, les blocs imposent un certain moule, et il plus difficile d'en sortir. Par exemple, tgtg desire changer l'invite d'ajout des breves : "Au lieu d'ecrire "Ajouter un oneliner: " je voudrais ecrire "ajouter un message eclair:" (en minuscules!)". C'est possible, mais il faut le faire directement en utilisant les objets de Niutopia, ouvrir le capot et aller un niveau en dessous des blocs. Explications et instructions detaillees ci-dessous. (attention, ca va etre technique)

Les blocs configurables permettent de modifier la mise en page sans editer le modele (egalement appele skin precedemment) de mise en page. C'est impeccable pour les personnes qui n'ont pas de connaissance de l'HTML et qui n'ont pas envie d'apprendre. Pour ceux et celles qui en veulent plus, ce n'est qu'une premiere etape. L'etape suivante, c'est d'avoir votre propre modele de mise en page personnalise. Voici comment faire, pas a pas.

Premier pas : faire une copie d'un modele de mise en page.

1. Choisissez le modele de mise en page que vous souhaitez personnaliser dans votre menu mise en page. 2. Cliquez avec le bouton droit sur le nom du modele, choisissez "Enregistrer sous" et remplacez le nom (display_index.pl avec MSIE) par monmodele.html ou ce que vous voulez (avec l'extension .html) 3. Revenez au menu mise en page, et cliquer sur "Parcourir" en bas, a droite de la ligne "Envoyer un modèle de mise en page (.html)". Selectionnez alors votre nouveau modele monmodele.html et validez. 4. Revenez encore une fois au menu mise en page, vous devriez voir votre nouveau modele. Pour verifier qu'il marche bien, vous pouvez cliquer sur "tester" : cela vous permet de voir a quoi ressemblerait votre joueb avec ce modele. Lorsque vous serez satisfait, vous pourrez ensuite selectionner ce modele comme le modele courant.

Deuxieme pas : etudier le modele puis tout changer :-)

1. Ouvrez monmodele.html dans un editeur de texte (par exemple Wordpad sous Windows). 2. Regardez a quoi ca ressemble. Essayez d'identifier les differentes parties etc.

Au debut, vous avez des lignes comme :

smartcolor flavor ff8000 Teinte (soutenue)
smartblock sb.left1 "Bloc de gauche 1" session all
smartblock sb.left2 "Bloc de gauche 2" search all
smartblock sb.left3 "Bloc de gauche 3" categories all
smartblock sb.left4 "Bloc de gauche 4" calendar all
smartblock sb.left5 "Bloc de gauche 5" unique_niutopia_summaries all
smartblock sb.left6 "Bloc de gauche 6" none all
smartblock sb.right1 "Bloc de droite 1" active_summaries index
smartblock sb.right2 "Bloc de droite 2" oneliners index
smartblock sb.right3 "Bloc de droite 3" none index
smartblock sb.right4 "Bloc de droite 4" none index
smartblock sb.right5 "Bloc de droite 5" none index
smartblock sb.right6 "Bloc de droite 6" none index
[..]

Ce sont des directives qui indique quelles sont les couleurs et blocs configurables du modele de mise en page. Vous pouvez laisser ca de cote pour l'instant. Mais si vous aviez un jour envie d'afficher plus de 6 blocs dans la colonne de gauche, comment feriez vous d'apres vous ? [EXERCICE 1]

[EXERCICE 1] ? Et oui, pourquoi pas. Apres, tout pour apprendre, rien de tel que la pratique. A chaque fois que je poserai une question, n'ecrivez pas la reponse en commentaire, mais si voulez savoir si vous avez raison, ecrivez moi (biz@joueb.com) ou encore mieux : essayez tout simplement !

Suivent quelques directives dont vous pouvez sans doute deviner le sens si vous connaissez l'anglais, sinon, c'est pas grave ce n'est pas utile pour l'instant.

Le reste du modele de mise en page ressemble a une page HTML normale, avec quelques elements (toutes ces balises object et attribute) en plus.

Les macros de definitions des blocs configurables :

<!-- smartblock definition --> <define_macro name="sb_start"> <br /> <div class="blocktitle"> </define_macro> <define_macro name="sb_end"> </div> </define_macro> [..]

Ces macros seront utilisees pour chaque bloc que vous avez choisi dans le menu de mise en page. La macro sb_start par exemple indique quel code HTML sera produit au debut de chaque bloc de type sb. "sb", c'est le nom qui apparait plus haut dans la declaration des blocs configurables "smartblock sb.left1 "Bloc de gauche 1" session all". Comment feriez vous pour afficher une image au dessus de chaque bloc d'apres vous ? [EXERCICE 2]

Passons sur les styles etc. et allons directement au code correspondant a la colonne de gauche :

<table width="100%" cellspacing="0" cellpadding="0"> <tr> <td id="left" valign="top"> <smartblock sb.left1> <smartblock sb.left2> <smartblock sb.left3> <smartblock sb.left4> <smartblock sb.left5> <smartblock sb.left6> </td> Et c'est tout ! Vous retrouvez les blocs que l'on a declare plus haut. Suivant ce que vous avez choisi comme blocs, ils seront remplaces par des discussions actives, une boite de session, une boite ailleurs, un calendrier etc. Comment feriez vous pour ajouter la possibilite de mettre un septieme bloc dans la colonne de gauche d'apres vous ? [SUITE DE L'EXERCICE 1]

Revenons a l'exemple de tgtg : elle veut des oneliners un peu different des oneliners standards. Voici ce qui se passe si tgtg a choisi d'utiliser le premier bloc dans la colonne de gauche pour afficher les oneliners :

La ligne <smartblock sb.left1> est remplacee par :

<object class=oneliners> <macro name="<NAME>_start"><arg name="type">oneliners</arg></macro> <macro name="<NAME>_title"><arg name="title"><TITLE></arg></macro> <macro name="<NAME>_list_start"></macro> <object class=oneliner count=<COUNT> position=last> <macro name="<NAME>_link_text"> <arg name="text1"><attribute author></arg> <arg name="url1"><attribute author_url></arg> <arg name="text2"><attribute text></arg> </macro> </object> <macro name="<NAME>_list_end"></macro> <br /> <macro name="<NAME>_anything"> <br> <arg name="anything"> <object class=cmd_add_oneliner> <attribute cmd> : <attribute form> </object> </arg> </macro> <macro name="<NAME>_end"></macro> </object> (remplacez <NAME> par "sb", <TITLE> par le titre que tgtg a choisi pour le bloc et <COUNT> par le nombre d'elements choisi pour le bloc).

C'est a ca que ressemblait la syntaxe des modeles de mise en page avant les blocs. Comme vous pouvez le voir, les blocs ont grandement simplifie la creation d'un modele : au lieu des codes equivalents pour chaque blocs, il suffit d'un simple <smartblock sb.left1>. Ca va nettement plus vite, et en plus, le contenu des blocs n'est plus fixe dans le modele de mise en page : chaque utilisateurs peut mettre les blocs qu'il veut ou il veut.

Mais comme tgtg veut des oneliners un peu differents, on va garder tous ces objets, ces attributs etc. et les mettre directement dans le modele de mise en page.

La commande "Ajouter un oneliner" est definie directement dans Niutopia, et c'est ce que produit la ligne <attribute cmd>. Pour mettre une commande personnalisee, il suffit donc d'enlever cette ligne et de taper directement notre nouvelle commande : "ajouter un message eclair". Dans le code ci-dessous, j'ai egalement change les variables NAME, TITLE et COUNT. Notez que pour changer le titre ou le nombre d'elements a l'avenir, vous serez donc oblige d'editer le modele de mise en page.

<object class=oneliners> <macro name="sb_start"><arg name="type">oneliners</arg></macro> <macro name="sb_title"><arg name="title">messages eclairs</arg></macro> <macro name="sb_list_start"></macro> <object class=oneliner count=10 position=last> <macro name="sb_link_text"> <arg name="text1"><attribute author></arg> <arg name="url1"><attribute author_url></arg> <arg name="text2"><attribute text></arg> </macro> </object> <macro name="sb_list_end"></macro> <br /> <macro name="sb_anything"> <br> <arg name="anything"> <object class=cmd_add_oneliner> ajouter un message eclair : <attribute form> </object> </arg> </macro> <macro name="sb_end"></macro> </object> Et voila ! Je n'ai plus qu'a mettre cela en dessous de tous les blocs (par exemple).

Je viens de mettre le resultat en ligne chez tgtg. Comme tgtg a encore les oneliners dans un des blocs, et que je viens de les ajouter aussi, les oneliners sont affiches deux fois. Les nouveaux sont en bas de la colonne de gauche. Et comme vous le voyez (pour l'instant, je suis sur que tgtg va changer plein de trucs bientot), on voit bien "ajouter un message eclair" a la place de "Ajouter un oneliner". :-)

C'etait pas si dur finalement ! ;-)

Pendant que j'y suis, tgtg me disait qu'elle n'aimait pas les majuscules devant les noms de jour. C'est tres facile a changer grace aux modificateurs d'attributs .lc, .uc et .ucfirst qui respectivement change n'importe quel attribut en minuscules, MAJUSCULES ou le Capitalise.

Exemple :

<attribute day_t.day.lc> Si vous regardez les oneliners du bas chez tgtg, j'ai mis les pseudos de tout le monde en MAJUSCULES et tous les oneliners en minuscules. (Note : c'est meme dans la doc).

Voila, j'espere que cet article aidera certains d'entre vous a experimenter avec les modeles de mise en page. Si vous trouvez ca interessant, j'essaierai d'en ecrire d'autres prochainement.

Experimentez bien !