[Unique] Nouveaux BBCodes

Retrouvez les règles et les annonces importantes du forum.
Répondre
Avatar de l’utilisateur
Tulio Forel
Messages : 79
Inscription : 09 nov. 2015, 22:54
Contact :

[Unique] Nouveaux BBCodes

Message par Tulio Forel » 01 mai 2018, 14:58

La suppression temporaire de certaines balises de BBCode avait été annoncée lors de la migration. Souvenez-vous des tableaux qui avaient lâchement été abandonnés ou de la balise [.strike] ou [.s] qui n'avait même pas été mentionnée alors qu'un jour, elle a existé... C'est l'heure du grand retour.


La balise [.s] :
L'abréviation de strike donc, elle permet d'afficher du texte barré. Elle vous sera peut-être utile pour rayer une mention devenue obsolète qui garde un impact historique ou tout autre usage possiblement humoristique. Ou pas.



La balise [.block] :
Une petite balise qui va éviter à certains d'écraser leur touche espace plus que de raison. Elle permet d'éviter le comportement souvent indésirable des éléments flottants. Par exemple, si vous voulez placer une image à côté de votre texte, sauf que l'image en question est plus grande en hauteur que votre texte. Et quand vient le moment d'afficher le texte suivant, qui lui n'a aucun rapport avec votre image... c'est le drame !

Et de même, pour la démonstration, quand vous voulez faire flotter plusieurs petites images :

Sans [.block] :
Image

Ceci est une potion rouge.
Il y a une icône d'épée dessus.
Usage : Attaque.
Image

Ceci est une potion bleue.
Il y a une icône de bouclier dessus.
Usage : Défense.

Code : Tout sélectionner

[block]
[fleft][img]https://i62.servimg.com/u/f62/19/10/10/22/potion11.png[/img][/fleft]


Ceci est une potion rouge.
Il y a une icône d'épée dessus.
Usage : Attaque.
[fleft][img]https://i62.servimg.com/u/f62/19/10/10/22/potion10.png[/img][/fleft]


Ceci est une potion bleue.
Il y a une icône de bouclier dessus.
Usage : Défense.
[/block]

Avec [.block] :
Image

Ceci est une potion rouge.
Il y a une icône d'épée dessus.
Usage : Attaque.
Image

Ceci est une potion bleue.
Il y a une icône de bouclier dessus.
Usage : Défense.

Code : Tout sélectionner

[block][fleft][img]https://i62.servimg.com/u/f62/19/10/10/22/potion11.png[/img][/fleft]


Ceci est une potion rouge.
Il y a une icône d'épée dessus.
Usage : Attaque.[/block]
[block][fleft][img]https://i62.servimg.com/u/f62/19/10/10/22/potion10.png[/img][/fleft]


Ceci est une potion bleue.
Il y a une icône de bouclier dessus.
Usage : Défense.[/block]
Notes :
« Mais tu triches, il y a une balise [.block] dans la première partie de l'exemple ! » Oui, sinon la mise en forme de ce message serait absolument horrible. Au passage, la balise englobe les deux images alors que dans le deuxième exemple, elle n'en englobe qu'une à la fois. C'est là toute la différence qu'il faudra saisir lors de vos usages futurs. Oh et... Je sais, ces descriptions sont sublimes. Merci.



Les balises [.table], [.tr] et [.td] :
Elles permettent de créer un tableau. [.table] définit qu'il s'agit d'un tableau, [.tr] caractérise une ligne et [.td] une cellule. Ce qui a changé comparé à avant, c'est qu'à présent il est possible de définir la largeur des cellules et de fusionner des cellules entre elles, que ce soit d'une colonne sur l'autre ou d'une ligne sur l'autre. Pour ce faire, les attributs width, colspan et rowspan ont été ajoutés.

Quelques exemples avec un tableau de 3 colonnes et 3 lignes pour éclairer votre lanterne concernant les usages possibles.

Sans aucun attribut :
Colonne 1 - Cellule 1Colonne 2 - Cellule 1Colonne 3 - Cellule 1
Colonne 1 - Cellule 2Colonne 2 - Cellule 2Colonne 3 - Cellule 2
Colonne 1 - Cellule 3Colonne 2 - Cellule 3Colonne 3 - Cellule 3

Code : Tout sélectionner

[table]
[tr][td]Colonne 1 - Cellule 1[/td][td]Colonne 2 - Cellule 1[/td][td]Colonne 3 - Cellule 1[/td][/tr]
[tr][td]Colonne 1 - Cellule 2[/td][td]Colonne 2 - Cellule 2[/td][td]Colonne 3 - Cellule 2[/td][/tr]
[tr][td]Colonne 1 - Cellule 3[/td][td]Colonne 2 - Cellule 3[/td][td]Colonne 3 - Cellule 3[/td][/tr]
[/table]
Notes :
- Il est important que chaque ligne comporte le même nombre de cellules.
- Chaque colonne s'adapte à l'élément le plus large qu'elle contient.


Utilisation de l'attribut width :
Colonne 1 - Cellule 1Colonne 2 - Cellule 1Colonne 3 - Cellule 1
Colonne 1 - Cellule 2Colonne 2 - Cellule 2Colonne 3 - Cellule 2
Colonne 1 - Cellule 3Colonne 2 - Cellule 3Colonne 3 - Cellule 3

Code : Tout sélectionner

[table width=100%]
[tr][td width=150px]Colonne 1 - Cellule 1[/td][td]Colonne 2 - Cellule 1[/td][td]Colonne 3 - Cellule 1[/td][/tr]
[tr][td]Colonne 1 - Cellule 2[/td][td]Colonne 2 - Cellule 2[/td][td]Colonne 3 - Cellule 2[/td][/tr]
[tr][td]Colonne 1 - Cellule 3[/td][td]Colonne 2 - Cellule 3[/td][td]Colonne 3 - Cellule 3[/td][/tr]
[/table]
Notes :
- L'attribut width est applicable sur la balise [.table] et la balise [.td].
- Il se définit par un nombre de pixels (1px à 999px*) ou un pourcentage (1% à 100%*).
- Il ne peut être appliqué qu'une fois par colonne, inutile de le définir dans plusieurs cellules d'une même colonne.


Utilisation des attributs colspan et rowspan :
Colonne 1 - Cellule 1Colonne 3 - Cellule 1
Colonne 1 - Cellule 2Colonne 2 - Cellule 2Colonne 3 - Cellule 2
Colonne 1 - Cellule 3Colonne 2 - Cellule 3

Code : Tout sélectionner

[table]
[tr][td colspan=2]Colonne 1 - Cellule 1[/td][td]Colonne 3 - Cellule 1[/td][/tr]
[tr][td]Colonne 1 - Cellule 2[/td][td]Colonne 2 - Cellule 2[/td][td rowspan=2]Colonne 3 - Cellule 2[/td][/tr]
[tr][td]Colonne 1 - Cellule 3[/td][td]Colonne 2 - Cellule 3[/td][/tr]
[/table]
Notes :
- Le fait d'utiliser colspan=X veut dire que la cellule visée prend la place de X cellules en largeur. De ce fait, il faut supprimer X-1 cellules pour éviter de générer des colonnes indésirables. Dans l'exemple ci-dessus, la cellule « Colonne 2 - Cellule 1 » a donc été supprimée.
- Il en va de même pour rowspan=X, raison pour laquelle la cellule « Colonne 3 - Cellule 3 » a également été supprimée.



Voilà pour les nouveautés du jour, si vous avez des remarques et/ou questions les concernant, merci de nous les adresser via la section Bureau du staff. En attendant, je vais m'atteler au projet suivant.

À plus !



* Si la taille définie dépasse la largeur du message, elle sera automatiquement réduite.
C'est pas drôle et vous le savez.

Avatar de l’utilisateur
Chichibi
Messages : 38
Inscription : 12 avr. 2016, 00:37

Re: [Unique] Nouvelles fonctionnalités

Message par Chichibi » 01 mai 2018, 16:24

Yeah, bravo à l'équipe (Bravo à Tutu surtout ?)

PS : Ces descriptions sont sublimes !
Image

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité