Les Bbcodes - utilisation et effets

[ninouee]

Les Bbcodes - utilisation et effets

Bonsoir les amis!

Comme vous avez dû le remarquer, notre forum utilise des BBCODES unique à lui-même. La raison est que nous ne pouvons pas utiliser le HTML et comme nous pouvons créer nos propres BBCODE avec des effets identiques au HTML nous voila donc avec de nombreux boutons qui nous permettent d'avoir des effets sympathiques pour nos présentations et textes.

Vous trouverez ci dessous leurs fonctions et utilisation. Pour mieux organiser les explications, les BBCODE seront présentés par types.

• Titres et textes pré-formatés
• Tableau
• Flexboxe (présentation en tableau mais responsive)
• Apparence des images
• Divers

[ninouee]

Titres et textes pré-formatés

Il existes plusieurs Bbcodes qui permettent de formater vos textes automatiquement. Le formatage change en fonction du thème actif du forum car il est lié au css du thème.

L’intérêt, c’est qu’en cas de changement de thème, le formatage de vos messages sera automatiquement modifié sans que vous ayez à les modifier manuellement.

Grand titre

• Nom BBCODE : T1
• Code:

  Code : Tout sélectionner

  [T1]Texte à insérer ici.[/T1]

• Effet:
  Texte à insérer ici.

Titre moyen

• Nom BBCODE : T2
• Code:

  Code : Tout sélectionner

  [T2]Texte à insérer ici.[/T2]

• Effet: Texte à insérer ici.

Petit titre
Il est aussi utilisé pour les mots important, ou les différents éléments d’une liste.

• Nom BBCODE : TB
• Code:

  Code : Tout sélectionner

  [TB] Texte à insérer ici.[/TB]

• Effet: Texte à insérer ici.

Texte forum

Ce BBCODE est uniquement utilisé pour la mise en forme du texte dans les présentations de forums car il permet d’unifier la police et la hauteur du texte avec son overflow automatique et l’ascenseur intégré.

• Nom BBCODE : TF
• Code:

  Code : Tout sélectionner

  [TF] Lorem ipsum dolor sit amet. Ex soluta internos aut maxime veniam eos adipisci eaque vel nihil fugiat ut quam eaque et unde consequuntur est libero iste. Est atque inventore cum possimus consequatur sit necessitatibus nulla non adipisci deleniti id rerum error ea internos ullam eos provident accusantium. Rem obcaecati rerum aut mollitia cupiditate eos totam soluta ea nulla provident in enim dicta aut voluptatem delectus At corporis repudiandae. Hic dolorem fugiat et itaque omnis aut ipsam ducimus ea libero distinctio. Et necessitatibus sunt aut delectus error aut molestiae reprehenderit aut placeat tenetur et tempora quod ea voluptatem distinctio eum eaque debitis. Et quis omnis ut facere neque nam dolore sint sit galisum eaque. Et animi atque et molestiae enim qui sint doloremque et corrupti alias ut commodi iste. Id quasi quis sed veritatis dolorem id quia Quis in dolores quaerat ad excepturi fugit cum quis alias id voluptatum magnam. Ea quasi inventore ut quia internos ut magni amet deserunt autem.[/TF]

• Effet:
  Lorem ipsum dolor sit amet. Ex soluta internos aut maxime veniam eos adipisci eaque vel nihil fugiat ut quam eaque et unde consequuntur est libero iste. Est atque inventore cum possimus consequatur sit necessitatibus nulla non adipisci deleniti id rerum error ea internos ullam eos provident accusantium. Rem obcaecati rerum aut mollitia cupiditate eos totam soluta ea nulla provident in enim dicta aut voluptatem delectus At corporis repudiandae. Hic dolorem fugiat et itaque omnis aut ipsam ducimus ea libero distinctio. Et necessitatibus sunt aut delectus error aut molestiae reprehenderit aut placeat tenetur et tempora quod ea voluptatem distinctio eum eaque debitis. Et quis omnis ut facere neque nam dolore sint sit galisum eaque. Et animi atque et molestiae enim qui sint doloremque et corrupti alias ut commodi iste. Id quasi quis sed veritatis dolorem id quia Quis in dolores quaerat ad excepturi fugit cum quis alias id voluptatum magnam. Ea quasi inventore ut quia internos ut magni amet deserunt autem.

[ninouee]

Tableau

Si vous avez besoin de faire un tableau il vous faudra assembler 3 BBCODES disponibles sur le forum.

Evitez d'utiliser ces codes pour des présentations de textes car ils ne s'adaptent pas à vos écrans. C'est à dire qu'ils ne sont pas responsifs. Il est préférable d'utiliser les codes flexboxes.

une colone

deux colonnes

Code pour créer le tableau

• Nom BBCODE : table
• Utilité: Il délimite le tableau.
• Code:

  Code : Tout sélectionner

  [table=][/table]

• Nom BBCODE : tr
• Utilité: Il délimite une ligne.
• Code:

  Code : Tout sélectionner

  [tr=][/tr]

• Nom BBCODE : td
• Utilité: Il créé une colonne.
• Code:

  Code : Tout sélectionner

  [td=][/td]

Monter un tableau

Créer un tableau est assez compliqué car il faut toujours avoir le même nombre de colonne dans chaque lignes. Le plus simple est de faire un exemple.

Code : Tout sélectionner

[table=][tr=][td=border: 1px solid #000000;]une colonne[/td][td=border: 1px solid #000000;]deux colonnes[/td][/tr][/table]

une colonne

deux colonnes

Nous avons un tableau avec une ligne et 2 colonnes. Pour qu'il y ait une bordure le css a été ajouté à chaque BBCODE qui contient du texte.

Le tableau est construit ainsi: Un tableau qui contient une ligne dans laquelle on a deux colonnes.
A la seconde ligne, il faudra mettre le même nombre de colonnes. Nous n'avons pas de code pour fusionner.
Voila le même tableau avec une ligne de plus.

Code : Tout sélectionner

[table=][tr=][td=border: 1px solid #000000;]une colonne[/td][td=border: 1px solid #000000;]deux colonnes[/td][/tr]
[tr=][td=border: 1px solid #000000;]une colonne, ligne n°2[/td][td=border: 1px solid #000000;]deux colonnes, ligne n°2[/td][/tr][/table]

une colonne	deux colonnes
une colonne, ligne n°2	deux colonnes, ligne n°2

Vous pouvez ajouter du CSS après le symbole "=". Maintenant c'est à vous de jouer.

[ninouee]

Flexboxe

Ce code permet de faire des présentations qui s'adaptent à votre écran. C'est à dire que le bloc ira à droit ou sous le bloc suivant en fonction de la place qu'il aura.

Le flexboxe fonctionne en 2 codes: un code qui délimite la flexboxe et un second qui créé les différents blocs.

Le formatage de la flexboxe est liée au thème du forum. Cependant, vous pouvez formater le contenu comme vous voulez.

Les codes

• Nom BBCODE : flex
• Utilité: Il délimite la flexboxe.
• Code:

  Code : Tout sélectionner

  [FLEX][/FLEX]

• Nom BBCODE : flexb
• Utilité: Il délimite ce que contient le bloc dans la flexboxe.
• Code:

  Code : Tout sélectionner

  [FLEXB][/FLEXB]

Fonctionnement
Comment ça marche? Pour une fois c'est très simple et le mieux est de vous le montrer!

Code : Tout sélectionner

[FLEX]
[FLEXB]Bloc 1[/FLEXB]

[FLEXB]Bloc 2[/FLEXB]

[FLEXB]Bloc 3[/FLEXB]
[/FLEX]

Bloc 1

Bloc 2

Bloc 3

Astuce présentation coulissante

Un code a été spécialement créé pour flexboxe afin d'avoir une image animée qui masque un texte. Il s'agit du BBCODE "FD". Voila le fonctionnement.

Code : Tout sélectionner

[FLEX][FLEXB][FD=http://ddstv.fr/galerie/albums/userpics/10001/Planete320-001.jpg]
Texte caché sous l'image.[/FD][/FLEXB]

[FLEXB]Bloc N°2

Attention pour que l'image soit belle elle doit être d'un format d'au moins 400x640 px. Si elle est plus grande. Le code la redimensionnera automatiquement.[/FLEXB][/FLEX]

Texte caché sous l'image.

Bloc N°2

Attention pour que l'image soit belle elle doit être d'un format d'au moins 400x640 px. Si elle est plus grande. Le code la redimensionnera automatiquement.

[ninouee]

Apparence des images

Modifier la taille d'une image
En replaçant le BBCODE [ img ] par [ resize ] vous pouvez changer la taille de l'image que vous voulez afficher.

Image normale :


Image réduite à 100 px de largeur:


Fonctionnement du BBCODE:

Code : Tout sélectionner

[resize=largeur désirée sans le PX]adresse de ton image[/resize]

Mettre une image en lettrine
Grace au BBCODE [ style ] vous pouvez intégrer du CSS dans vos messages dont voici un exemple.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
More

Le code utilisé est le suivant:

Code : Tout sélectionner

[style=width:85px;  float:left;padding:2px;][img]https://thumbs.gfycat.com/SmoothWelloffBlackbird-max-1mb.gif[/img][/style]

[ninouee]

Divers

Ifram

Le code html ifram est très utilisé pour partager les fiches de publicités, partenariats et nouvelles.
Le code dans sa forme html ne fonctionne pas comme vous pouvez le voir ici :
<iframe src="votre adresse" width="100%" height="820px" border="0" frameborder="0" ></iframe>

Toutefois il a été remplacé par un BBCODE qui a les mêmes effets :

Code : Tout sélectionner

[center][iframe=650,850]Votre adresse[/iframe][/center]

Résultat :