Wiki

Principales balises BBCode

Sat, 21 Feb 2026 08:48:44 +0100

PHPBoost gère la mise en forme des messages du forum, articles, commentaires, etc... avec un "langage" simplifié. En effet, qui n'a jamais entendu parler du BBCode ? C'est un langage inventé, qui permet de faciliter la mise en forme d'un message et qui permet entre autres de mettre du texte en gras, de le souligner, de faire un lien ou bien d'autres choses encore. Il permet à des utilisateurs ne connaissant pas du tout le html de formater leurs messages.
Niveau fonctionnement, pour ceux qui sont intéressés, des expressions régulières reconnaissent les balises BBCode et remplacent ce langage à balises à crochets [] par les balises XHTML et CSS correspondantes.
Nous allons voir par l'intermédiaire de cet article comment mettre en forme un message, valable sur toutes les pages de PHPBoost contenant l'éditeur de texte.
Veillez à bien respecter un ordre d'ouverture et de fermeture des balises lorsque vous les imbriquez l'une dans l'autre :

Code :

[b][i]Texte[/b][/i]
est à proscrire et à remplacer par :
[b][i]Texte[/i][/b]

Effectivement vous allez me dire : "mais ça marche aussi!".
Certes, mais cela n'est absolument pas bon pour les navigateurs et la page ne sera plus compatible au standard du W3C.
Veillez aussi à ne pas intercaler d'espaces à l'intérieur des crochets [] qui correspondent à la balise, cela empêcherait tout simplement le fonctionnement de la mise en forme.

Smileys

Pour égayer vos messages, rien de mieux que d'y insérer quelques smileys histoire d'illustrer des réactions récurrentes.
Pour cela vous devez placer le curseur à l'endroit où vous voulez insérer le smiley, à l'intérieur de la zone de texte. Ensuite vous cliquez sur le bouton dans la barre BBCode pour afficher la collection de smileys disponibles (une vingtaine d'origine plus ceux éventuellement rajoutés) et cliquez sur le smiley qui vous intéresse.
Un code va donc s'afficher à l'endroit où vous aviez placé le curseur.
Et oui, vous l'aurez compris, le smiley ne s'insère pas directement mais cela ajoute un "code smiley" qui est propre à chaque motif choisi, qui sera remplacé par le smiley à l'affichage du message.
Vous pourrez donc au bout d'un certain temps et avec de l'habitude ne plus avoir à cliquer sur le bouton smiley car vous aurez retenu les codes correspondants. D'ailleurs pourquoi des caractères si bizarres ?
Effectivement les caractères correspondant aux smileys peuvent être compliqués mais pour cela on a une explication évidente. Par exemple pour le smiley sourire si le code était sourire, dès que le mot sourire apparaîtrait dans le message il serait remplacé par le smiley correspondant.
Et puis pour allez encore plus loin vous allez remarquer quelque chose si ce n'est pas déjà fait.
Par exemple justement le smiley sourire
Son code est :

Code :

:)

Et bien faites faire un quart de tour dans le sens horaire et vous verrez vite qu'il forme un visage souriant (avec les deux points : les yeux, et la parenthèse : la bouche).
Vous pouvez faire ça avec beaucoup de smileys classiques comme le clin d'œil par exemple.

Mise en forme du texte

Vous vous demandez comment j'ai mis en page cet article ? Simplement, grâce au BBCode ! En effet le BBCode dérive du HTML par sa syntaxe.

Mises en forme de base : gras, italique, souligné et barré

Pour mettre un texte en gras vous n'aurez qu'à l'encadrer par la balise b comme le montre cet exemple :

Code :

[b]Texte à mettre en gras[/b]

Cet exemple affichera:
Texte en gras
Pour l'insérer plus facilement vous pouvez sélectionner le texte que vous voulez mettre en gras et vous cliquez sur , il s'entourera automatiquement des bonnes balises.
Vous pouvez faire de même avec les balises i, u, s qui correspondent à :

i : italique ()
u : souligné ()
s : barré ()

Mais pourquoi des lettres b, i et u ?
A cause de l'anglais tout simplement !
b est l'initiale de "bold" qui signifie "gras", i pour "italic", et u pour "underline" ou "souligné" en français.

Taille du texte

Pour modifier ces propriétés, le principe est le même. On va encadrer le texte désiré par d'autres balises. L'icône de la balise est :

Code :

[size=25]Texte[/size]

Cet exemple affichera :
Texte
La balise size, admet en argument un chiffre entre 0 et 49
Quelques exemples :
Taille 5
Taille 9
Taille 25
Taille 35
Taille 49
[size=50]Taille 50[/size] Celle la ne marche pas comme prévu.

Couleur

L'icône de la balise est :
Dans color vous mettrez la couleur du texte (en anglais pour les principales couleurs, ou alors en hexadécimal pour les connaisseurs). Liste des couleurs disponibles: red, green, blue, yellow, purple, olive, black, white, grey etc.

Code :

[size=25][color=red]Texte[/color][/size]
[size=25][color=#FF6600]Texte[/color][/size]

Cet exemple affichera :
Texte
Texte

Alignement

Pour l'alignement d'un texte le principe est encore une fois le même. En utilisant les boutons gauche, centré, droite et justifié, vous pourrez aligner le texte qui sera entouré des balises où vous voudrez dans la page.
Les icônes de la balise sont :

gauche :
centré :
droite :
justifié:

Code :

[align=right]Exemple de texte aligné à droite[/align]

Cet exemple affichera :

Exemple de texte aligné à droite

Élément flottant

Nous avons déjà vu la balise align, elle permet de positionner des éléments.
L'avantage de la balise float c'est qu'elle permet de mettre plusieurs éléments à la même hauteur, par exemple si on veut insérer une image sur la droite, si on lui demande de se positionner à droite par la balise float le texte ne viendra pas se mettre sur l'image mais il l'entourera.
A noter qu'il est possible de faire flotter à droite ou à gauche mais pas au centre.
Les icônes de la balise sont :

gauche :
droite :

Code :

[float=right]Élément flottant à droite[/float]

Cet exemple affichera :

Élément flottant à droite

Les titres

L'icône de la balise est :
La balise title sert à créer des titres. Sélectionnez votre texte à mettre en titre, cliquez sur l'icône et choisissez le niveau de titre.

Code :

[title=1]titre 1[/title]
[title=2]titre 2[/title]
[title=3]titre 3[/title]
[title=4]titre 4[/title]

Cet exemple affichera :

titre 1

titre 2

titre 3

titre 4

Les conteneurs

L'icône de la balise est :
et on y trouve les outils suivants:

La balise Paragraphe permet de mieux mettre en forme un contenu. Votre texte encadré par cette balise sera suivi d'un saut de ligne.

Code TEXT :

[p]Paragraphe[/p]Mise en forme du contenu

Cela affichera :

Paragraphe

Mise en forme du contenu

Les balises block et fieldset servent à créer un cadre autour d'un texte. Sélectionnez votre texte à encadrer, cliquez sur l'icône et choisissez le type de cadre.

Code :

[block]ce texte est encadré[/block]
[fieldset]ce texte est aussi un texte encadré[/fieldset]

Cet exemple affichera :

ce texte est encadré

Ce texte est aussi un texte encadré.

A noter que la balise fieldset peut aussi s'utiliser avec l'attribut "legend" pour mettre un titre:

Code :

[fieldset legend="titre"]ce texte est encadré avec un titre[/fieldset]

Cet exemple affichera :

titre

Ce texte est encadré avec un titre.

La balise Abréviation permettra d'utiliser des abréviations comme cet exemple:

Code BBCODE :

[abbr=Programme]prog.[/abbr]

qui affichera ceci: prog.

Les styles

L'icône de la balise est :
Les styles de texte permettent de bien mettre en évidence une zone de texte sous forme de question, remarque, attention et erreur. La balise utilisée est style.
Voici comme exemple les 4 styles disponibles :

Code :

[style=question]question[/style]
[style=notice]remarque[/style]
[style=warning]attention[/style]
[style=error]erreur[/style]

Cet exemple affichera :
question
remarque
attention
erreur

Les balises fa (Font Awesome)

Dans la documentation, il faut souvent désigner un outil en faisant référence à sa représentation en tant qu'icone.
Les icones les plus utilisés ont été regroupés dans un tableau :

Un simple clic sur un symbole le placera dans votre texte.
Pour en savoir plus sur les icones Font Awesome, veuillez consulter La bibliothèque Font Awesome.

Autres balises utiles

Liens

L'icône de la balise est :
Pour faire un lien vers une page web quelconque, vous devez suivre la démarche suivante. Vous devez d'abord insérer la balise lien qui est url. Vous mettez le texte ou l'image qui serviront de support pour le lien. Ensuite vous revenez à l'ouverture de la balise url et vous remplacez url par url=votre page.
Voici un exemple :

Code :

[url=https://www.phpboost.com]PHPBoost[/url]
[url=https://www.phpboost.com]https://www.phpboost.com[/url]

Cet exemple affichera :
PHPBoost
https://www.phpboost.com
Lors du clic sur l'icône de la balise, l'adresse du lien vous est demandée et le curseur est positionné automatiquement pour ajouter le texte du lien.

Insérer un lien vers un article

Cette balise est une spécificité des modules pages et wiki. Le lien vous redirigera vers l'article concerné.

Pour le module Pages, consultez cet article.
Pour le module Wiki, un raccourci dans la barre BBCode permet d'insérer un lien de la même manière :

Si vous souhaitez faire pointer votre lien vers un paragraphe d'une page, mettez dans votre balise :

Code BBCODE :

[link=titre-de-votre-page#paragraph-titre-de-votre-paragraphe[/link]

ou copiez l'adresse dans la barre de navigation puis collez-la dans votre balise.
Exemple :

Code BBCODE :

[link=utilisation-du-module-pages#paragraph-lien-vers-une-page]article[/link]

Images

L'icône de la balise est :
L'ajout d'image permet d'expliquer un problème, montrer des créations graphiques, images drôles/intéressantes, etc...
Pour cela vous pouvez insérer une image en spécifiant son adresse internet dans les balises img.
Voici un exemple :

Code :

[img]https://resources.phpboost.com/documentation/logos/logo.png[/img]

Cet exemple affichera :

Combinons avec ce que nous avons appris avant, nous allons centrer l'image :

Code :

[align=center][img]https://resources.phpboost.com/documentation/logos/logo.png[/img][/align]

Cet exemple affichera :

Il est également possible de fixer les propriétés de style de l'image (la largeur ou la hauteur par exemple) directement dans la balise. Exemple avec une largeur à 30% :

Code :

[img style="width:30%;"]https://resources.phpboost.com/documentation/logos/logo.png[/img]

Vous savez donc maintenant ajouter des images à vos messages.
Pour écrire sur une image, il vous suffit de faire cela :

Code BBCODE :

[block style="background-image:url(LIEN DE L'IMAGE); width:760px; height:650px;"]Texte par dessus[/block]

Code BBCODE :

background-image:url(LIEN DE L'IMAGE)

est l'élément où vous devriez mettre le lien de l'image

Code BBCODE :

width:760px

et la largeur.

Code BBCODE :

height:650px;

la hauteur.

Code TEXT :

Texte par dessus

est le texte qui sera par dessus l'image.

L'icône de la balise est :
Cette balise permet d'ajouter un effet sur une image. Elle permet d'afficher la miniature d'une image dans un texte et de l'afficher en taille réelle lorsqu'on clique dessus.
Voici un exemple :

Code :

[lightbox=https://resources.phpboost.com/documentation/logos/logo.png][img style="width: 50px;"]https://resources.phpboost.com/documentation/logos/logo.png[/img][/lightbox]

Cet exemple affichera :

Lors du clic sur l'icône de la balise, l'adresse de l'image en taille réelle vous est demandée et le curseur est positionné automatiquement pour ajouter l'image miniature (avec la balise img décrite au paragraphe précédent) ou le texte à afficher.

Texte caché

L'icône de la balise est :
La balise hide permet d'afficher une zone de texte caché. Il suffit de cliquer dessus pour afficher le contenu. Elle peut être utilisée pour un article de questionnaire donnant ainsi la réponse à la question.
Exemple :

Code :

[hide]zone de texte à cacher/afficher.[/hide]

Cet exemple affichera :

Caché :

zone de texte à cacher/afficher.

La balise peut être refermée en cliquant sur : Cliquer ici pour cacher le message.

Balises member et moderator

Pour utiliser ces balises, cliquez sur l'icône hide de la barre d'outils du BBCode, une liste déroulante affichera alors les balises Membre et Modérateur.
Ces balises permettent de cacher du contenu et de réserver son accès soit aux membres soit aux modérateurs.
Exemple avec la balise member:
[member]Contenu de la balise membre[/member]
Cela affichera :
Message destiné aux membres
Seuls les membres, les modérateurs et les administrateurs auront accès à "Contenu de la balise membre".
Exemple avec la balise moderator:
[moderator]Contenu de la balise modérateur[/moderator]
Cela affichera :
Message destiné aux modérateurs
Seuls les modérateurs et les administrateurs auront accès à "Contenu de la balise modérateur".
Retrouvez dans cet article la façon de personnaliser ces messages.

Citation

L'icône de la balise est :
La balise quote (citation en anglais) est souvent utilisée pour citer le message d'un autre membre, mais peut avoir d'autres utilisations très pratiques.

Version 5.2

Quand vous insérez une citation, une petite fenêtre apparaît pour vous permettre d'indiquer le nom de l'auteur d'une citation :

Autres versions

Elle peut être utilisée simplement pour citer un texte :

Code :

[quote=Citation]Texte sans auteur particulier à citer[/quote]

Cet exemple affichera :

Citation :
Texte sans auteur particulier à citer

Maintenant, vous pouvez citer l'auteur du message (ça ne doit pas forcément être le pseudo d'un membre, ça peut être le nom d'un site ou d'un auteur...)

Code :

[quote=CrowkaiT]Message dont l'auteur est CrowkaiT[/quote]

Cet exemple affichera :

CrowkaiT :
Message dont l'auteur est CrowkaiT

Tableaux

Veuillez consulter le lien suivant pour plus de détails :
Insérer des tableaux

Listes

Veuillez consulter le lien suivant pour plus de détails :
Insérer des listes

Insérer du code

Pour afficher du BBCode sans qu'il soit interprété comme par exemple plus haut dans cet article (tous les autres langages y compris le HTML sont bloqués par mesure de sécurité), il faut utiliser la balise BBCode nommée code. Le code ne sera pas interprété, et il sera coloré si le langage est supporté et reconnu par le colorateur syntaxique.
L'icône de la balise est :
Voici un exemple:

Code :

echo 'Bonjour cher membre'; ?>

L'option " Copier vers le presse-papier" permet d'éviter de sélectionner tout le code pour le copier. Cet outil n'est disponible que si vous avez inséré au moins une balise dans le contenu de votre document.

Préciser le type de code inséré

En précisant le type de code que l'on veut colorer, on met toutes les chances de notre côté pour que l'interpréteur syntaxique gère au mieux la couleur.
Dans le menu déroulant de la balise, choisissez le type de code que vous souhaitez afficher.
Exemple :
Si c'est du code php, l'on peut mettre directement :

Code BBCODE :

[code=php][/code]

Cet exemple affichera :

Code PHP :

 echo 'Bonjour cher membre'; ?>

Vous avez la possibilité de personnaliser l'affichage de la balise en reprenant le nom du fichier d'où provient le code inséré.
Si votre code est issu du fichier design.css, renseignez la balise comme ceci:

Code :

[code=design.css]ce bout de code est issu du fichier design.css[/code]

Le résultat :

design.css :

ce bout de code est issu du fichier design.css

Afficher les lignes

Pour insérer les numéros de ligne à côté du code, il va falloir insérer un argument supplémentaire dans la balise BBCode.
Procéder comme suit :

Code BBCODE :

[code=php,1][/code]

Cet exemple affichera :

Code PHP :

 echo 'Bonjour cher membre';
?>

Multimédia

Vidéos

L'icône de la balise est :
La balise movie est maintenant compatible avec le lecteur HTML5 en vue de remplacer le lecteur Flash player dont l'arrêt est annoncé. Cette balise lit les formats MP4, WebM, et Ogg. La balise swf reste en place pour assurer la compatibilité avec les vidéos existantes.
La balise movie fonctionne de la même manière que la balise flash swf mais vous ne pouvez intégrer que des fichiers physiques.
Exemple :

Code BBCODE :

[movie=200,200]/upload/exemple.mp4[/movie]

Vous pouvez aussi ajouter un "poster" à votre vidéo. L'image sera affichée avant la lecture.

Code BBCODE :

[movie=400,300,/upload/image.jpg]/upload/exemple.mp4[/movie]

Youtube

L'icône de la balise est :
Vous pouvez insérer très facilement des vidéos youtube à l'aide de cette balise.
Lorsque vous avez choisi votre vidéo sur le site youtube, copiez l'adresse de cette dernière de votre navigateur internet.
Il suffit maintenant de l'insérer entre la balise youtube.
Exemple :

Code BBCODE :

[youtube]https://www.youtube.com/watch?v=DFEtnhfQcqI[/youtube]

Vous pouvez modifier la taille de votre vidéo en rajoutant la largeur et la hauteur souhaitées : [youtube=largeur,hauteur].
Exemple :

Code BBCODE :

[youtube=200,100]https://www.youtube.com/watch?v=DFEtnhfQcqI[/youtube]

Résultat centré:

Flash

L'icône de la balise est :
La balise flash swf permet d'intégrer des animations flash directement dans PHPBoost, celle-ci peut prendre deux arguments : largeur et hauteur.

Code :

[swf=largeur,hauteur]url de l'animation[/swf]

Exemple :

Code :

[swf=155,250]http://www.phpboost.com/phpboost/pub.swf[/swf]

Pour savoir comment utiliser la balise flash pour insérer des vidéos, merci de lire l'article approprié.

Son

L'icône de la balise est :
Vous pouvez bien sur insérer du son sur phpboost. La balise utilisée est sound.
Il faut cependant noter que le lecteur lit uniquement les fichiers .mp3. De plus la lecture optimale se fait pour les fichiers encodés à 44,100kHz. Dans les autres cas, la lecture ne se fera pas normalement.
Exemple :

Code :

[sound]https://art.macp3.info/VRAC/mp3/tagadatsointsoin.mp3[/sound]

Cet exemple affichera :

Source: Musique composée par Kak Miortvi Pengvin. Fichier distribué sous licence Creative Commons BY-NC-ND 2.0.

Insérer des expressions mathématiques

L'icône de la balise est :
La balise math permet d'insérer des expressions mathématiques. Vous trouverez tous les détails sur l'article approprié (explication et démonstration).

Ancres

Qu'est-ce qu'une ancre?

Une ancre permet de définir des lieux dans la page. Elle permet de faire en sorte de se rendre directement sur l'endroit recherché dans la page (voir par exemple les liens du sommaire de cette page, ils mènent directement au paragraphe concerné).
L'icône de la balise est :

Créer une ancre

Pour définir une ancre, il faut définir la syntaxe suivante à l'endroit du texte vers lequel vous souhaitez pointer directement:

Code :

[anchor=nom-ancre]Titre[/anchor]

Le nom de votre ancre sera réécrite en minuscule avec tirets même si vous l'écrivez en majuscule.

Faire pointer un lien vers une ancre

Pour créer un lien vers un endroit précis de la page, il faut mettre avant tout l'adresse de la page, puis mettre un dièse et le nom de l'ancre précédemment définie.
Nous utiliserons par exemple (uniquement pour les modules Pages et Wiki):

Code :

[link=principales-balises-bbcode#creer-une-ancre]Créer des ancres en BBCode sur PHPBoost[/link]

Cet exemple affichera : Créer des ancres en BBCode sur PHPBoost

Pour les autres modules, c'est la balise [url] [/url] qui devra être utilisée à la place de la balise [link]

Flux RSS

Depuis la 4.0, il est possible d'ajouter un flux RSS interne au site via le BBCode.
Il faut utiliser cette balise :

Code BBCODE :

[feed cat"x" number="x"]NOM DU MODULE[/feed]

Vous avez la possibilité de personnaliser l'affichage :

cat="numéro de la catégorie du flux dans le module"
Pour connaître le numéro de la catégorie du flux, allez dans le module souhaité, allez dans la catégorie souhaitée et cliquez sur cette icone , vous allez être redirigé vers une page avec ce type d'adresse : /syndication/rss/forum/4
Cela correspond au module forum et la catégorie est la n° 4.
Si vous souhaitez afficher tous les flux d'un module, dans ce cas ne mettez pas cat"x"
number="nombre de flux à afficher"

Exemple pour afficher les 5 derniers flux du module téléchargement de la catégorie 3 :

Code BBCODE :

[feed cat"3" number="5"]download[/feed]

Utiliser Latex en BBCode

Fri, 13 Feb 2026 07:29:58 +0100

Introduction

Bien qu'elle permette une mise en forme assez poussée, l'utilisation du BBCode atteint ses limites, notamment en ce qui concerne l'affichage de formules mathématiques. Pour cela, il existe sur PHPBoost un interpréteur de langage mathématique. Il utilise PHPMathPublisher, un logiciel libre qui permet de transformer le langage en images, ce qui est compatible avec tous les navigateurs. Il a été légèrement modifié afin de gérer la mise en cache des images, leur génération étant une opération gourmande en ressources. Les images sont ainsi conservées pendant 1 semaine, puis elles sont supprimées. Si elles sont à nouveau demandées, alors elles sont régénérées immédiatement.

Syntaxe

La syntaxe est assez proche du LaTeX, un langage de mise en forme qui supporte très bien les expressions mathématiques.

Pour introduire les expressions, il faut les entourer de la balise math, disponible dans la barre d'outils BBCode.

Comment rédiger ces expressions?
C'est assez simple, pour cela rien ne vaut la documentation officielle de PHPMathPublisher.

A noter simplement que sur PHPBoost il ne faut pas mettre les balises comme indiqué mais celle qui correspond en BBCode.

Exemples

Série de Fourier de f:

Code :

S(f)(t)=a_{0}/2+sum{n=1}{+infty}{a_{n} cos(n omega t)+b_{n} sin(n omega t)}

Limite (utilisation de quantificateurs):

Code :

{lim{{n}right{+infty}}{u_n}=l}doubleleftright{forall{varepsilon}>0,exists{n}_0 in bbN, forall{n} in bbN, n>={n_0}doubleright{delim{|}{u_n-l}{|}}<=varepsilon}

0,exists{n}_0 in bbN, forall{n} in bbN, n>={n_0}doubleright{delim{|}{u_n-l}{|}}<=varepsilon}" />

Moment cinétique du solide écrit en O:

Code :

vec{sigma_O}=tripleint{v}{}{vec{OA}wedge{vec{v(P)}.dm(P)}}

Insérer des vidéos sur PHPBoost

Fri, 09 Dec 2022 03:45:35 +0100

Comment insérer une vidéo dans PHPBoost grâce au BBCode ?

Pour profiter pleinement des outils de mise en page, il faut avoir choisi l'éditeur de texte BBCode dans son profil.
Sinon, écrivez les codes bbcode fournis dans ce descriptif.

Dans la barre d'outils sur la droite, cliquez sur l'outil Fichiers puis sur l'outil Vidéo

Vidéo personnelle

Les formats .mp4 .ogg et .webm sont lu nativement par les navigateurs courants.

Vous devez héberger ce fichier sur un serveur pour ensuite renseigner l'adresse complète dans le champ

Adresse de la vidéo

.

Dans le cas où vous hébergez le fichier sur votre propre site, n'oubliez pas de rajouter l'adresse du site en début d'url
https://www.mon.site.fr/dossier/video/ma_video.mp4

Choisissez ensuite

Fichier distant

dans le champ

Hébergeur

Choisissez ensuite les dimensions de la vidéo.

Vous pouvez ajouter une vignette de présentation (optionnel)

Enfin cliquez sur

insérer

Le code d'insertion de la vidéo sera noté dans le textarea sous la forme :

Code BBCODE :

[movie,largeur,hauteur,/chemin/de/la/vignette]https://www.site.fr/chemin/vers/video.mp4[/movie]

Résultat :

Utiliser un hébergeur vidéo

Vous souhaitez partager une vidéo déjà en ligne, diffusée par un tiers ou par vous-même chez un hébergeur.

Youtube

youtube.com

Même procédure que précédemment pour les outils

Dans le champ

Adresse de la vidéo

, renseignez le lien de la page de Youtube où se trouve la vidéo

Dans le champ

Hébergeur

, choisissez

Youtube

Ce qui donne :

Code BBCODE :

[youtube=800,450]https://www.youtube.com/watch?v=aqz-KE-bpKQ&t=531s[/youtube]

Résultat :

Dailymotion

dailymotion.com

Même procédure que précédemment pour les outils

Dans le champ

Adresse de la vidéo

, renseignez le lien de la page de Dailymotion où se trouve la vidéo

Dans le champ

Hébergeur

, choisissez

Dailymotion

Ce qui donne :

Code BBCODE :

[dailymotion=800,450]https://www.dailymotion.com/video/x2t6n4d[/dailymotion]

Résultat :

Vimeo

vimeo.com/

Même procédure que précédemment pour les outils

Dans le champ

Adresse de la vidéo

, renseignez le lien de la page de Vimeo où se trouve la vidéo

Dans le champ

Hébergeur

, choisissez

Vimeo

Ce qui donne :

Code BBCODE :

[vimeo=800,450]https://vimeo.com/1084537[/vimeo]

Résultat :

Autres hébergeurs vidéos

De nouveaux hébergeurs émergent dans la sphère vidéo ludique sur la toile, Peertube, Odysee, Twitch, etc, mais ne sont pas accessibles via le bbcode.
Cependant certains nouveaux hébergeurs sont déjà intégrés dans les modules Media et Video [insérer lien vers téléchargement]

Faire un tableau en BBCode

Thu, 20 Dec 2018 12:27:25 +0100

Depuis PHPBoost 2.0 il est possible de faire des tableaux en BBCode.

Cette nouvelle balise supporte les imbrications infinies et elle permet une personnalisation presque totale puisqu'elle permet de définir au tableau des propriétés graphiques en CSS.

Introduction

La création d'un tableau n'est pas une opération simple à comprendre. La balise table de PHPBoost suit la même logique que la création de tableaux en HTML, seules les balises ne portent pas le même nom.

Pour mieux expliquer cet article va progresser pas à pas avec de nombreux exemples.

Tableau de base

Nous allons faire un tableau qui contient une seule cellule. Voilà le code source :

Tableau de base : une ligne et une colonne

Tableau à une cellule

Code BBCODE :

[table]
    [row]
        [col]
            Tableau à une cellule
        [/col]
    [/row]
[/table]

Explications :

table : marque le début du tableau
row : marque le début d'une ligne du tableau
col : marque une colonne

Il faut comprendre que la construction d'un tableau se fait d'abord selon les lignes, puis pour chaque ligne on définit des colonnes, ce qui définit pour chaque intersection une cellule.

Faisons maintenant un tableau à deux cellules sur la même ligne :

Tableau de base : une ligne et deux colonnes

cellule de gauche

cellule de droite

Code BBCODE :

[table]
    [row]
        [col]
            Cellule de gauche
        [/col]
        [col]
            Cellule de droite
        [/col]
    [/row]
[/table]

Il est donc important de remarquer que pour rajouter une cellule il suffit de rajouter une colonne dans la ligne.

Rajoutons maintenant une deuxième ligne :

Tableau à deux lignes et deux colonnes

Cellule haut gauche	Cellule haut droite
Cellule bas gauche	Cellule bas droite

Code BBCODE :

[table]
    [row]
        [col]
            Cellule haut gauche
        [/col]
        [col]
            Cellule haut droite
        [/col]
    [/row]
    [row]
        [col]
            Cellule bas gauche
        [/col]
        [col]
            Cellule bas droite
        [/col]
    [/row]
[/table]

Pour rajouter une ligne il faut utiliser la balise row et y insérer des cellules.

Il est important de mettre le même nombre de colonnes dans chaque ligne pour ne pas risquer de déformer le tableau. Si vous souhaitez faire des fusions de cellules reportez vous au paragraphe fusions de cellules.

On peut donc grâce à cette balise créer des tableaux avec n'importe quel nombre de cellules.

Fusion de cellules

Nous avons vu qu'il est nécessaire de mettre le même nombre de cellules dans chaque ligne. Voyons maintenant comment fusionner des cellules.

Fusion de colonnes

Pour fusionner deux colonnes horizontalement il faut simplement déclarer une seule des cellules et lui donner l'argument colspan="2" afin de lui faire remarquer que celle déclaration de cellule vaudra pour deux cellules. Voilà un exemple.

Tableau avec cellules fusionnées

Deux cellules fusionnées horizontalement
Cellule bas gauche	Cellule bas droite

Code BBCODE :

[table]
    [row]
        [col colspan="2"]
            Deux cellules fusionnées horizontalement
        [/col]
    [/row]
    [row]
        [col]
            Cellule bas gauche
        [/col]
        [col]
            Cellule bas droite
        [/col]
    [/row]
[/table]

Il est évident que l'on peut fusionner autant de colonnes que l'on veut. Pour cela il faut indiquer dans l'attribut colspan le nombre de cellules à fusionner.

Fusion de lignes

Voyons maintenant comment fusionner deux cellules selon la verticale. La démarche est la même que pour fusionner horizontalement sauf qu'on utilise ici l'attribut rowspan.

Tableau avec cellules fusionnées

Deux cellules fusionnées verticalement	Cellule haut droite
	Cellule bas droite

Code BBCODE :

[table]
    [row]
        [col rowspan="2"]
            Deux cellules fusionnées verticalement
        [/col]
        [col]
            Cellule haut droite
        [/col]
    [/row]
    [row]
        [col]
            Cellule bas droite
        [/col]
    [/row]
[/table]

Fusion horizontale et verticale

Nous pouvons aussi fusionner des cellules à la fois horizontalement et verticalement.

Tableau avec cellules fusionnées

Quatre cellules fusionnées verticalement		Cellule haut droite
Quatre cellules fusionnées verticalement		Cellule milieu droite
Cellule bas gauche	Cellule bas milieu	Cellule bas droite

Code BBCODE :

[table]
    [row]
        [col colspan="2" rowspan="2"]
            Quatre cellules fusionnées verticalement
        [/col]
        [col]
            Cellule haut droite
        [/col]
    [/row]
    [row]    
        [col]
            Cellule milieu droite
        [/col]
    [/row]
    [row]        
        [col]
            Cellule bas gauche
        [/col]
        [col]
            Cellule bas milieu
        [/col]
        [col]
            Cellule bas droite
        [/col]
    [/row]
[/table]

Il est important de respecter l'ordre : d'abord colspan et ensuite rowspan.

Mise en forme avancée

Cellules d'en-tête

Pour distinguer les cellules d'en-tête il existe une balise qui permet de donner un style différent des cellules par défaut ; il permet par exemple de distinguer le libellé d'une colonne et son contenu.

Au lieu d'utiliser la balise col il faut simplement mettre head, son fonctionnement est strictement identique à celui de col, seule l'apparence graphique en sera modifiée.

Voyons un exemple :

Tableau à mise en forme avancée

Légume	Couleur
Carotte	Orange
Radis	Rouge
Salade	Vert
Pomme de terre	Jaune

Code BBCODE :

[table]
    [row]
        [head]
            Légume
        [/head]
        [head]
            Couleur
        [/head]
    [/row]
    [row]
        [col]
            Carotte
        [/col]
        [col]
            Orange
        [/col]
    [/row]
    [row]
        [col]
            Radis
        [/col]
        [col]
            Rouge
        [/col]
    [/row]
    [row]
        [col]
            Salade
        [/col]
        [col]
            Vert
        [/col]
    [/row]
    [row]
        [col]
            Pomme de terre
        [/col]
        [col]
            Jaune
        [/col]
    [/row]
[/table]

Personnalisation du tableau grâce au CSS

Comme précisé en introduction, la balise table permet de donner au tableau son propre CSS.

Personnalisation du tableau en lui-même

Voici comment insérer du CSS pour un tableau.

Code BBCODE :

[table style="css du tableau"]
//Contenu du tableau
[/table]

Voyons maintenant les principales propriétés CSS d'un tableau.

Tout d'abord il faut connaître au minimum la syntaxe du CSS qui est très simple.

Code BBCODE :

propriété 1: valeur; propriété 2 : valeur; propriété 3 : valeur; ...

Propriété	Action	Valeurs
border-collapse	Coller les bordures du tableau entre elles	collapse : les bordures sont collées entre elles (par défaut dans le BBCode PHPBoost) separate : les bordures sont dissociées
border-spacing	Définit l'espace entre les cellules	valeur: en pixels 3px par exemple
margin	Définit les marges	auto : le tableau est centré
width	Définit la largeur du tableau	valeur : en % (50% par exemple): largeur proportionnelle à la place disponible valeur : en pixels (50px par exemple)
height	Définit la hauteur du tableau	valeur : en % (50% par exemple): Hauteur proportionnelle à la place disponible valeur : en pixels (50px par exemple)

Personnalisation des cellules

Vous allez aussi pouvoir personnaliser vos cellules ([col] et [head]) grâce au css. Voici un petit aperçu des possibilités.

Propriété	Action	Valeurs
background	Fond de la cellule	couleur: hexadécimale ou en anglais. url('adresse de l'image') : Image en fond repeat: (repeat-x, repeat-y, repeat, no-repeat) Répétition de l'image de fond. Ex: background:black url('http://www/phpboost.com/image.jpg') repeat-x;
border	Bordure de la cellule	valeur: Largeur de la bordure (solid, dotted, dashed, groove, double, inset, outset, ridge): Type de bordure couleur Ex: border:1px solid black;
width	Définit la largeur de la cellule	valeur: en % (50% par exemple): largeur proportionnelle à la place disponible valeur: en pixels (50px par exemple)
height	Définit la hauteur de la cellule	valeur: en % (50% par exemple): Hauteur proportionnelle à la place disponible valeur: en pixels (50px par exemple)
color	Définit la couleur du texte de la cellule	couleur: hexadécimale ou en anglais
padding	Définit la marge intérieure de la cellule	valeur: en % (50% par exemple): Hauteur proportionnelle à la place disponible valeur: en pixels (50px par exemple)

BBCode

Sun, 20 Aug 2017 13:26:09 +0200

BBCode
Auteur	CrowkaiT
Version actuelle	5.1
Date de sortie	juillet 2007
Compatibilité et téléchargement	PHPBoost 5.1 et PHPBoost 5.0

Module BBCode

Description : Ce module vous permet d'afficher une barre BBCode au dessus des champs texte qui permet de formater votre texte.

Insérer un flux RSS en BBCode

Wed, 07 Oct 2015 13:05:55 +0200

Vous souhaitez afficher sur votre site un flux RSS via le BBCode, c'est maintenant possible et il n'y a rien de plus simple !

Il faut utiliser la balise feed :

Code BBCODE :

[feed]le_nom_du_module[/feed]

Vous avez la possibilité de personnaliser l'affichage :

cat="numéro de la catégorie du flux dans le module"
Pour connaître le numéro de la catégorie du flux, allez dans le module souhaité, allez dans la catégorie souhaitée et cliquez sur cette icone , vous allez être redirigé vers une page avec ce type d'adresse : /syndication/rss/forum/4
Cela correspond au module forum et la catégorie est la n° 4.
Si vous souhaitez afficher tous les flux d'un module, dans ce cas ne mettez pas cat"x"
number="nombre de flux à afficher"

Exemple : afficher les 5 derniers flux du module téléchargement de la catégorie 3

Code BBCODE :

[feed cat="3" number="5"]download[/feed]

Insérer une liste en BBCode

Sat, 25 Aug 2012 11:00:45 +0200

Dans cet article nous allons voir comment créer des listes en langage BBCode.

Liste de base

Pour créer une liste il faut d'abord la déclarer. Pour cela il faut utiliser la balise

Code BBCODE :

[list]

.

Ensuite il faut déclarer chaque élément de la liste en utilisant [*].

Voilà un exemple de liste basique :

élément 1
élément 2
élément 3

dont le code source est :

Code BBCODE :

[list][*]élément 1
[*]élément 2
[*]élément 3[/list]

Liste numérotée

Pour faire une liste numérotée il faut passer l'argument ordered.

Elément 1
Elément 2
Elément 3

Code BBCODE :

[list=ordered]
[*]Elément 1
[*]Elément 2
[*]Elément 3[/list]

Imbrication

Il est possible d'imbriquer les listes.

Elément 1
Elément 2
- Sous liste 1
- Sous liste 2
Elément 3

Code BBCODE :

[list][*]Elément 1
[*]Elément 2
[list][*]Sous liste 1
[*]Sous liste 2[/list]
[*]Elément 3[/list]

Personnalisation supplémentaire

Il est possible de donner un style supplémentaire à chaque liste.

Pour cela il suffit de mettre du CSS.

Voici un exemple :

Elément 1
Elément 2

Code BBCODE :

[list=ordered style="list-style-type: upper-roman;"]
[*]Elément 1
[*]Elément 2[/list]

Vous retrouverez les propriétés CSS disponibles pour les listes dans ce récapitulatif du Site du Zér0 : Propriétés des listes

Wiki

Principales balises BBCode

Smileys

Mise en forme du texte

Mises en forme de base : gras, italique, souligné et barré

Taille du texte

Couleur

Alignement

Élément flottant

Les titres

titre 1

titre 2

titre 3

titre 4

Les conteneurs

Les styles

Les balises fa (Font Awesome)

Autres balises utiles

Liens

Insérer un lien vers un article

Images

Lightbox

Texte caché

Balises member et moderator

Citation

Version 5.2

Autres versions

Tableaux

Listes

Insérer du code

Préciser le type de code inséré

Afficher les lignes

Multimédia

Vidéos

Youtube

Flash

Son

Insérer des expressions mathématiques

Ancres

Qu'est-ce qu'une ancre?

Créer une ancre

Faire pointer un lien vers une ancre

Flux RSS

Utiliser Latex en BBCode

Introduction

Syntaxe

Exemples

Insérer des vidéos sur PHPBoost

Vidéo personnelle

Utiliser un hébergeur vidéo

Youtube

Dailymotion

Vimeo

Autres hébergeurs vidéos

Faire un tableau en BBCode

Introduction

Tableau de base

Fusion de cellules

Fusion de colonnes

Fusion de lignes

Fusion horizontale et verticale

Mise en forme avancée

Cellules d'en-tête

Personnalisation du tableau grâce au CSS

Personnalisation du tableau en lui-même

Personnalisation des cellules

BBCode

Insérer un flux RSS en BBCode

Insérer une liste en BBCode

Liste de base

Liste numérotée

Imbrication

Personnalisation supplémentaire