1 sept. 2010

(Blogger) Modifier les articles

Nous allons modifier le design des zones principales des messages : police, puces, background et encadrements. D'autres articles expliquent en détail les modifications du contenu de ces zones

Vous devez vous rendre dans votre CSS : Présentation > Modifier le code HTML
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

L'article en entier 
.post-body {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
.post-body a{text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
La date
.date-header {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
La partie avant l'article (publié par Anna K)
.post-header {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le titre
h3.post-title{text-decoration:underline;text-decoration:none; font-style: italic;font-weight : bold ;font-weight : normal;font-size:130%; }
h3.post-title a {color:#000066;  }
La partie après l'article
.post-footer {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
.post-footer a{text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
La navigation
#blog-pager a{text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
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 PUCES
.post li {list-style:none; list-style:disc;list-style:square;list-style:circle;list-style-image : url(adresse de votre puce);}
Vous effacez ce dont vous ne voulez pas, sachant que
list-style : none signifie aucune puce
list-style : disc représente une puce ronde pleine
list-style : square représente un carré plein
list-style : circle représente une puce ronde vide
list-style-image : url(adresse de votre puce) lorsqu'une image remplace la puce. Vous devez la choisir de très petite taille :10*10px maximum
MODIFICATION DES FONDS

Un fond dans l'article en entier
.post-outer {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Un fond dans la partie avant l'article
.post-header {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Un fond dans le titre
h3.post-title {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Un fond dans le contenu de l'article
.post-body {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Un fond dans la partie après l'article
.post-footer {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Un fond dans la zone de navigation
#blog-pager {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 tout l'article
.post-outer  {border:solid 1px #D8D7D7}
Pour encadrer la zone avant l'article
.post-header {border:solid 1px #D8D7D7}
Pour encadrer le titre
h3.post-title {border:solid 1px #D8D7D7}
Pour encadrer le contenu de l'article
.post-body {border:solid 1px #D8D7D7}
Pour encadrer la zone après l'article
.post-footer {border:solid 1px #D8D7D7}
Pour encadrer la zone de navigation
#blog-pager {border:solid 1px #D8D7D7}
AJOUT DE MARGES
.post {margin-left:10px;margin-right:10px
Pour en savoir plus sur les bordures : créer vos encadrements

5 commentaires:

  1. Bonjour!
    Tout le monde me parle de annak! Mais je ne sais pas comment y ajouter mon blog!

    RépondreSupprimer
  2. Bonjour Mohamed :) ce n'est pas un annuaire, ce ne sont que des articles avec des astuces pour personnaliser son blog.

    RépondreSupprimer
  3. Bonjour Anna!
    Je suis en train de relooker mon blog... j'essaie d'isoler les articles (le contenu seulement) avec la formule magique:
    .post-body { border:1px solid #666; -moz-border-radius: 15px; background-color:#f7f7f7;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

    que j'introduis dans la zone "article" de mon CSS, mais.... nada!...

    Me trompe-je quelque part?????

    Merci pour ce super blog, ces super infos, et cette aide inestimable ! J'étais plus à l'aise quand tu étais sur OB car il y avait des visuels explicatifs, c'était très ludique. Ici, c'est un chouilla plus ardu, mais on s'en sort, enfin... on essai, la preuve !

    ^^

    Encore merci pour ton aide!

    Véronique

    RépondreSupprimer
  4. Pardon! encore moi...

    La vraie formule, celle que j'introduis, c'est:

    .post-body { border:1px solid #666; -moz-border-radius: 15px; background-color:#f7f7f7;background-repeat:no-repeat;background-position:center;}

    Bien sûr!

    RépondreSupprimer
  5. Bonjour Véronique :) si c'est pour ton blog sur OB (http://www.veroniquechambeaublog.com/), la formule est
    sans le titre
    .contenuArticle{ border:1px solid #666; -moz-border-radius: 15px; background-color:#f7f7f7;background-repeat:no-repeat;background-position:center;}
    avec le titre
    .article{ border:1px solid #666; -moz-border-radius: 15px; background-color:#f7f7f7;background-repeat:no-repeat;background-position:center;}
    pour ceux de l'accueil
    .extrait{ border:1px solid #666; -moz-border-radius: 15px; background-color:#f7f7f7;background-repeat:no-repeat;background-position:center;}
    Cet article est pour les blogs sur Blogspot, pas sur OB ;)

    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)