Faire de beaux titres dans vos messages Bouton_activeFaire de beaux titres dans vos messages Bouton_hoverFaire de beaux titres dans vos messages Fb-hoverFaire de beaux titres dans vos messages Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Faire de beaux titres dans vos messages EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Faire de beaux titres dans vos messages EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Faire de beaux titres dans vos messages EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Faire de beaux titres dans vos messages EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Faire de beaux titres dans vos messages EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Faire de beaux titres dans vos messages EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Faire de beaux titres dans vos messages EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Faire de beaux titres dans vos messages EmptySam 11 Fév 2023, 06:04 par Krager

-17%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS + Cellular 44mm (plusieurs ...
249 € 299 €
Voir le deal

Partagez
 

Faire de beaux titres dans vos messages

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

Féminin Messages : 778



Faire de beaux titres dans vos messages Empty

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   Faire de beaux titres dans vos messages EmptySam 19 Sep 2009, 18:20
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Faire de beaux titres dans vos messages Empty
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
MessageSujet: Re: Faire de beaux titres dans vos messages   Faire de beaux titres dans vos messages EmptyJeu 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 (messages)
» Faire de beaux titres
» Pour faire des beaux titres de sous-forums
» De beaux titres de sous-forums (messages)
» De beaux titres.. sur la page d'accueil seulement (messages)

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 | Signaler un abus | Cookies | Forum gratuit