1 sept. 2010

(Blogger) Modifier les articles

Publié par Libellés : ,
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. mohamed2 septembre 2010 à 13:22

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

    RépondreSupprimer
  2. Annak2 septembre 2010 à 18:13

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

    RépondreSupprimer
  3. Véronique15 janvier 2011 à 10:01

    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. Véronique15 janvier 2011 à 10:03

    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. Annak16 janvier 2011 à 18:37

    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)

Inscription à : Publier les commentaires (Atom)