21 août 2010

(OverBlog) Modifier les modules

Nous allons modifier le design de tous les modules à l'identique : police, puces, 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 titres
.box-titre h2 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Une astuce pour faire clignoter les titres des modules sous FireFox
.box-titre h2 { text-decoration:blink; }
Les liens
.box-content a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Les contenus
.box-content {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 avec certains CSS qu'il soit impossible de rajouter une puce
.box-content 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
Il peut arriver que la puce soit dans la marge et donc invisible, il faut alors rajouter une marge à gauche
.box-content li {margin-left:15px;}

MODIFICATION DES FONDS

Un fond dans les modules en entier
.box {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 les titres
.box-titre 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 les contenus
.box-content{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 pied de module (certains CSS en ont un)
.box-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;}
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 tous les modules
.box {border:solid 1px #D8D7D7}
Pour encadrer les titres
.box-titre h2 {border:solid 1px #D8D7D7}
Pour encadrer les contenus
.box-content {border:solid 1px #D8D7D7}
Pour encadrer les images
.box-content img {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

17 commentaires:

  1. Bonjour
    je viens d'ouvrir mon blog sur OB ......concernant le module texte libre qui se trouve en bas de ma page d'accueil je ne sais pas ou changer la couleur de police ..actuellement elle est rose et on ne voit pas le texte qui se mélange au fond....mais je ne comprends pas pourquoi quand j'ajoute un module texte libre à droite la couleur de police n'est pas rose mais blanche
    Merci pour l'aide et bravo pour tous ces conseils

    RépondreSupprimer
  2. Bonjour Lady C :) c'est un cas particulier. C'est en fait, le pied de page.
    Rajoute tout en bas du CSS :
    #footer {color:white;}
    A titre indicatif, un module Texte Libre placé :
    - tout en haut, devient une entête
    - au-dessus de l'article, un module Accueil

    RépondreSupprimer
  3. C'est parfait....
    J'aurais surement plein d'autres questions à poser j'essaierais de les poser dans les bonnes catégories mais avant je lirais bien tout ton blog......
    Merci pour ton aide

    RépondreSupprimer
  4. Bonjour Annak
    je n'arrive pas à changer la taille et la couleur de police des liens dans tous les modules ....j'ai essayé par les liens .box-content a et par le contenu .box-content mais apparemment rien ne change....je dois encore faire une erreur mais ou??
    Merci pour ton aide et ton gentil commentaire

    RépondreSupprimer
  5. Bonjour Lady C :)
    Parfois, je ne sais pour quelle raison, il faut forcer la commande, et c'est ton cas.
    Donc actuellement, tu as
    a {text-decoration: none; color:#ae4189; font-size:100%;}
    Il faut rajouter !important
    Ainsi :
    a {text-decoration: none; color:#ae4189!important; font-size:100%;}
    J'ai testé sur ton blog et les liens sont devenus fuschia.

    PS : J'ai mis ton blog en blogroll, tant je suis curieuse de connaître la suite de tes péripéties :)

    RépondreSupprimer
  6. Bonjour AnnaK
    Petite question concernant les modules que je n'arrive pas à modifier. J'aimerais si cela est possible avoir une image avec le titre du module à la place de l'écriture classique. Malheureusement quand je fais la modif indiquée si dessus, cela ne fonctionne pas, j'ai toujours mon écriture et pas mon image... Toutefois j'arrive quand même à changer la couleur du background. Alors vraiment je ne comprends pas. J'ai pourtant lu tout les tutos sur le sujets.
    Il s'agit des modules profil, calendrier, recherche, archives et à venir catégorie. Merci par avance.

    RépondreSupprimer
  7. Bonjour Anna K ! Merci pour ton blog! Tu m'as retiré des épines du pied. C'est clair et concis on ne peut que réussir grâce à toi! Bravoooooooo!!!!!!

    RépondreSupprimer
  8. Lili, je vous que tu as réussi. Bravo :)
    Merci Anonyme :)

    RépondreSupprimer
  9. Bonjour, j'essaie en vain d'enlever la barre grise qui se trouve dessous "ou est ecrit ajouter un com et publie dans :" voire changer la couleur du texte. rien n'y fait quand je prévisualise ca fonctionne quand j'ouvre mon blog non!!! et pourtant je vide le cache Qu'est ce qui se passe ??? ça m'énerve !
    mecepatou
    adresse blog http://mecepatou.over-blog.com/

    RépondreSupprimer
  10. Bonjour Mecepatou :) avant de modifier par le CSS, as-tu essayé par personnalisation ? car les 2 fonctions ne sont pas cumulables.

    RépondreSupprimer
  11. Bonjour, voila je voudrais modifier les titres de mes modules en rose avec une écriture Amandine le problème c'est que je n'y parvient pas! je l'ai centré, je l'ai fait clignoter (mais maintenant il ne clignote plus) mais impossible de changer la couleur et la police, de plus j ai la ligne h2 la ligne titre mais pa la ligne titre h2. Voila comment j ai procédé:

    .box {margin:10px; padding:10px; margin-bottom: 25px;}
    .box a {color: #7D807A; text-decoration: none;}
    .box a:hover {text-decoration: none; color: #AAA;}
    .box h2 { color: pink ; font-size: 25px; font-weight: bold; font-style: none; text-align: center; text-decoration: blink; }
    .box-titre { padding:10px; }

    Merci de m' aider. Votre blog est super

    RépondreSupprimer
  12. Bonjour Johanna :)
    Quand une ligne n'est pas présente dans le CSS, il suffit de la rajouter. C'est ce que tu as fait, c'est bon :)

    RépondreSupprimer
  13. Bonjour Annak,
    Merci beaucoup pour toute l'aide que tu apportes.
    Petit à petit, je modifie le design, c'est pas toujours génial, mais on fait avec .....
    Je ne sais pas comment procéder pour enlever le gris qui apparait autour des images, dans les gifs
    lorsque je publie un article.

    J'aimerais également enlever ,le cadre qui entoure la bannière.

    Je te remercie bien sincèrement pour ton aide.

    RépondreSupprimer
  14. Bonjour Margot :) Je trouve déjà ton blog très joli, très féminin.
    Pour résoudre tes problèmes, tu rajoutes tout à la fin du CSS
    #header{border:0px;}
    .contenuArticle img{border:0px;background-color:transparent;}

    RépondreSupprimer
  15. Merci beaucoup pour ton aide Anna, c'est nettement plus beau maintenant.
    Je crois que je vais encore abuser de ton aide, mais, il me faut trouver le bon post pour te poser la question.

    RépondreSupprimer
  16. Bonsoir, je souhaiterai supprimer l'encadrer gris bien autour de ma bannière personnalisée, comment si prendre? merci beaucoup!

    RépondreSupprimer
  17. bonsoir je voudrais mettre des " lignes en côté droit " de l'ensemble des modules ! je n'y arrive pas ! j'ai 1 blog sur la première plateforme . merci pour votre réponse !

    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)