Tous les admins peuvent faire la modification, dans la mesure où tout se passe dans la feuille CSS de votre forum, c'est-à-dire dans votre panneau d'administration, dans l'onglet Affichage, menu Images & Couleurs » Couleurs puis Feuille de style CSS.

Un petit mot sur les sélecteurs

Pour commencer, il vous faut connaître les bases pour modifier vos codes. Pour la mise en forme de votre texte, vous devez connaître les classes ou bien les marqueurs HTML (c'est-à-dire le texte entre les balises < et > en HTML) qui sont utilisés pour chaque balise BBCode.

• [b] correspond à la balise HTML <strong>
  
• [i] correspond à la balise HTML <i> (ou <em>)
  
• [u] correspond à la balise HTML <u>
  
• [strike] correspond à la balise HTML <strike>
  
• [code] correspond à la classe CSS .code
  
• [quote] correspond à la classe CSS .quote
  
• [spoiler] correspond à la classe CSS .spoiler
  
• [hr] correspond à la balise HTML <hr />
  
• [list] correspond à la balise HTML <ul>
  
• [list=1] et [list=a] correspondent à la balise HTML <ol>
  
• [*] qui correspond à la balise HTML <li> (élément de liste) et s'associe obligatoirement à [list]

Pour savoir quelle classe ou quelle balise est utilisée pour chaque BBCode, il vous faut regarder le code source ou demander à quelqu'un qui s'y connaît, sur CSSActif par exemple.

Selon les cas, on a une classe ou bien un marqueur HTML (= une balise HTML). Si vous avez quelques bases en CSS, vous savez qu'un sélecteur CSS est soit une classe (précédée par un point), soit un identifiant (précédé par un #), soit un marqueur HTML (précédé par rien du tout), soit une combinaison des uns et des autres ainsi que de sélecteurs un peu plus particuliers, mais on va faire simple pour ce tutoriel.

Retenez juste ce point :
• Si votre BBCode correspond à une balise HTML, le sélecteur CSS associé doit être le nom de cette balise.
• Si votre BBCode correspond à une classe CSS, le sélecteur CSS associé doit être le nom de cette classe, précédé d'un point.

Voici deux exemples d'application :

Code:

u {
/*Propriétés de u*/
}
.code {
/*Propriétés de code*/
}

L’apparence

Pour modifier la mise en forme de vos bbcodes, rien de plus simple ! Il faut connaître la base de départ et la modifier, prenons par exemple la balise <u>, la définition CSS par défaut de cette balise est :

Code:

u {
    text-decoration: underline;
}

On va "surcharger" cette déclaration CSS par défaut en écrivant notre propre version personnalisée. Puisque nous savons qu'il y a un soulignement, si nous voulons le retirer il faut réécrire la même propriété et en changer la valeur (ici underline) par none. Elle aura ainsi la priorité sur la définition par défaut et le soulignement sera supprimé.

Vous pourrez ensuite ajouter vos propres propriétés CSS comme vous l'entendez, comme ceci par exemple :

Code:

u {
  text-decoration: none;
  border-bottom: 3px double #000000;
 }

Vous venez de remplacer le soulignement par défaut par un double soulignement de couleur noire, en utilisant la propriété CSS border-bottom !

Vous pouvez faire pareil pour la classe .code Par exemple, supposons que vous vouliez un trait à gauche de votre code. A ce moment-là vous utilisez la propriété border-left, voici le code :

Code:

.code {
    border-left:3px solid #F50E0E;
 }

Pour la plupart des classes et marqueurs à personnaliser pour le BBCode, les propriétés par défaut sont assez simples à deviner, donc à surcharger, et le reste découlera de vos expériences et essais personnels. Il reste néanmoins quelques petites subtilités que je vais vous détailler ci-après.

1. Le cas des spoilers

En réalité, il y a trois classes CSS pour les spoilers :

• La classe .spoiler (appliquée à un tableau) désigne tout le bloc spoiler, titre et bloc caché compris.
  
• La classe .spoiler_closed désigne la mise en forme du spoiler quand il est fermé (qui apparaît sous la forme d'un bloc "vide")
  
• La classe .spoiler_content désigne la mise en forme du spoiler quand il est ouvert (un bloc avec le texte du spoiler)

A noter que ces deux dernières classes sont bien séparées, donc si vous définissez une apparence pour le spoiler fermé, elle ne sera pas appliquée au spoiler ouvert.

2. Le cas des codes

En plus de la classe .code, il existe aussi une classe .cont_code qui s'applique au conteneur du code. Utile en particulier pour y placer un ascenseur (bien qu'il soit désormais par défaut dans la feuille de styles de base de ForumActif)