Depuis peu une nouvelle rubrique est apparue dans la zone d’administration, ayant pour nom “Apparence avancée”.

Comme il est indiqué, cette rubrique permet de modifier n’importe quelle partie de votre forum en quelques clics de souris.

Firefox

Tout d’abord, petite précision quant à l’obligation d’utiliser Firefox (ou tout autre navigateur basé sur le moteur “Gecko”, tel que Mozilla, Camino, Epiphany, ou encore Netscape (en version 6 et +) :

Nous avons fait le choix (du moins de façon temporaire) de développer cet outil pour ce moteur (Gecko) uniquement devant la complexité de faire des scripts lourds compatibles multi-navigateurs. Firefox étant “à la mode” et disposant de très nombreux outils de développement (et étant le chouchou de l’équipe), notre choix s’est porté sur ce dernier.

Une version pour Internet Explorer 6 sera peut-être développée ultérieurement.

Présentation de l’outil

Il vous suffit de vous rendre sur la page sus-présentée. Vous verrez alors un simili-navigateur à l’intérieur même de la zone d’administration. C’est dans ce simili-navigateur que vous choisirez les éléments à modifier et que verrez en temps réel les modifications,

Vous verrez juste au dessus deux lignes :

“Etat général” : Tant que l’état n’est pas à “prêt”, vous ne pouvez rien faire. A chaque changement de page, l’outil indiquera “Patientez quelques instants...”, indiquant qu’il travaille. En cas d’erreur (page chargée invalide par exemple), vous verrez “Erreur... choisissez une autre page”.

“Etat du pointeur” : Le pointeur est ce qui vous permet de choisir une zone à modifier. Quand il est “désactivé”, vous ne pourrez pas choisir une telle zone, mais par contre vous pourrez naviguer dans le simili-navigateur pour choisir sur quelle page vous souhaitez travailler.
En cochant la case, l’état du pointeur deviendra “activé”, et la, dans le simili-navigateur, le curseur se transformera en croix, vous permettant de travailler.

Quant au bouton “Enregistrer”, il vous permet d’enregistrer vos modifications de façon à les appliquer pour de bon à votre forum.

Fonctionnement

Une fois le pointeur activé, vous pouvez sélectionner n’importe quel élément du forum. L’élément en question se voit alors entouré d’un liseret rouge dans le simili-navigateur, vous permettant de voir ce sur quoi vous travaillez.

En plus de cela, une nouvelle zone apparaît, contenant deux parties : “Elément cliqué” et “Eléments parents”.

Chaque ligne des différents éléments contient un ou plusieurs noms, donnant plus ou moins de précision quant à l’élément en question.
Par exemple, si (avec le pointeur “activé”) vous cliquez sur “Profil”, sur la ligne “Elément cliqué” vous verrez apparaître trois noms :
- “Lien de la zone de navigation droite” : représente tout lien qui se trouve dans cette zone (“Profil”, mais aussi “Déconnecter”, “Recherche”, “Messagerie” et tous les autres)
- Lien “Profil” : représente ce lien uniquement
- Lien : représente tous liens dans la zone de l’élément parent, sans plus de précision.

Sur chaque ligne comportant plusieurs éléments (que ce soit élément cliqué/modifié ou élément parent), vous disposez d’une boîte de sélection vos permettant de choisir précisément sur quel élément devra porter la modification.

ATTENTION ! Vous pouvez voir, tant sur la ligne de l’élément cliqué/modifié et que sur la/les ligne(s) de(s) l’élément(s)-parent(s), à la fois une boîte de sélection et une liste dont les éléments sont séparés par un trait vertical (élément 1 | élément 2 | ...).
- Cliquer sur n’importe quel élément de la liste choisira ce groupe d’élément comme “élément cliqué”... qu’il soit cliqué depuis la liste des éléments cliqués ou depuis une liste de l’un des éléments-parents. Vous pouvez donc “rattraper” un mauvais choix de l’élément cliqué, soit qu’il n’est pas assez précis, ou trop précis.
- En revanche le choix dans la boîte de sélection (ce sont exactement les mêmes éléments que ceux de la liste qui la précède) choisit les éléments parents sans les faire passer en élément modifié.
- Passer le curseur au-dessus de n’importe quel élément d’une liste permettra d’afficher un liseret orange dans le simili-navigateur pour mieux vous faire voir à quoi correspond l’élément en-dessous du curseur de la souris.

C’est également important de bien choisir les éléments parents.

Mais vous vous demandez peut-être ce qu’on appelle “parents”. C’est simple. Chaque élément est inclus dans un autre. Pour bien voir cet effet d’inclusion, reprenons notre exemple précédent (clic sur “Profil”) et passez la souris sur les noms de chaque élément parent. Vous verrez dans le simili-navigateur le parent en question entouré d’un liseret orange, pour le mettre en évidence. Vous voyez bien ainsi que chaque élement est inclus dans un autre, généralement plus grand.

Voici un exemple (toujours avec “Profil”) vous montrant l’importance du choix des parents :

Si pour l’élément cliqué vous choisissez “Lien de la zone de navigation droite”, on a dit que par défaut, étaient concernés tous les liens tel que “Profil”, “Déconnecter”, “Recherche”....
Mais si vous regardez bien,dans les parents, on trouve “Ligne de liens | Ligne de liens concernant l’identité”.
On peut donc choisir de n’appliquer notre effet que sur les liens concernant l’identité (“Profil” et “Déconnecter”) et pas les autres, en choisissant “Ligne de liens concernant l’identité”.

Il est important d’être le plus précis possible dans l’arborescence d’éléments vers l’élément cliqué, c.a.d. qu’il faut indiquer le plus précisément possible quels sont ses parents, il sera retrouvé d’autant plus facilement sans qu’il y a ait de confusion possible avec un autre élément similaire mais avec des parents différents (ça pourrait arriver dans le futur au cours du développement des forums, même si on prend soin d’éviter ce genre de situation).

Maintenant que le principe des parents est bien compris, voyons comment effectivement modifier un élément.
Une fois un élément choisi, une zone apparait juste au dessus du simili-navigateur permettant de modifier les couleurs. Il vous suffit de cliquer sur le carré à droite de cette zone et de cliquer sur une couleur dans la popup qui s’ouvrira pour choisir une couleur. Ensuite cliquez sur “Appliquer” et... vous verrez le résultat de vos choix.
Pour annuler une telle modification, il suffit de cliquer sur “Supprimer”.
(note : pour les utilisateurs connaissant bien les CSS, vous pouvez cliquer sur “Mode avancé” et saisir vous-même votre css pour l’élément sélectionné).

N’oubliez pas de donner un nom cohérent à votre “hack” CSS car il sera ensuite listé une fois enregistré.

Voilà, vous savez comment modifier un élément. Si vous avez effectué plusieurs modifications mais sans enregistrer les changements et que vous souhaitez en annuler une, il vous suffit de cliquer sur l’élément en question, de refaire les mêmes choix, et, une fois que vous voyez les couleurs pré-remplies, de cliquer sur “Supprimer”.

Si vous avez déjà enregistré le changement, rien de plus simple: retrouvez la modification dans la liste prévue à cet effet et choisissez-la: tous les éléments de la modification seront choisis dans l’éditeur comme si vous les aviez choisis manuellement. Cliquez sur le bouton “Supprimer” en bas, puis enregistrer à nouveau: la modification a disparu.

Pour passer à une autre page, il vous suffit de “désactiver” le pointeur en cochant la case à droite de “Etat du pointeur” pour que les liens du simili-navigateurs redeviennent actifs.

Une fois vos modifications terminées, n’oubliez pas de les enregistrer en cliquant sur le bouton “Enregistrer”, sinon tout sera perdu une fois la fenêtre/l’onglet fermé.

Pour toutes vos questions sur cet outil, un topic est ouvert sur le forum démo : http://demo.les-forums.com/topic/2908/discussions-a-propos-la-zone-apparence-avancee.html

PS : vous n’avez pas Firefox ? N’hésitez pas à le télécharger et l’installer, il ne pourrit pas votre Windows, est libre, gratuit, indépendant, et fournit beaucoup de fonctionnalités soit nativement soit par des extensions...