1 sept. 2010

(Blogger) Modifier les modules

Pour modifier le design de tous les modules à l'identique : police, puces, background et encadrements, vous devez vous rendre dans votre (ou vos) 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

Les titres
.widget h2.title {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
.widget h2.title { text-decoration:blink; }
Les liens
.widget .widget-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
.widget .widget-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
.widget .widget-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

MODIFICATION DES FONDS

Un fond dans les modules en entier
.widget {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
.widget h2.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 les contenus
.widget .widget-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;}
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
.widget {border:solid 1px #D8D7D7}
Pour encadrer les titres
.widget h2.title {border:solid 1px #D8D7D7}
Pour encadrer les contenus
.widget .widget-content {border:solid 1px #D8D7D7}
Pour encadrer les images
.widget .widget-content img {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

4 commentaires:

  1. Bonjour Anna,
    comme je débute en CSS, j'utilise beaucoup ton blog pour avancer, je le trouve très bien fait et ça m'aide énormément. Par contre, il me manque souvent l'image pour illustrer chacune des modifs. ça m'aiderait et d'autres aussi j'imagine.
    Penses-tu que cela soit une possibilité à mettre en oeuvre comme tu les faisais sur ton ancien blog ? Je sais que c'est beaucoup de travail par contre, aussi merci de tous ce que tu mets à notre disposition.

    amicalement
    véronique

    RépondreSupprimer
  2. Bonjour Lutine :) je n'ai pas pu utiliser les images des articles de l'ancien blog car OB l'empêche. Mais c'est vrai que c'est souvent plus parlant que du blabla. Je vais essayer de m'y mettre.
    Merci :)

    RépondreSupprimer
  3. Bonjour Anna,
    Je ne sais pas si je me trouve dans la bonne rubrique ! Je cherche à supprimer le souligné de tous les liens qui se trouvent dans la colonne de gauche de mon blog (ce qui correspond, JE CROIS (!), à la sidebar...) Or, quand je vais ds présentation/modifier le code HTML, nulle part je ne trouve la mention "text-decoration" ??? À quel endroit puis-je ajouter text-decoration : none?
    Merci par avance pour ton aide !

    RépondreSupprimer
  4. Bonjour Leonie,
    Sur Blogger, dans présentation > Modifier le code HTML, à la suite de la ligne
    #sidebar {
    background:url("http://www1.blogblog.com/dots/bg_dots2.gif") 150px -50px;
    padding:40px 10px 15px;
    width:200px;
    width/* */:/**/180px;
    width: /**/180px;
    }
    tu rajoutes
    #sidebar a {text-decoration:none;}
    Ce qui enlèvera tous les liens des modules :)

    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)