22 août 2010

(OverBlog) Modifier les articles

Un article se compose de plusieurs zones :


Nous allons modifier le design de chacune de ces zones : police, puces, background et encadrements.
Important : les modifications opérées sur le contenu de ces zones prendront le pas sur celles ci-dessous. D'autres articles expliquent en détail les modifications du contenu

Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

L'article en entier 
.article {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
.article a{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
.beforeArticle {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le titre
.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%;   }
La partie après l'article
.afterArticle {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
.afterArticle 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
.article_navigation 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
.article 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
.article {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
.beforeArticle {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
.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;}
Un fond dans le contenu de l'article
.contenuArticle {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
.afterArticle {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
.article_navigation {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
.article {border:solid 1px #D8D7D7}
Pour encadrer la zone avant l'article
.beforeArticle {border:solid 1px #D8D7D7}
Pour encadrer le titre
.divTitreArticle h2 {border:solid 1px #D8D7D7}
Pour encadrer le contenu de l'article
.contenuArticle {border:solid 1px #D8D7D7}
Pour encadrer la zone après l'article
.afterArticle {border:solid 1px #D8D7D7}
Pour encadrer la zone de navigation
.article_navigation {border:solid 1px #D8D7D7}
AJOUT DE MARGES
.article { margin-left:-10px; margin-right:-10px;} 
Pour en savoir plus sur les bordures : créer vos encadrements

2 commentaires:

  1. Canelle 56 , http://www.canelle56.fr
    Je viens de changer de Pc pour un mac , Kri m'a configuré mon blog en ecriture Pristina depuis le debut de ce blog , hors lorsque je suis sur le mac , mes articles sont en ecriture verdana (ou comic sans Ms) que je choisis moi-même sur over blog
    j'ai essayer de faire comme tu le dis avec font family , mais ça ne marche pas
    merci pour le conseil

    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)