A présent, décortiquons chacune des composantes du code afin de vous permettre de personnaliser votre mise en page.


Commençons par la première partie du code :

Code:

<div style="margin: auto; padding: 5px; background: #000000; border: 5px solid #A00000; text-align: center; opacity: 0.9; width: 97%;">

Cette première section de code met en place les variables par défaut de notre mise en page.

La composante "padding : X px" correspond à l'écart entre mon encart titre et la bordure de la mise en page.

La composante "background: #......" définit la couleur du fond de la page, sa valeur étant nulle, elle est ici noire.

La composante suivante :  "border: X px solid #......" définit deux variables, tout d'abord la section X px définit la largeur de la bordure et enfin la section "#......" définit la couleur de la bordure, ici un rouge foncé.

La composante suivante "text-align: center" défini finalement l'alignement de la petite ligne en fin de page.

La composante "opacity: 0.9" modifie l'opacité du fond de notre mise en page, si elle est de 0 alors cette dernière devient invisible.

Enfin la composante "width: 97%" définit la largeur de notre mise en page, une largeur de 97% correspond donc à toute la largeur de notre cadre de réponse, mais vous pouvez aussi le réduire à 60 ou 50% pour vous rapprocher d'une mise en page comme celle de Pan par exemple.


Passons à la deuxième partie de code :

Code:

<div style="TEXT-ALIGN: center" align="center">

Cette partie me permet de définir l'alignement de ma petite ligne blanche en fin de post.


Troisième partie du code :

Code:

<span style="font-size: 12px; line-height: normal">

La composante "font-size: X px" définit la taille de la police de votre texte pour l'ensemble du texte, nous sommes ici en police de taille 12 pixels.

La composante "line-height: normal" paramètre l'espace entre le haut de la bordure et l'encart titre. Ici elle est paramétré par défaut mais si vous voulez plus espacer ce dernier, vous pouvez indiqué un certain espace en nombre de pixels en remplaçant "normal" par "X px". (Ne pas mettre d'espace entre le nombre de pixels et le terme "px".)


Quatrième partie du code :

Code:

<div align="justify">

Ce code permet d'aligner le texte que vous tapez et de le mettre dans notre exemple en "justifié".


Cinquième partie du code :

Code:

<font color="white">

Ce code permet de définir la couleur de votre texte ainsi que celui de la ligne en fin de page. Il est possible aussi de définir la couleur en utilisant le code CSS/HTML du sélecteur de couleur que je vous fournirais plus bas. Pour ne pas avoir à écrire la couleur en lettres mais en utilisant le code "#......" il suffit de supprimer les guillemets et de mettre à la place de "white" notre code couleur #code.


Sixième partie du code :

Code:

<br><br>

Ce code me permet de passer deux lignes entre la bordure supérieure et mon encart titre afin de ne pas avoir à calculer en pixels l'espace de 2 lignes.


Septième partie du code :

Code:

div style="text-align: center; padding-right: 0px; font-family: Trebuchet MS; font-size:2px; border-bottom: 0px; background-color:#A00000;color:Snow;">

La composante "text-align: center" me permet de définir l'alignement de mon titre qui est ici basé sur "centré".

La composante "padding-right: 0px" permet à ceux qui le veulent de décaler leur titre vers la gauche, en créant un espace invisible sur la droite en ajoutant un certain nombre de pixels.

La composante "font-family: Trebuchet MS" définit la police du texte, notre texte est donc tapé ici en police Trebuchet MS.

La composante "font-size: X px" devrait définir la taille du texte mais comme cela est redéfinit plus loin... Je viens de découvrir qu'elle ne joue pas sur mon texte...

La composante "border-bottom: 0px violet" permettrait de faire une ligne sous votre encart titre coloré d'une autre couleur si la taille était de 1px, cela peut être intéressant si vous voulez vous amuser à souligner votre encart d'une autre couleur.(Pour ma part, j'ai décidé de retirer cette variable en n'omettant pas le ";".)

La composante "background-color:#......" définit la couleur de fond de mon encart titre qui est ici rouge foncé.

La composante "color:snow" ne semble pas avoir d'effet... :/ (Variable supprimable à partir du ";" exclu.)


Huitième partie du code :

Code:

<span style="font-size: 18px; line-height: normal">

Ces deux caractéristiques gèrent la taille de votre texte dans l'encart titre pour la première et la taille de l'encart titre qui est ici à une taille par défaut pour la seconde (en remplaçant par un certain nombre de pixels, vous pourrez agrandir le cadre de votre encart titre).


Neuvième partie du code :

Code:

<font color="black">TITRE</font>

Ce code définit la couleur de votre texte dans l'encart titre, le terme "Titre" est à remplacer par votre intitulé de poste.


Dixième partie du code :

Code:

</span></div>

Ce code permet de clore les balises de codage de tous les paramètres précédents sauf celui de la bordure de la mise en page.

Onzième partie "Votre texte" :
C'est ici que vous pouvez taper votre histoire.


Douzième partie du code :

Code:

</div>

Ce code à mettre tout en bas de votre page ferme le cadre de la bordure à la fin de votre histoire et sous votre signature.

Edit : Si vous voulez que votre signature ne soit pas comprise dans la mise en page, il suffit de rajouter à la fin de votre poste un

Code:

</div></div>

supplémentaire.

Bonus, quelques liens utiles :

.Codage des couleurs pour le forum :

Enfin, pour ceux qui souhaitent connaître le code d'une couleur en particulier, voici un site très pratique :
[Vous devez être inscrit et connecté pour voir ce lien]

Ce site comprend deux tableaux de couleurs ainsi qu'un nuancier complet paramétrable.


.Site gratuit offrant des codages déjà réalisé ne nécessitant pas d'inscription :
[Vous devez être inscrit et connecté pour voir ce lien]


.Sites gratuits offrant des codages déjà réalisés et nécessitant d'être inscrit :
[Vous devez être inscrit et connecté pour voir ce lien]




.Crédits :
Un grand merci à Musashi/Jinko pour sa participation (les liens vers les forums de libre service de codage nécessitant et ne nécessitant pas d'inscription).

Un grand merci à tout ceux qui auront eu le courage de lire ce tuto' jusqu'au bout !

Merci pour le tuto ! Je vais faire ma mise en page...