[Apprenti] Personnalisation des posts dans un forum

Bonjour

Aujourd'hui je vais vous apprendre à personnaliser vos posts sur le forum. Le BBcode des forums est déjà sympa mais plutôt limité, ici je vais vous apprendre à étendre vos possibilités.
Vous allez me dire, c'est un sujet vaste. Il est important de ne pas s'en servir à outrance et dans ce premier tutoriel, je ne vais en présenter que certaines utilisations. Dans le cas de ce forum, cela peut-être utile pour faire une jolie chronique et bien présenter son tutoriel. On ne tape pas, je n'ai pas utilisé cette technique pour ne pas mélanger ce que je vais vous montrer avec des fioritures. L'important, c'est de ne pas en abuser et d'éviter de créer des entorses oculaires à vos lecteurs. Alors allez-y doucement avec les effets et les couleurs ^^

Ce tutoriel va également vous permettre de vous initier au HTML et au CSS pour ceux qui ne connaissent pas. Pour les autres, vous n'avez pas franchement besoin de moi si ce n'est pour utiliser l'idée bien sûr. L'objectif de ce tutoriel n'est PAS de vous apprendre à maîtriser ces langages. Pour l'instant, je vous invite à rendre une petite visite au site du zéro, tout en sachant que je reste disponible pour toute question. Ceci n'est qu'une présentation rapide et simple, qui n'a pas vocation à donner des explications détaillées des balises.
Commençons donc par quelques petites balises pour structurer votre post. Cette liste est non exhaustive et pourra être complétée à l'avenir.

Pour définir un bloc:

Code:

<div> </div>

Pour mettre en valeur:

Code:

<span> </span>

Pour créer des titres de différents niveau:

Code:

<h1> </h1>
<h2> </h2>
<h3> </h3>

Pour mettre du texte (paragraphe):

Code:

<p> </p>

Pour créer un tableau:

Code:

<table> </table>
Ligne: <tr> </tr>
Cellule: <td> </td>

Structure:
<table>
   <tr>
      <td></td>
      <td></td>
   </tr>
   <tr>
      …
   <tr>
</table>

Pour être tout à fait honnête, vous n'irez pas très loin avec ça et ça aura pas forcément une très bonne tête. Notre objetif est de faire quelque chose de joli, donc il va nous falloir styler un peu tout ça. C'est là que les CSS entrent en scène. Là encore je n'ai pas pour objectif de vous apprendre ce langage mais seulement de vous donner un aperçu des possibilités qui s'offrent à vous. Le site du zéro vous donnera des précisions et une liste des attributs et des options possibles.
Je vais vous parler d'attributs et de valeurs. Les styles se définissent sous la forme suivante:
attribut: valeur;

Pour définir la taille d'un bloc, on utilise les attributs width et height, définissant respectivement la largeur et la hauteur. Si ces attributs ne sont pas précisés, le bloc sera à la taille dont il a besoin pour afficher la totalité des élements qu'il contient et de ses limites d'affichage. Etant dans un forum, un bloc sera limité automatiquement par sa largeur. Attention à ne pas mettre de valaurs trop grandes qui déformeraient la page. Les valeurs sont données en pixels (par exemple 100px), auto étant la valeur par défaut.

Code:

width: 100%;
height: 300px;

Pour éviter de tasser nos petites affaires, il nous faudra espacer les différents éléments. Ces attributs comportent quelques subtilités que je ne développe pas ici, vous savez vers où je vais vous rediriger pour avoir des détails … en cas de problème je suis toujours là.
Pour mettre des marges entre les blocs, on utilise margin, avec des valeurs en pixels. Ceci mettra une marge constante tout autour du bloc.
Marge au-dessus du bloc: margin-top
Margin en dessous du bloc: margin-bottom
Margin à gauche: margin-left
Margin à droite: margin-right
C'est logique n'est-ce pas ?
Pour que nos blocs soient aérés, on choisira plutôt des marges internes, définies par l'attribut padding. Il fonctionne exactement comme margin, seul l'effet est différent.

Code:

margin: 10px;
padding: 5px;

Bon c'est bien gentil tout ça, mais si on n'affiche que du texte ça ne sert pas à grand chose à part nous mettre des blancs dans tous les sens. Avec des bordures ce sera plus chouette. L'attribut border s'en chargera et on peut également choisir si on ne veut en mettre qu'à certains endroits du bloc avec top, bottom, right et left, exactement comme pour les marges.
Les caractéristiques de la bordure sont données ainsi: épaisseur style couleur.
L'épaisseur est en pixel, pour un trait fin, on optera pour 1px.
Les styles possibles sont solid, dotted, dashed pour les plus courants (En moins utilisés on a double, groove, ridge, inset et outset. Evidemment ça se teste ^^).
La couleur peut être donnée par son nom anglais (black, red …) ou par son code sous la forme d'un # suivi de six chiffres.

Code:

border: 2px solid #000000;

Pour mettre un fond, on utilise l'attribut background et on donne sa couleur de la même manière que pour la bordure. Nous avons également la possibilité de mettre une image de fond, la valeur de background devenant url('adresse-de-l-image'). Cette dernière possibilité est à utiliser avec parcimonie et attention, cela peut vite devenir encombrant voire carrément horrible si l'image se répète mal ou si elle est mal redimensionnée. J'aurais peut-être l'occasion de revenir sur ce point dans un autre tutoriel, en attendant, je garde toujours la même référence et cherchez des options contenant repeat, tout en sachant que je suis dans le coin en cas de besoin (je me répète mais étant donné le peu d'informations que je donne, je ne veux pas vous donner l'impression que je vous laisse vous dépatouiller)

Code:

background: #123456;
background: url('images/fond.png') no-repeat;

Bon ça nous fait déjà quelques éléments intéressants. Voyons un exemple de ce qu'on peut faire avec tout ça et comment le code s'organise.



Fiou. Et si vous croyez que c'est fini, vous vous trompez. Ce n'est qu'un tout petit début.
Essayons maintenant de donner une bonne tête à notre texte, peu importe qu'il soit dans un span, un paragraphe, un titre ou un tableau ou ce que vous voulez.

Alors déjà on va pouvoir changer de couleur avec l'attribut color. Là c'est comme pour background, soit on met comme valeur la couleur en anglais, soit un code couleur.

Code:

color: #88C700

Exemple :

Texte coloré

On peut créer un petit décalage en début de paragraphe qui ne sera appliqué qu'à la première ligne. Ca peut être très intéressant quand il n'y a qu'une ligne, pour créer des effets de décalage.

Code:

text-indent: 10px;

Exemple :

Texte indenté de 10 pixels

On va également avoir besoin d'un paquet d'attributs qui commencent par font-. Je ne donne que ceux qui sont utilisés régulièrement et que vous serez donc susceptible d'avoir besoin.
font-size: Détermine la taille de la police en pixels
font-family: Donne une liste de polices de caractères, utilisant la première en priorité et passe à la suivante si la première est introuvable et ainsi de suite
font-style: italic ou oblique (je ne vous fais pas de dessin, ça se teste évidemment^^)
font-weight: Modifie l'épaisseur des caractères. Les valeurs possibles sont bold, bolder, lighter et normal par défaut. On peut également mettre des nombres (100, 200, 300 …).
font-variant: La seule possibilité est small-caps (petites majuscules). Sachant qu'il y a normal par défaut et inherit que j'explique juste en-dessous.

Code:

font-size: 14px;
font-family: Helvetica, sans-serif;

Exemple :

Texte taille 14, Helvetica

Ensuite on va passer à des attributs ayant des valeurs plus spécifiques. c'est à dire que la liste des possibilités est clairement déterminée.
Ce genre d'attribut a 'none' comme valeur par défaut et il est possible de choisir 'inherit', ce qui donne au bloc la valeur de l'attribut du bloc parent, c'est à dire celui dans lequel notre bloc actuel est contenu. J'espère que je n'ai perdu personne au passage …

L'attribut text-transform a trois valeurs possibles.
uppercase: Met toutes les lettres en majuscules
lowercase: Met toutes les lettres en minuscules
capitalize: Met des majuscules à chaque début de mot

Code:

text-transform: uppercase;

Exemple :

Texte en majuscules

L'attribut text-decoration a quatre valeurs possibles.
underline: Souligne le texte
overline: Surligne le texte (Créé une ligne au dessus du texte si vous voulez)
line-trough: Raye le texte
blink: Fait clignoter le texte /!\A utiliser avec parcimonie voire carrément pas du tout/!\

Code:

text-decoration: underline;

Exemple :

Texte souligné

L'attribut text-align va nous permettre de déterminer l'alignement du texte (C'est un scoop que je vous sors là !)
Les valeurs possibles sont center, justify (justifié), right et left par défaut.

Code:

text-align: justify;

Exemples d'usages possibles :

Code:

<div style="margin:10px;border-bottom:3px solid #C9B18D">
<span style="color:#C9B18D;text-transform:uppercase;">
[b][size=18]Titre qui a la classe[/size][/b]
</span>
</div>

---------- ---------- ----------

Code:

<div style="float:right;width:300px;margin:10px;padding:0 10px 0 10px;background-color:#EEE;border:1px solid #CCC">
[b][u]Note supplémentaire[/u][/b]
<p>[i]Lorem ipsum dolor sit amet, [...] placerat et eget libero.[/i]</p>
</div>

Super tuto Ill' !
Je pense qu'il va servir à pas mal de monde !

Merci.
Bien sûr, au besoin je suis là, si quelqu'un souhaite faire quelque chose de particulier, je suis là pour aider.

Merci pour le tuto. J'ai lu en diagonal, mais j'aime bien la présentation que tu as faite et c'est vrai que ça serait sympa d'avoir une présentation comme celle-là (ou une autre hein ^^), pour tous les tutos.

Super merci Ill pour le tuto