Que ce soit du style, ou des class les deux méthodes sont fonctionnelles, ça ne peu que marcher, ce champ accepte le HTML, donc il est interprété comme tel, et le template additional.css est fonctionnelle sur toutes les pages de vBulletin, c'est d'ailleurs son rôle.
Pour ce qui est de l'ajout du style dans la partie HTML bien que possible, selon le rendu désiré, il est préférable de passé directement par une class, pour trois raisons, la première travaillé plus aisément son CSS, la deuxième pour la possibilité d'utiliser les stylevar qui dans ce cas est impossible dans le champ directement, car ce champ n'accepte que le HTML et que ce type de variable n'est pas reconnue, tout du moins par défaut sur cette option, et enfin la troisième raison qui est la plus importante dans certains cas, car certains champs sont limité en nombre de caractère, donc afin d'éviter trop de caractères, on utilise une class simple, les templates n'étant pas limité en caractères, on bénéficie de toute notre imagination pour stylisé ce préfixe.
On commence par paramétrer le champs du texte enrichi, par la partie HTML, dans mon exemple mon préfixe est le préfixe "Résolu !", afin qu'il soit plus visible, par rapport au reste du texte (titre du sujet), je vais le mettre en vert, en rapport avec l'image que je vais ajoutée juste devant le texte, je vais aussi peaufiner ma class afin d'avoir un rendu convenable visuellement.
Voici la partie HTML de mon exemple:
Code:
<span class="resolu">Résolu !</span>
Rien de bien sorcier jusqu'à présent, maintenant passons sur la partie CSS, en ajoutent dans le template additional.css la class nommée "resolu", que voici (tout est commenter pour facilité la compréhension des débutant):
Code:
.breadcrumb .navbit.lastnavbit span .resolu, .resolu {
background: transparent url({vb:stylevar imgdir_misc}/ok.png) no-repeat 0 50%; /* image de mon préfixe résolu ! avec son positionnement, ici centré verticalement, et totalement à gauche de la balise SPAN*/
padding: 0 2px 0 12px; /* positionnement de mon préfixe et de ce qu'il l*entoure par rapport à mon image, ici 2px à droite pour espacé le titre, et 12px à gauche pour le positionnement de mon préfixe en texte par rapport à mon image */
color: #9BC55A; /* couleur du texte de mon préfixe, dans ce cas en rapport à la couleur de mon image */
display: inline-block; /* inline-block pour éviter tout saut de ligne du titre, peut-être remplacé par un float:left*/
}
La valeur en noir et gras, pointe le dossier MISC du style visé par cette class, on place donc notre image, qui dans mon exemple fait 10x10 (px), si on désire avoir une image à droite au lieu de la gauche, on change la valeur en vert et gras, par un "100% 50%" (sans les guillemets), sans oublier de remplacer la valeur en rouge et gras par cela "0 12px 0 2px", et voila on à ce qu'on désire et le style modifiable rapidement, et adaptable rapidement à tous les style avec leurs propres couleur de texte et image. La valeur en orange est le nom de la class visant ce préfixe "Résolu !".
Si l'image est plus grosse, ce que je déconseille afin d'avoir un rendu propre, il suffit de modifier les valeurs haute et basse du padding, et voir ajouter par un line-height par exemple, il est possible qu'il faille modifié dans élément par contre, pour un meilleur ajustement.
Voici deux capture, une avec l'image à gauche, l'autre avec l'image à droite.
Image à gauche:
19-05-2013_01.png
Image à droite:
19-05-2013_02.png
Bien entendu, il est possible de stylisé de façon plus poussé le texte, avec le CCS3.
Bonne installation.
- - - Mise à jour - - -
J'ai édité ma réponse précédente, car j'avais pas remarquer que sur certaines pages, le préfixe était déjà inclus dans une balise SPAN, et utilisant une balise P, cela n'était pas correct pour les normes actuelles du W3C, je l'ai donc remplacé par une SPAN, cela m'a aussi permis de voir que dans la page Showthread, la class n'était pas interprété convenablement, car une autre class prenait l*ascendant dessus, j'ai donc ajouté au nom de la class "resolu" un chemin de class pointent précisément sur la class "resolu".