[Obiseb]

Je me permet ce petit sujet pour faire un point sur la mise en forme sur le 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 : Tout sélectionner

[b]exemple[/b]

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

exemple

Code : Tout sélectionner

[i]exemple[/i]

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

exemple

Code : Tout sélectionner

[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 : Tout sélectionner

[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 : Tout sélectionner

exemple

Code : Tout sélectionner

[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 : Tout sélectionner

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

1. patati
2. patata
3. non rien

Code : Tout sélectionner

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

1. patati
2. patata
3. non rien

Code : Tout sélectionner

[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 : Tout sélectionner

[img]http://galaxys-team.fr/styles/proFormell/imageset/logogalaxysteam-2011l-25993da.png[/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 : Tout sélectionner

[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 (50) à très grand(200), la taille normale par défaut correspondant à 100. 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 : Tout sélectionner

[size=50]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 : Tout sélectionner

[color=#FF00FF]exemple[/color]

exemple

Code : Tout sélectionner

[color=red]exemple[/color]

Hide : Permet de cacher le texte aux non membres.

Vous devez vous enregistrer pour voir le texte.

Code : Tout sélectionner

[hide]exemple[/hide]

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 "http://www.youtube.com/watch?v=").

Code : Tout sélectionner

[youtube]W6d-6hgPmy8[/youtube]

Il est aussi possible de faire démarrer la vidéo à un endroit précis, il suffit pour cela d'ajouter =nombre_de_secondes à la balise youtube.
Voici ce que cela donne avec le même exemple que précédemment, mais qui démarre à la 20ème seconde :

Code : Tout sélectionner

[youtube=20]W6d-6hgPmy8[/youtube]

Attention, cela ne marche que sur PC...

[Obiseb]

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 : Tout sélectionner

[s]exemple[/s]

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 : Tout sélectionner

[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'utilise 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 indispensable, 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 : Tout sélectionner

[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 (en valeur absolue ou en %)
• height : hauteur
• align : alignement (pour les colonnes sont possible, center, right, left )
• bgcolor=#0000FF : couleur du fond (background color pour les anglophones), à utiliser avec tr ou td
• colspan=x : fonction avec le marquer td pour crée une cellule fusionnée de x colonnes de large
• rowspan=x : idem pour crée une cellule fusionnée sur plusieurs lignes

Paragraphes

Le marquer P permet de mette en forme un paragraphe comme avec le <p> html (fonctions de base uniquement, pas de feuilles de styles). Chaque paragraphe étant suivis retour chariot.
Attention pour être reconnu sans paramètres il ne faut pas oublier l'espace après le P contrairement aux autres marqueurs que j'ai présenté ici. Vous noterez également que la taille par défaut du texte en utilisant le marqueur P est légèrement plus grande que celle par défaut, si besoin vous pouvez uniformiser avec le marqueur de taille de police expliqué plus haut (size).

Code : Tout sélectionner


[p align=left]gauche[/p]
[p align=center]centré[/p]
[p align=justify]Justifié[/p]
[p align=right]droite[/p]
[p]test sans espace[/p]
[p ]test avec espace[/p]



gauche

centré

Justifié

droite

[p]test sans espace[/p]

test avec espace

Spoiler : permet d'afficher ou de cacher à volonté un pavé de texte ou une succession d'images.

Code : Tout sélectionner

[spoiler]bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla [/spoiler]

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Texte masqué : Afficher tout le texte

[Obiseb]

3/ Trucs et astuces pour vos tuto et autres messages


Pour tester votre mise en page n'hésitez pas à utiliser le bouton Aperçu.


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.

Copier une mise en forme :
Vous avez vu une mise en forme qui vous plait et vous souhaitez comprendre comme la personne a fait ? Pour voir le code du message un truc tout simple : cliquer sur le bouton citation du message qui vous intéresse et regarde le code dans la citation du message qui a été crée pour comprendre et apprendre à en faire autant .


Pour faire une copie d'écran :

• Avec un firmware froyo vous aurez la combinaison de touche Retour(maintenir appuyé)+Accueil qui prend une photo de ce que vous avez à l'écran.
• Pour les appli qui réagissent trop vite à la touche retour ou les anciens firmware => l'appli ShootMe (téléphone rooté) est faite pour vous

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.


Modules complémentaires pour faciliter l'usage du BBcode avec Firefox & Chrome

Manudévil nous conseil une extension effectivement pratique pour Firefox et son équivalent pour Chrome. J'ai testé et adopté cette extension sous Firefox, elle ajoute des options dans le menu contextuel. Exemple d'usage : sélectionner du texte + bouton droit pour le menu et cliquer sur bbcodextra/gras par exemple. Tout les marqueur ne sont pas géré, mais il est possible de rajouter ceux que l'on veut (j'ai rajouté le marqueur S qui manquais pour le texte barré par exemple).

Si vous utilisez Firefox, je ne saurais trop vous conseillers cette extension très très pratique : BBcodExtra
--> https://addons.mozilla.org/en-us/firefo ... bcodextra/

On gagne un de ces temps, avec ça...

Pour Chrome, j'ai trouvé Bolder : https://chrome.google.com/webstore/deta ... aophaeodlp
Nettement moins performant que BBcodExtra, mais il aide un peu...

[leloinadrass]

Plop !

Merci beaucoup pour ce tuto, notamment la partie sur les tableaux en BBC, ça m'a bien aidé pour le test des GunBros

[dickHead]

Un tuto complet qui, je pense, sera très pratique pour les nouveaux sur le forum comme pour les anciens Merci !

[franck_29]

Excellent tuto;)
pour les férus de html, le tag [ p ][ /p] a été introduit, il permet d'utiliser quelques styles de base, mais pas tous ... en particulier les styles CSS ne fonctionnent pas:-(
Exemple dans le test du HTC INCREDIBLE S (en rubrique "les autres smartphones passés au crible de la galaxys-team" )

Exemple de code:

Code : Tout sélectionner

 
[p align=justify][size=90]

[manudevil]

Si vous utilisez Firefox, je ne saurais trop vous conseillers cette extension très très pratique : BBcodExtra
--> https://addons.mozilla.org/en-us/firefo ... bcodextra/

On gagne un de ces temps, avec ça...

[leloinadrass]

Merci bien, je teste

Enfin, dès que j'aurais trouvé une équivalence chez Chrome T_T (Réalisation a posteriori).

[Atila]

je ne sais pas quoi dire

à c'est cool ça marche bon et bien merci pour ce tuto qui m'aura permis de connaître certaines choses que je savait pas du tout merci merci

[Obiseb]

Merci de l'info, je vais essayer de tester sur mon système perso et probablement d'intégrer le liens et quelques brèves explications le cas échéant dans la 3ième parties traitant des trucs et astuces pour aller plus loin.