C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Effet pour vos catégories
Hier à 20:09 par vaaléeriiee

» Qui Est En Ligne - Utopia
Ven 06 Juil 2018, 23:20 par Vincent

» [RPG] Fiche personnage avec bannière latérale
Ven 29 Juin 2018, 06:27 par Tink

» [phpBB2] Sauvegarde des posts en cours d'écriture
Mar 26 Juin 2018, 02:30 par Laluna

» Apparition progressive du corps du forum
Dim 24 Juin 2018, 10:05 par Jimmy

» Formulaire de connexion rapide amélioré
Dim 24 Juin 2018, 10:03 par Jimmy

» Previsualiser le premier message d'un sujet
Dim 24 Juin 2018, 09:57 par Jimmy

» Trois colonnes avec effet Zoom
Mer 20 Juin 2018, 06:58 par Backflip


Partagez | 
 

Faire de beaux titres dans vos messages

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://tjal.olympe.in/Tjal/index.php
{ Membre actif }
{ Membre actif }

Féminin Messages : 778



Faire de beaux titres dans vos messages


Informations générales

Description :
Dans ce tuto, nous allons apprendre à faire de beaux titres dans vos messages, comme, par exemple, celui de ce tutoriel.

Démo :
Cliquez ici pour l'aperçu

Testé sur :
Non renseigné

Crédits :
Proposé par Johian de M. le 19/09/2009 | Validé par Orange

Mise(s) à jour :
Refonte du tutoriel le 13/08/2012 par 'Christa Lostmindy

Le tutoriel


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 What a Face).

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 ♥️



MessageSujet: Faire de beaux titres dans vos messages   Sam 19 Sep 2009, 18:20
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


Q
Est-ce qu'on peut modifier un titre au survol ?

R
Oui, rajoute :hover après ta classe. Ex :
Code:
.titre:hover {
Les propriétés que tu veux
}


Q
J'ai essayé ce code mais il ne marche pas :
Code:
b {
font-variant: small-caps;
}

R
Il faut mettre celui-ci :
Code:
strong {
font-variant: small-caps;
}


Q
Quelle classe utiliser pour modifier l'italique ?

R
Utilise la class "em".


Q
Comment mettre un texte en italique dans le CSS ?

R
Utiliser "font-style: italic"


Q
Le code marche en page d'accueil mais pas dans les messages, comment ça se fait ?

R
Il faut aller dans le panneau d'administration > Général > Messages et Email > Configuration. Et la tout simplement cocher la case " autoriser le HTML " ^^


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Faire de beaux titres dans vos messages   Jeu 04 Aoû 2011, 05:30
Revenir en haut Aller en bas
 

Faire de beaux titres dans vos messages

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Faire de beaux titres dans vos messages
» Pour faire des beaux titres de sous-forums
» [Phanta] Personnalisation du profil (messages)
» (Résolu) Comment faire apparaitre Aires CC dans le menu Point d'intérêt
» [Léo's tuts] Faire des jolis cadres pour les messages texte

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Les Messages-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit