[Astuce] Bien utiliser le BBC Code sur le forum

[Melgrin_le_nain]

Je me permet ce petit sujet pour faire un point sur la mise en forme sur le forum. Le contenu de ce sujet a été rédigé par un utilisateur du forum Galaxys-team.fr du nom d'Obiseb. Je récupère et j'adapte à ce forum

Vous avez tous (ou presque) déjà utilisé ou au moins vu les bouton au dessus de la fenêtre de saisie des message (pas pour les réponses rapides, l'autre la vrai, la lente ^^), mais je vais approfondir un tout petit peu pour ceux qui voudrais faire un tuto ou quelque chose du genre mais pas uniquement.
Le langage utilisé par le forum est le bbcode qui ressemble beaucoup au html pour ceux qui connaissent.

1/ les marqueurs avec bouton
2/ les autres possibilités de mise en forme
3/ trucs et astuces pour faire vos tuto


1/ Les marqueurs avec bouton


Mise en gras : Il suffit de sélectionner votre texte et d'appuyer sur le premier bouton : B

exemple

Code:

[b]exemple[/b]

Italique : Il suffit de sélectionner votre texte et d'appuyer sur le bouton : i

exemple

Code:

[i]exemple[/i]

Souligné : Il suffit de sélectionner votre texte et d'appuyer sur le bouton : u

exemple

Code:

[u]exemple[/u]

Citation : En lisant un message il suffit de cliquer sur le bouton "Citer" correspondant et une réponse sera crée incluant le message. Si vous cliquer sur le bouton "Citer", la citation viens se rajouter au message en cours de rédaction. Il est possible également d'utiliser ce marqueur manuellement pour faire une cicattion extérieur par exemple.... le bouton Quote est là pour cela. Attention aux " " de part et d'autre du nom ils sont indispendables.

exemple

Code:

[quote="Obiseb"]exemple[/quote]

Code : Pour insérer du code dans vos message en tant que texte sans qu'il s'exécute le bouton Code est là pour cela. Il permet également de mettre en valeur le code dans une mise en forme différente du texte pour une meilleur visibilité.

Code:

exemple

Code:

[code]exemple[/code]

Listes : On peut même faire des liste. Pour cela il suffit de mettre chaque élément après une étoile entre crochet et le tout entre 2 marqueur liste. Si on utilise liste = 1 on a des numéro auto devant les différents élements, liste=a on a des lettres. Si je suis pas clair regarder les exemples il le seront plus que moi

• patati
  
• patata
  
• non rien

Code:

[list]
[*]patati
[*]patata
[*]non rien
[/list]

1. patati
   
2. patata
   
3. non rien

Code:

[list=1]
[*]patati
[*]patata
[*]non rien
[/list]

1. patati
   
2. patata
   
3. non rien

Code:

[list=a]
[*]patati
[*]patata
[*]non rien
[/list]

Images : Pour insérer un image il suffit de mettre le liens entre des marqueur "img" grace au bouton du meme nom.

Code:

[img]http://i21.servimg.com/u/f21/14/41/58/29/geek10.jpg[/img]

Liens URL : Pour mettre un liens plusieurs solution soit on colle le liens simplement (éventuellement entre des marqueur "url", mais cela ne change pas grand chose), soit on souhaite mettre un text sur lequel on clique pour y accéder... il suffit de mettre le titre entre les marquer url en indiquant le liens dans le premier avec un = comme dans l'exemple ci dessous. Le bouton URL mettra les marqueur url et /url de part et d'autre de votre section.

exemple

Code:

[url=http://galaxys-team.fr/index.php]exemple[/url]

Taille de la police : Comme la plupart du temps on sélectionne le texte et on choisit dans le nemu déroulant la taille de texte que l'on désire parmis les 5 choix proposés de très petit (7) à très grand(24), la taille normale par défaut correspondant à 12. On peut bien entendu utiliser le menu pour mettre le marqueur et en modifier la valeur comme on le souhaite à la main ensuite.

exemple

Code:

[size=7]exemple[/size]

Couleur de la police : Comme d'hab, on sélectionne on clique sur couleur de la police on choisit et le marqueur apparait. La valeur de la couleur peut être changé à la main comme pour tout les paramètres entre crochet (FFFFFF= noir, 000000=blanc). On peut également indiquer directement le nom de la couleur ... en anglais.
exemple

Code:

[color=#FF00FF]exemple[/color]

exemple

Code:

[color=red]exemple[/color]

Hide : Permet de cacher le texte aux non membres.
Texte caché, vous devez vous enregistrer pour le voir.

Code:

[hide]exemple[/hide]

Spoiler : Permet de cacher un texte au chargement de la page. Il peut être affiché sur simple clic.

Spoiler:

Code:

[spoiler]exemple[/spoiler]

WoW : Permet de linker un item de l'armurerie de World of Warcraft.
Pour cela, récupérez le numéro de l'item sur la page de description. Ici, l'item est sur la page http://eu.battle.net/wow/fr/item/65017
[wow]65017[/wow]

Code:

[wow]65017[/wow]

Vidéo youtube : Simple d'usage il suffit de mettre le numéro de la vidéo youtube, l'erreur courante étant de mettre l'adresse complète (pas besoin du "https://www.youtube.com/watch?v=").

Code:

[flash(425,350)]http://www.youtube.com/v/W6d-6hgPmy8[/flash]

[Melgrin_le_nain]

2/ les autres possibilités de mise en forme


Barrer : Pour barrer un texte lorsque si édite pour rectifier une erreur mais que l'on souhaite garde la trace pour permettre la compréhension des autres messages il suffit de d'utiliser le marqueur S.

exemple

Code:

[strike]exemple[/strike]

Tableaux Le forum nous permet de faire des tableaux pour mieux présenter certaines informations

Je vais commencer par un exemple le plus simple possible (même s'il est moche) :

ZZZ	Titre 1	Titre 2
Ligne 1	1	22
Ligne 2	333	4444

Code:


[table ]
[tr ] [td ]ZZZ[/td] [td ]Titre 1[/td] [td ]Titre 2[/td][/tr]
[tr ] [td ]Ligne 1  [/td] [td ]1[/td] [td ]22[/td][/tr]
[tr ] [td ]Ligne 2  [/td] [td ]333[/td] [td ]4444[/td][/tr]
[/table]


On utilise 3 marqueurs (attention j'utile pour mes explication des <> au lieu des [ ] pour ne pas que ca devient un tableau) :

• <table > qui annonce le début du tableau, et [/table] la fin
  
• <tr > et </tr> dellimite chaque ligne
  
• <td > et </td> entoure le contenu de chaque cellule à l'intérieur des ligne

Les espaces après "table", "td" et "tr" à l'intérieur des crochets sont insdispensable, le code sera recopié tel quel sans être transformé sans ces espaces.


Voici un exemple avec un peu plus de mise en forme :

ZZZ	Titre 1	Titre 2
Ligne 1	1	22
Ligne 2	333	4444

Code:


[table border=5 cellspacing=10 width=280 height=160]
[tr ][td align=center]ZZZ[/td][td align=center]Titre 1[/td][td align=center]Titre 2[/td][/tr]
[tr ][td align=left]Ligne 1[/td][td align=right]1[/td][td align=right]22[/td][/tr]
[tr ][td align=left]Ligne 2[/td][td align=right]333[/td][td align=right]4444[/td][/tr]
[/table]


Signification des différents paramètres :

• border : taille en pixel des bordures
  
• cellspacing : espacement des cellules
  
• width : largeur
  
• height : hauteur
  
• align : alignement (pour les colonnes sont possible, center, right, left )

[Melgrin_le_nain]

3/ Trucs et astuces pour vos tuto et autres messages


Pour tester votre mise en page n'hésitez pas à utiliser le bouton Prévisualisation.


Si vous voulez faire un tuto et que vous n'avez pas le temps de finir mais que vous ne souhaitez pas tout perdre il suffit d'utiliser le bouton Sauvegarder. Vous retrouverez ensuite votre message dans vos brouillons via le panneau d'utilisateur (en haut à gauche). Vous aurez 2 possibilité éditer le brouillon pour le consulter et le modifier, et le charger comme un nouveau message pour pouvoir le mettre en ligne. Si vous le charger vous pourrez le modifier avant l'envoi (ce qui supprime le brouillon) ou le sauvegarder comme un nouveau brouillon.

Pour faire une copie d'écran :

• Le plus simple est d'utiliser la touche Imprime Ecran, qui met dans le presse-papier le contenu du bureau.
  
• Pour les applications plein écran qui n'acceptent pas cela, vous devrez passer par un logiciel tiers et configurer un raccourci clavier

Héberger la copie d'écran : vous pouvez simplement la partager depuis la galerie vers Picasa ou dropbox par exemple et ensuite utiliser un lien privé sans accès à vos galerie pour le forum. Picasa permet de modifier directement en ligne grâce à un bouton modifier lié à picnik (vous pourrez rogner, faire pivoter redimensionner etc ...). Ensuite il n'y a plus qu'a mettre le liens dans un marqueur "img". Le redimensionnement des images est plus que recommandé pour conserver quelque chose de lisibles par tous et éviter d'alourdir le poids de la page pour ceux qui consulte le forum depuis leur téléphone, ou sur un petit écran.


notez que vous pouvez faire un lien sur une image en cumulant les balises IMG et URL :

Code:

[url=http://undeadgeekies.1fr1.net/][img]http://i21.servimg.com/u/f21/14/41/58/29/geek10.jpg[/img][/url]

[Melgrin_le_nain]

4/ Balise Bonus

On termine avec la balise "spécial Léo' " (référence à sa fiche de personnage )



Désolé, c'était plus fort que moi...

[Léo']

On termine avec la balise "spécial Léo' " (référence à sa fiche de personnage )

J'en ai un autre, un peu dans ce goût là :


D'ailleurs pour la peine, j'ai créé une section "tatouages geek".

[Contenu sponsorisé]