22 août 2010

(OverBlog) Modifier le titre de l'article

Après la date, nous allons modifier le titre de l'article


MODIFICATION DES POLICES

Le titre de l'article
.divTitreArticle {text-align:center;} 
.divTitreArticle .titreArticle{color:#000066;text-decoration:underline;text-decoration:none; font-style: italic}
.titreArticle {font-weight : bold ;font-weight : normal;font-size:130%;   }
Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que
text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police
MODIFICATION DES FONDS

Un fond dans le titre de l'article
.divTitreArticle h2 {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Vous effacez ce qui ne vous convient pas, sachant que
background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas
Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer le titre de l'article
.divTitreArticle h2 {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

QUELQUES PERSONNALISATIONS POSSIBLES

Pour transformer les titres des articles en majuscule
.titreArticle{text-transform:uppercase ;}
Pour faire clignoter les titres des articles (seulement sous FF)
.divTitreArticle .titreArticle{text-decoration:blink;}   
Pour faire scintiller les titres des articles au survol de la souris, vous avez besoin d'un .gif scintillant que vous placerez en fond
.titreArticle:hover { background-image:URL(adresse du gif scintillant);}
Pour modifier la couleur des titres des articles au survol de la souris
.titreArticle:hover {color:red; }

4 commentaires:

  1. Salut ! merci pour tout ces conseils , mais j'ai un souci quand j'encadre mon titre il n'est pas aligner avec l'encadrement de l'article , il doit commencer 0.5 mm apres comment je peux faire pour que ça marche ?

    RépondreSupprimer
  2. Bonjour :) original comme pseudo, j'aime bien.
    Complète ta ligne ainsi
    .divTitreArticle h2 {border:solid 1px #D8D7D7; margin-left:0px;padding-left:10px}
    C'est un problème de marge qui provoque ce décalage.

    RépondreSupprimer
  3. Bonjour Anna K, (merci pour toutes tes infos!)
    Question : peut-on augmenter la chasse du titre ?

    RépondreSupprimer
  4. Mais, où insérer ces codes, dans le code html du blog en question ?

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)