BBCODE AVANCÉS

Nous aborderons sur cette page le BBcode "avancé" disponible sur Forumactif.
Si le principe des balises ouvrantes et fermantes reste le même, c'est l'usage de ces codes qui le rend un peu particulier. Le BBcode pour forum les Forumactifs sont accessible en cliquant sur ce bouton :
Il est situé dans le carré vert de l'image suivante, ce qui dévoile quelques boutons en plus :

Le bouton situé tout à fait à droite (cercle rouge) fera basculer l'éditeur en mode "wysiwyg", et perdre l'utilisation du bbcode.

---

De gauche à droite, nous trouverons : 1 Mettre en indice - 2 Mettre en exposant - 3 et 4 Défilement horizontal ou vertical - 5 Obtenir un nombre aléatoire (max et min)
Avant de commencer sachez que les bbcodes (indices et exposant) sont assez spécifiques et, de fait utilisés surtout dans des forums et sites d'experts, quoique. Le défilement est un gadget qui peut rendre illisible un message. Quant à obtenir un nombre aléatoire ? Je n'en ai pas encore trouvé l'utilité, si ce n'est que pour jouer.

1 Mettre en indice Balises BBcode : Deux d'hydrogène et un d'oxygène = H[sub]2[/sub]O	Ce qui apparaît dans le message émit : Deux d'hydrogène et un d'oxygène = H2O
2 Mettre en exposant Balises BBcode : J'ai rencontré M[sup]me[/sup] Carvan	Ce qui apparaît dans le message émit : J'ai rencontré Mme Carvan
3 - 4 Défilement horizontal - vertical Balises BBcode : [scroll]Forum matkailu bbcode[/scroll] [updown]Forum matkailu bbcode[/updown]	Ce qui apparaît dans le message émit : Défilement horizontal Forum matkailu bbcode
5 Nombre aléatoire (mini/maxi) Balises BBcode : - en ajoutant une virgule entre des nombres. [rand]35,90[/rand]	Ce qui apparaît dans le message émit : Nombre aléatoire (35,90) : 45
6 Nombre aléatoire (maximum) Balises BBcode : - en ajoutant juste un nombre. [rand]60[/rand]	Ce qui apparaît dans le message émit : Nombre aléatoire (1,60) : 39

Il existe également d'autres effets de texte tous parfaitement inutile, rendant le mot ou le texte quasiment illisible à utiliser avec modération et avec humour.
Le texte inversè : [flipv]Forum matkailu bbcode[/flipv] et [fliph]Forum matkailu bbcode[/fliph]
Le texte flou : [blur]Forum matkailu bbcode[/blur]
L'effet de fondu : [fade]Forum matkailu bbcode[/fade]
Tous peuvent se combiner avec plus ou moins de bonheur, il faudra prendre en compte le contexte du message ainsi que les couleurs d'affichage. Mon avis; si c'est pour rendre son post illisible autant ne rien écrire, alors utilisez ces encodages en gardant à l'esprit qu'ils ne sont là uniquement pour mettre un peu d'humour.

---

Les "Emojis by twemoji" sont des smileys complémentaires issus des réseaux sociaux utilisables sur forumactif en tant qu'image. À noter qu'il existe (utilisable également) des signes unicode un peu similaire visuellement, voir sur ce lien: Table des caractères Unicode
- Ce sujet les signes unicode est traitè dans notre forum dans la rubrique : Poster et éditer vos messages -Inscrits uniquement-.
Les autres boutons, afficheront la date dans votre éditeur ainsi que l'heure pour le suivant.

---

UTILISER UN TABLEAU

Un tableau est formé par des colonnes, des lignes et des cellules.
Par "principe", sur notre forumactif, les colonnes ne sont pas prisent en compte dans le code. Même si certains éditeurs demandent le nombre de colonnes.
Ces dernières ne seront pas retenues, en fait, c'est le nombre de cellules : [td] par ligne [tr] qui sera pris en considération.
On se rend compte sur l'image (encodage html) :
Nous pourrions décortiquer le tableau ainsi et constater qu'un espace entre:[td] [/td] qui accueillera le texte cellule 1/2/3.

[table]ligne 1[tr][td]Cellule 1[/td][td]cellule 2[/td][td]cellule 3[/td][/tr]
  ligne 2[tr][td] [/td][td] [/td][td] [/td][/tr]
  ligne 3[tr][td] [/td][td] [/td][td] [/td][/tr]
ligne 4[tr][td] [/td][td] [/td][td] [/td][/tr][/table]

La balise [table] est ouverte, nous y avons une ligne également ouverte : [tr] où, nous pouvons placer nos cellules ouvertes : [td].
C'est dans ces cellules que nous placerons le texte : [td] je place mon texte et je referme la balise :[/td]
Une fois ce principe acquis, on peut commencer à créer des tableaux sans l'angoisse du gros carnage qui n'est pas toujours facile à démêler. Il est aussi plus prudent de commencer par de petits tableaux simples pour mieux comprendre les principes essentiels à un bon rendu. Il est impératif de refermer les balises [/td][/tr] dans le bon ordre et de clore votre tableau par [/table].
Voilà pour le principe du tableau en BBcode. Je tiens à faire remarquer que le BBcode n'est pas un code standardisé, et que chaque administrateur ou développeur d'un CMS peut créer son propre encodage.
Il est donc tout à fait possible que vous croisiez des encodages du genre : [table][row][col]texte[/col][/row][/table] donc attention aux copier/coller.

---

Voilà pour le principe, mais nous sommes encore loin d'obtenir un tableau un peu moins strict tout en restant lisible. Surtout que si vous cliquez sur le bouton tableau de l'éditeur (de forumactif) vous aurez : "comme moi" la déconvenue de voir apparaître ceci dans l'éditeur :
Un stupide - [table][tr][td][/td][/tr][/table] - Et, pas plus d'information !
Avec cette impression que l'on nous dit:«Si tu ne sais pas: fait pas !» C'est du service minimum .
Il va falloir mettre la main à la pâte , et avoir le "clic" précis. Dans un premier temps, sélectionnez les balises [td][/td] et copiez les côtes à côtes sans les chevaucher pour obtenir ceci; dans votre éditeur:
[table][tr][td][/td][td][/td][td][/td][/tr][/table] - Nous venons de créer une ligne de trois cellules. Il faut maintenant augmenter le nombre de lignes selon ses besoins, il faut donc copier la ligne du tableau soit: [tr][td][/td][td][/td][td][/td][/tr] et la coller avec précision avant la balise fermante [/table] pour enfin avoir un petit tableau de 3 colonnes sur trois lignes :
  [table][tr][td][/td][td][/td][td][/td][/tr][tr][td][/td][td][/td][td][/td][/tr][tr][td][/td][td][/td][td][/td][/tr][/table]
On fait une pose et un café ! Car ce n'est pas fini, bien au contraire, nous n'avons là que l'ossature du tableau qui franchement ne ressemble à rien sur la page puisque invisible !
L'astuce (pour forumactif) consiste à cliquer sur le bouton [Visualiser] de l'éditeur, et là miracle ! Le code s'est modifié en un "truc" un peu plus parlant.
Et qui va largement faciliter si ce n'est le travail, au moins la clarté pour remplir nos cellules.

- On voit clairement que la prévisualisation ne nous apprend pas grand chose je dirais même : rien ! - Par contre dans l’éditeur en lui-même la situation commence à s'éclaircir, enfin si je peux dire. Puisque les lignes sont maintenant clairement séparées et permettent de mieux visualiser nos cellules [td][/td] qui vont nous permettre d'y placer du texte ou des images, tout en respectant les règles du bbcode. Choisissez la deuxième ligne : [tr style=][td][/td] et placez votre curseur entre la balise [td] et celle [/td] puis tapez votre texte afin d'obtenir ceci : [td] "je dépose mon texte" [/td] Cliquez sur : [Prévisualiser] afin de contrôler votre travail, pensez à le vérifier régulièrement selon la complexité, car une simple erreur peut générer un travail énorme . Votre -première cellule- remplit, ciblez la cellule suivante de la même ligne, et répétez le texte ou l'image qui constituera cette cellule. Vous pouvez utiliser les bbcodes de mise en forme du texte (gras/italique comme les couleurs) sans compromettre le tableau, à condition de respecter la syntaxe. Maintenant, votre travail consiste à remplir une à une les cellules de chaque ligne tout en prenant soin de ne pas "déborder" dans une balise. Il vous faudra un peu de méthode si les textes sont un peu complexes ou longs. Pensez à vérifier le résultat autant que possible, cela fait parfois gagner beaucoup de temps ! Ce sera, si c'est une première fois, un long moment de solitude ! (.....//.....) Nous arrêterons là, la mise en place du texte et du tableau basique. Il est facile de comprendre que cela demande un peu de réflexion et beaucoup de temps,et, c'est assez amusant (si l'on est patient) quand le principe commence à se faire comprendre . Nous avons parlez du remplissage des cellules et la mise en place du tableau. En fait nous pourrions nous en tenir à ce résultat , qui est tout à fait acceptable. Mais nous sommes dans la catégorie de BBcode avancées ! Nous n'en resterons donc pas là.

Voici le résultat de notre tableau, ce n'est ni très clair et encore moins esthétique:

contenu 1	contenu 2	contenu 3
contenu 4	contenu 5	contenu 6
contenu 7	contenu 8	contenu 9

Alors, nous allons retravailler tout çà !

LA MISE en FORME DU TABLEAU

Mais oui, mais c'est bien sur !! C'était trops facile ...Vous n'avez pas été sans remarquer que tout est comme coincé dans les cellules, et que cela manque nettement de clarté, voir de couleurs selon le but du tableau.
Vous souhaiteriez un tableau aéré avec un titre (par exemple) qui indiquerait le sens de ce tableau du genre; comme ceci :

Le titre de mon tableau
contenu 1	contenu 2	contenu 3
contenu 4	contenu 5	contenu 6
contenu 7	contenu 8	contenu 9
contenu 10	contenu 11	contenu 12

C'est tout à fait possible avec ce BBcode.
Il vous suffit de copier coller ces lignes qui suivent :

---

[table border="1px" cellpadding="0" cellspacing="0" width="50%"]
[tr style="background: #00cc63"][td colspan="3"][center][b]Le titre de mon tableau[/b][/center]
[/td]
[/tr]
[tr style=][td]Ligne 1 - contenu 1[/td]
[td]contenu 2[/td]
[td]contenu 3[/td]
[/tr]
[tr style=][td]Ligne 2 - contenu 4[/td]
[td]contenu 5[/td]
[td]contenu 6[/td]
[/tr]
[tr style=][td]Ligne 3 - contenu 7[/td]
[td]contenu 8[/td]
[td]contenu 9[/td]
[/tr]
[tr style=][td]Ligne 4 - contenu 10[/td]
[td]contenu 11[/td]
[td]contenu 12[/td]
[/tr]
[/table]

---

Et de les placer dans votre éditeur;
Éventuellement vous pouvez supprimer ou ajouter des lignes comprises dans le [tr style=] et [/tr]
De la même façon modifier les colonnes en supprimant les derniers [td]contenu "X"[/td]
Le colspan="3" sera dans ce cas modifié selon le nombre de colonnes.
La couleur du fond [tr style="background: #00cc63"] #00cc63 étant la couleur verte de l'exemple.
Il est également possible de personnaliser le cadre du tableau : [table style="border:5px solid #0000ff ;] ce qui créera un entourage épais de 5 pixels.
Il existe quelques variantes à -solid- qui vont également modifier cette bordure en le remplaçant par groove ou double ou tout autre choix:

None	Pas de bordure.
Solid	Trait simple.
Double	Trait double.
Dotted	Trait pointillé.
Dashed	Tirets.
Groove	Rainure.
Ridge	Bourrelet.
Inset	En creux.
Outset	En relief.
Hidden	Caché. Le résultat visuel est le même que pour None mais la gestion des espaces est différente.
Inherit	Mêmes valeurs que celles de l'élément parent.

Dans un forum (et en BBcode) ne chercher pas à faire de gros et longs tableaux,3/4 colonnes et quelques lignes suffisent si vous désirez des tableaux plus élaboré passez directement en html, vous aurrez nettement plus de possibilité d'ailleur forumactif à créé sont propre générateur html :Voir ICI
Toutefois ne soyez pas trops éxigeant un encodage trés élaboré peut facilement tourner au casse téte et vous faire perdre patience.