Bonjour !
En HTML, pour faire un titre sans se compliquer la vie, il existe une série de balises toutes simples :
<h1>
,
<h2>
,
<h3>
,
<h4>
,
<h5>
et
<h6>
. Rien ne vous empêche de les utiliser dans vos messages, mais un problème se pose : par défaut, elles sont moches. Alors comment leur donner une petite mise en forme originale ? Et surtout, comment faire pour que cette mise en forme se limite aux messages et pas à toutes les balises
<hx>
utilisées sur le reste du forum (titre des catégories, de forums, de sujets, etc...) ?
C'est en réalité tout simple (à condition d'avoir quelques bases en CSS tout de même !). Dans un premier temps il vous faut savoir que vos messages portent tous la classe
.postbody
. Il vous suffit donc de dire en CSS "
je veux mettre en forme tous les titres qui se trouvent à l'intérieur d'un bloc de classe .postbody
". Ce qui se fait très simplement en écrivant
.postbody hx
(x étant le niveau du titre, de 1 à 6, le titre h1 étant le plus important et le titre h6 le moins important).
Par exemple :
- Code:
-
.postbody h1 {
margin:0; /* pour supprimer les marges automatiques des balises de titre */
font-family: impact, serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser <code>serif</code> à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
font-size: 110%; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
text-transform: uppercase; /* Soyons fou, écrivons le titre en majuscules ! ^^ */
background-image: url("ADRESSE DE L'IMAGE"); /* Et pourquoi ne pas mettre une petite image de fond ? ça décore, ça fait sympa... xD */
border-bottom: 1px dashed #COULEUR; /* ça, c'est le "soulignement" du titre. Si vous voulez que ce soit un trait plein, remplacez "dashed" par "solid". Pour un trait en pointillé, c'est "dotted". Pour aucun trait du tout, c'est "j'efface la ligne". */
color: #COULEUR; /* Couleur de la police ^^ */
text-align: center; /* C'est la classe pour un titre centré, mais on peut l'aligner à droite (right) ou à gauche (left). */
border-left: 2px solid #COULEUR; /* ça, c'est pour faire les petites barres sur le côté du titre... Pour les faire plus large, il suffit de mettre 3px, 4px ou plus à la place de "1px" */
border-right: 2px solid #COULEUR;
}
Tout est expliqué dans le code ^^ , les explications ne gêneront pas si vous copiez/collez le code, donc vous pouvez les laisser (ou les retirer si elles vous gênent =p).
Vous pouvez bien sûr effacer une ligne de ce code si elle nous vous intéresse pas, par exemple celle de l'image de fond ou bien du soulignement ou de la police... ça ne fait pas "foirer" le code. Vous pouvez aussi rajouter des informations (ligne au-dessus, "marge" etc.).
Une fois que vous avez réglé tout ce qui est à régler (les couleurs, les images, la taille, la police etc.), il ne vous reste plus qu'à insérer ce code dans votre feuille CSS ! Pour cela, rendez-vous dans votre Panneau d'Administration, dans l'onglet
Affichage, puis dans
Images et Couleurs » Couleurs et cliquez sur l'onglet
Feuille de style CSS pour accéder à la feuille de style de votre forum. Collez-y votre code et enregistrez vos modifications.
Pour vous en servir dans vos messages, vous pouvez faire comme ceci :
- Code:
-
<h1>Votre Titre</h1>
Et théoriquement, votre titre sera bien joliment décoré ! (enfin ça dépend de vos réglages
).
Méthodes additionnelles
Mise en forme des titres de catégories/forums
• Les titres de catégories et de forums utilisent déjà des balises
<h1>
et compagnie. Pour pouvoir leur mettre une mise en forme personnalisée, il vous faudra créer une nouvelle classe à part entière, comme ceci :
- Code:
-
.MonTitre {
/* propriétés de votre titre */
}
Lorsque vous créez (ou modifiez) un forum ou une catégorie dans votre panneau d'administration, entourez le titre par des
<div>
, comme ceci :
- Code:
-
<div class="MonTitre">Votre titre</div>
A noter que à la place de ".MonTitre", vous pouvez mettre n'importe quel mot MAIS n'oubliez surtout pas le point (.) ! Sinon ça ne marche pas.
Mise en forme des titres dans le message d'accueil
Vous pouvez utiliser les balises
<h1>
et compagnie dans votre message d'accueil, mais pour qu'elles soient bien réservées à votre message d'accueil, placez celui-ci dans une
div
possédant une classe qui lui est propre, comme ceci :
- Code:
-
<div class="MessageAccueil">
CONTENU DE VOTRE MESSAGE D'ACCUEIL
</div>
Ensuite dans votre CSS, vous définirez vos titres comme ceci :
- Code:
-
.MessageAccueil h1 {
/* propriété des titres h1 du message d'accueil */
}
Voilà, enjoy