[Guide] Mettre en forme ses messages avec BBCode - Foire aux questions - Poudlard.fr

Retour Répondre

Zachary Winslow

27 avr. 2020, 21:47

Ce guide a pour objet de vous expliquer toutes les possibilités de mise en forme qui vous sont offertes dans vos messages, à l'aide du langage « BBCode » qui est utilisé sur ce site.

Le BBCode permet d'entourer des mots, phrases ou paragraphes à l'aide de balises délimitées par des crochets, afin que leur soit appliqué le style correspondant.

Ce petit guide vous montrera toutes les possibilités existantes, et pourra s'enrichir au fur et à mesure que de nouvelles options vous seront proposées.

Même si vous êtes un vétéran du site, vous découvrirez sans doute des choses en lisant attentivement ce guide (raccourcis claviers, bbcodes cachés...), notamment car certaines fonctionnalités sont des ajouts récents !

En tous les cas, n'oubliez pas de prévisualiser vos messages avant envoi : c'est toujours le plus efficace pour voir si cela ressemble à ce que vous aviez en tête

N'hésitez pas à vous abonner à ce sujet pour être informés en cas de nouvelles balises disponibles.

Table des matières

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020, 21:48

Mise en forme du texte

Texte en gras

Vous pouvez mettre un texte en gras en utilisant les balises suivantes :

Code : Tout sélectionner

Ceci est un [b]texte en gras[/b].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné. Vous pouvez également utiliser un raccourci clavier :

alt+b avec Google Chrome, Edge ou Internet Explorer (Windows) ;
maj+alt+b avec Mozilla Firefox (Windows ou Linux) ;
ctrl+alt+b sous macOS.

Le résultat est le suivant :

Ceci est un texte en gras.

Texte en italique

Vous pouvez mettre un texte en italique en utilisant les balises suivantes :

Code : Tout sélectionner

Ceci est un [i]texte en italique[/i].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné. Vous pouvez également utiliser un raccourci clavier :

alt+i avec Google Chrome, Edge ou Internet Explorer (Windows) ;
maj+alt+i avec Mozilla Firefox (Windows ou Linux) ;
ctrl+alt+i sous macOS.

Le résultat est le suivant :

Ceci est un texte en italique.

Texte souligné

Vous pouvez souligner un texte en utilisant les balises suivantes :

Code : Tout sélectionner

Ceci est un [u]texte souligné[/u].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné. Vous pouvez également utiliser un raccourci clavier :

alt+u avec Google Chrome, Edge ou Internet Explorer (Windows) ;
maj+alt+u avec Mozilla Firefox (Windows ou Linux) ;
ctrl+alt+u sous macOS.

Le résultat est le suivant :

Ceci est un texte souligné.

Texte barré

Vous pouvez barrer un texte en utilisant les balises suivantes :

Code : Tout sélectionner

Ceci est un [s]texte barré[/s].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte barré.

Texte en indice

Vous pouvez mettre un texte en indice avec :

Code : Tout sélectionner

CO[sub]2[/sub]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

CO₂

Texte en exposant

Vous pouvez mettre un texte en exposant avec :

Code : Tout sélectionner

E = mc[sup]2[/sup]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

E = mc²

Texte en couleur

Il vous est possible de colorer les textes en n'importe quelle couleur, même si vous êtes bien sûr invités à la modération ! N'oubliez pas que les textes sont faits pour être lus, et doivent donc avant tout rester lisible. Pour ce faire :

Code : Tout sélectionner

Ceci est un [color=#400080]texte en couleur[/color].

Le plus simple est de cliquer sur la flèche à côté de «» puis de cliquer sur l'une des couleurs qui s'affiche sur la palette, avant de taper le texte ou après l'avoir sélectionné.

Les six caractères derrière le # sont le code hexadécimal de la couleur choisie. Vous pouvez trouver sur votre ordinateur ou sur Internet des outils permettant d'obtenir le code de n'importe quelle couleur. Il est alors possible de mémoriser les codes des couleurs qui vous sont les plus utiles.

Le résultat est le suivant :

Ceci est un texte en couleur.

Taille du texte

Vous pouvez changer la taille du texte, en pourcentage par rapport à la taille de base, avec :

Code : Tout sélectionner

Ceci est un [size=125]texte écrit en grand[/size].

Il est possible de cliquer sur l'icône avant de taper le texte ou après l'avoir sélectionné. Les tailles au-dessus de 150 % seront généralement bien trop grosses, et celles sous 50 % non lisibles.

Le résultat est le suivant :

Ceci est un texte écrit en grand.

Revelio (texte caché)

Vous pouvez créer un texte masqué par défaut, qui s'affiche lorsqu'on le survole avec la souris (sur ordinateur) ou qu'on le touche (sur téléphone) avec :

Code : Tout sélectionner

Ceci est un [revelio]texte caché[/revelio].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte caché.

Smileys

Il vous est possible d'ajouter tout un tas de smileys dans vos messages :

Code : Tout sélectionner

Ceci est un smiley : :)

Pour afficher les smileys disponibles, vous pouvez cliquer sur l'icône «» puis cliquer sur le smiley de votre choix. Vous pouvez également afficher ou masquer la liste des smileys grâce à un raccourci clavier :

alt+s avec Google Chrome, Edge ou Internet Explorer (Windows) ;
maj+alt+s avec Mozilla Firefox (Windows ou Linux) ;
ctrl+alt+s sous macOS.

Le résultat est le suivant :

Ceci est un smiley :

Astuce : vous pouvez également utiliser la plupart des émojis dans vos messages.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020, 21:48

Alignement du texte

Les éléments qui suivent s'appliquent à un bloc entier. Cela signifie que vous devez les appliquer dans tout un paragraphe. Il ne faut pas qu'ils soient contenus au sein d'une autre balise (comme le gras, la taille... etc).

Texte aligné à gauche

Vous pouvez aligner un texte à gauche, de façon à ce qu'il ne soit plus justifié :

Code : Tout sélectionner

[left]Ceci est un texte aligné à gauche.[/left]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte aligné à gauche.

Texte centré

Vous pouvez centrer un texte :

Code : Tout sélectionner

[center]Ceci est un texte centré.[/center]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte centré.

Texte aligné à droite

Vous pouvez aligner un texte à droite :

Code : Tout sélectionner

[right]Ceci est un texte aligné à droite.[/right]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte aligné à droite.

Texte justifié

Par défaut, tous les textes sont déjà justifiés sur le site, aussi ce bbcode est normalement inutile, sauf dans des situations particulières. Si tel est le cas :

Code : Tout sélectionner

[justify]Ceci est un texte justifié.[/justify]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte justifié.

Indentations

Vous pouvez ajouter des indentations pour ajouter un espace à gauche d'un bloc de texte. Si besoin, vous pouvez même en ajouter plusieurs :

Code : Tout sélectionner

Ceci est un texte sans indentation.

[indent]Ceci est un texte indenté une fois.[/indent]

[indent][indent]Ceci est un texte indenté deux fois.[/indent][/indent]

[indent][indent][indent]Ceci est un texte indenté trois fois.[/indent][/indent][/indent]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte sans indentation.
Ceci est un texte indenté une fois.

Ceci est un texte indenté deux fois.

Ceci est un texte indenté trois fois.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020, 21:48

Listes

Liste non ordonnée

Vous pouvez créer un liste non ordonnée (avec des tirets) de la façon suivante :

Code : Tout sélectionner

[list]
[*] Premier élément de la liste.
[*] Deuxième élément de la liste.
[/list]

Il est possible de cliquer sur l'icône «» pour créer la liste.

Le résultat est le suivant :

Premier élément de la liste.

Deuxième élément de la liste.

Liste ordonnée

Vous pouvez créer un liste ordonnée (avec une numérotation) de la façon suivante :

Code : Tout sélectionner

[list=1]
[*] Premier élément de la liste.
[*] Deuxième élément de la liste.
[/list]

Il est possible de cliquer sur l'icône «» pour créer la liste.

Le résultat est le suivant :

Premier élément de la liste.

Deuxième élément de la liste.

À la place d'une liste numéroté avec un chiffre, vous pouvez utiliser a, A, i and I. Ainsi, par exemple, vous pouvez utiliser le code suivant :

Code : Tout sélectionner

[list=i]
[*] Premier élément de la liste.
[*] Deuxième élément de la liste.
[/list]

Cela vous donnera :

Premier élément de la liste.

Deuxième élément de la liste.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020, 21:49

Éléments

Images

Vous pouvez afficher des images avec :

Code : Tout sélectionner

[img]files/513834a2fdd5fbd6.jpg[/img]

L'adresse à indiquer entre les balises est le lien de l'image à ajouter.

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Vous pouvez également adapter la taille de vos images. Pour ce faire, utilisez la balise "image" comme dans le code suivant, où 130 est la largeur et 150 la hauteur maximales de l'image :

Code : Tout sélectionner

[image=130x150]files/513834a2fdd5fbd6.jpg[/image]

Le résultat est le suivant :

Vidéos

Vous pouvez afficher des vidéos hébergées sur Youtube avec :

Code : Tout sélectionner

[youtube]Tx1XIm6q4r4[/youtube]

Le code à indiquer entre les balises est celui qui s'affiche à la fin de l'URL de la vidéo Youtube concernée.

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Musiques

Tout comme les vidéos, il est possible d'afficher un mini-lecteur pour les musiques des vidéos hébergées sur Youtube avec :

Code : Tout sélectionner

[music]Tx1XIm6q4r4[/music]

Le code à indiquer entre les balises est celui qui s'affiche à la fin de l'URL de la vidéo Youtube concernée.

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Icônes

Vous pouvez utiliser les icônes utilisées par le site avec :

Code : Tout sélectionner

[icon]symbol[/icon]

La liste des symboles disponibles est la suivante :

: address-book-r
: address-book-s
: address-card-r
: align-center-s
: align-justify-s
: align-left-s
: align-right-s
: angle-double-left-r
: angle-double-right-r
: angle-left-r
: angle-right-r
: arrow-left-s
: at-r
: birthday-cake-r
: bold-s
: books-s
: books-r
: book-spells-r
: bell-s
: bell-r
: briefcase-s
: bullhorn-r
: caret-right-s
: caret-down-s
: car-side-r
: cauldron-r
: chart-line-s
: check-r
: check-square-r
: circle-r
: circle-s
: clock-r
: cog-s
: comment-s
: comment-r
: comments-r
: compass-r
: envelope-r
: envelope-open-r
: exclamation-triangle-r
: external-link-square-s
: external-link-square-r
: eye-r
: eye-slash-s
: feather-alt-s
: feather-alt-r
: fill-drip-s
: film-s
: filter-r
: frog-s
: gavel-s
: golf-ball-r
: graduation-cap-s
: hashtag-s
: hat-wizard-s
: heart-s
: heart-r
: hearth-l
: key-s
: hat-witch-r
: image-s
: inbox-in-r
: inbox-out-r
: inbox-r
: italic-s
: indent-s
: info-circle-r
: list-s
: list-ol-s
: link-s
: lock-alt-r
: map-pin-r
: map-s
: map-signs-r
: map-marker-alt-r
: mask-s
: minus-r
: music-alt-s
: paper-plane-r
: pencil-s
: pen-fancy-s
: pen-fancy-r
: plus-r
: puzzle-piece-r
: question-s
: quidditch-r
: quote-s
: random-r
: reply-s
: reply-all-s
: save-r
: scroll-old-s
: scroll-old-r
: share-r
: share-s
: search-s
: search-r
: shopping-basket-s
: smile-beam-r
: sliders-v-r
: sparkles-s
: seedling-r
: sparkles-r
: square-r
: sign-out-alt-s
: skull-r
: sort-alpha-down-r
: spider-r
: stamp-s
: star-s
: star-r
: strikethrough-s
: subscript-s
: superscript-s
: table-s
: telescope-r
: text-size-s
: times-r
: trash-alt-r
: trophy-s
: trophy-r
: underline-s
: user-s
: wand-magic-r
: wand-s

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020, 21:50

Liens et références

Liens

Vous pouvez créer un lien vers une autre page du site, ou vers un autre site, avec :

Code : Tout sélectionner

Ceci est un [url=https://www.poudlard.fr/]lien[/url].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné. Indiquez alors l'URL dans la boîte de dialogue qui s'affiche.

Le résultat est le suivant :

Ceci est un lien.

Ancres

Les ancres sont des références invisibles, à placer quelque part dans un texte, ce qui permet ensuite de faire un lien qui pointe dans cette partie de la page. C'est utile notamment lorsque vous souhaitez faire une table des matières.

Code : Tout sélectionner

Ceci est une ancre : rien ne va s'afficher après ça. [ref]monancre[/ref]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est une ancre : rien ne va s'afficher après ça.

Il suffit alors de créer un lien vers mapage/#monancre pour que ceux qui cliquent dessus soient redirigés là où vous avez placé l'ancre. Evidement, chaque référence doit être unique : il ne faut pas utiliser deux fois la même sur une seule page, sans quoi le lien redirigera uniquement vers la première.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020, 21:50

Autres blocs

Citations

Vous pouvez faire une citation (ou plus largement distinguer un texte) :

Code : Tout sélectionner

[quote]Ceci est une citation.[/quote]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est une citation.

Vous pouvez ajouter un auteur avec le code suivant :

Code : Tout sélectionner

[quote=Zachary Winslow]Ceci est une citation d'un grand homme.[/quote]

Le résultat est le suivant :

Zachary Winslow a écrit :Ceci est une citation d'un grand homme.

Enfin, il suffit de cliquer sur l'icône «» à droite d'un message existant pour facilement le citer, avec un lien vers l'auteur et le message concerné.

Reducio

Vous cacher faire un bloc de texte, qui s'affiche au clic, avec la balise:

Code : Tout sélectionner

[reducio]Ceci est un texte caché.[/reducio]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Reducio

Ceci est une text caché.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

20 oct. 2020, 12:44

Mise en forme avancée avec des tableaux

Un tutoriel a été réalisé à cette page !
Merci @Mael Chassin !

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Retour Répondre