22 août 2010

(OverBlog) Modifier le contenu de l'article

Comme expliqué dans cet article, le contenu de l'article ne concerne pas l'article en entier, mais seulement la zone entre l'article et les tags :


Nous allons modifier le design de cette partie : police, puces, liens, background et encadrements.
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

Les écrits
.contenuArticle {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Les liens
.contenuArticle 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

Il arrive souvent qu'il faille activer les puces dans les articles en ajoutant cette ligne

.contenuArticle 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 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;}
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 le contenu de l'Article
.contenuArticle {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

5 commentaires:

  1. Bonsoir,
    J'ai une autre question ^^' Je suis passée par l'icône recherche mais n'ai pas trouvé.. Est-il possible de passer outre l'impossibilité d'overblog, de mettre un mot de passe sur certains articles ?
    Merci :) Bon we !

    RépondreSupprimer
  2. Bonjour Plume :) si tu es en Privilège et peux donc mettre du javascript, il existe des codes de mot de passe.
    Regarde sur ce site : http://www.thelin.net/laurent/labo/js/password.html

    RépondreSupprimer
  3. Pas encore mais dans quelques temps, je ne suis pas si loin. Merci :)

    RépondreSupprimer
  4. bonjour, sur mon blog :
    http://lacaravanedusel.over-blog.com
    je cherche à enlever de toutes les pages les liens "navigation" en bas des articles (précédent, retour accueil, suivant)
    je ne trouve pas la ligne .navigation dans mon CSS... est-ce possible d'enlever ces liens?
    merci!

    RépondreSupprimer
  5. salut, j'ai beau changer la police, cela ne va le prendre en compte. J'ai été dans la css-personnalisation.
    Est ce bien là? Ou me suis-je trompé quelque part?

    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)