21 août 2010

(OverBlog) Modifier le module Catégories

Nous allons modifier le design du module Catégorie : 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

Le titre
.categorie .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 ;}
Les liens
.categorie a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Les numéros
.categorie ul li {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
.categorie  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
.categorie  li {margin-left:15px;}

MODIFICATION DES FONDS

Un fond dans le module en entier
.categorie  {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
.categorie  .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 le contenu
.categorie  .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)
.catégorie .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 tout le module
.categorie  {border:solid 1px #D8D7D7}
Pour encadrer le titre
.categorie  .box-titre h2 {border:solid 1px #D8D7D7}
Pour encadrer le contenu
.categorie  .box-content {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

15 commentaires:

  1. Bonjour,

    suivant vos conseils, je viens de modifier le CSS de mon blog, afin de modifier la police du module catégorie. Quand je prévisualise, aucun souci, les modifs apparaissent bien. Par contre, dès que j'enregistre, rien n'apparait sur le blog.(lesdoigtsdanslepot.fr)

    RépondreSupprimer
  2. (je précise que le site est en construction donc aucun article n'apparait pour le moment).
    Merci beaucoup!

    RépondreSupprimer
  3. Bonjour Mélanie :)
    Tes 2 lignes :
    .categorie .box-titre h2 {text-align : left ; color : black ; font-weight : none ; text-decoration : underline ; font-size : 20px ; font-style : normal ; font-family : Comic Sans MS ;}
    .categorie a {text-align : center ; color : black ; font-weight : normal ; text-decoration : none ; font-size : 16px ; font-style : normal ; font-family : Comic Sans MS ;}
    doivent être collées à la marge de gauche sans retrait devant.
    Et le plus simple est de rajouter les lignes tout à la fin du CSS pour être sûr que ce seront elles qui seront pris en compte.

    RépondreSupprimer
  4. Bonjour!
    merci beaucoup pour la réponse. Du coup, j'ai enfin réussi, et maintenant que je m'attaque aux couleurs des liens, je n'arrive pas à différencier ceux du module catégorie et ceux qui sont dans les articles. Quand je tape la formule a:link {color :....}, ca me l'applique à tout le blog.
    Merci par avance!

    RépondreSupprimer
  5. Bonjour Mélanie :)
    Pour les liens du module catégorie, il faut rajouter dans le CSS :
    .categorie a {color:red;}

    RépondreSupprimer
  6. Merci beaucoup! Décidemment tu es rapide.
    je vais donc m'y atteler de ce pas!
    Bonne journée.

    RépondreSupprimer
  7. Bonjour,
    Je voudrais savoir s'il est possible d'avoir un thème différent par catégorie ; par exemple, un design avec photos de confitures pour une catégorie de recettes de cuisine, etc..
    J'ai beau cherché, je ne trouve pas ce qui veut peut-être dire qu'on ne peut pas le faire ^^
    Merci, et bonnes fêtes de fin d'année :)

    RépondreSupprimer
  8. Bonjour Plume :)
    Il n'est pas possible automatiquement d'avoir un thème différent par catégorie.
    Par contre, cela peut être fait manuellement. C'est du travail.
    Il faudrait un design général basique avec le moins de couleur, de fond, etc possible.
    Ensuite, tu créés un CSS/design pour chaque catégorie et tu l'appelles dans chaque article de cette catégorie.
    Honnêtement, c'est du boulot :(
    Bonnes fêtes à toi aussi.

    RépondreSupprimer
  9. Merci pour ta réponse si rapide :)
    Dans chaque article ? ^^' Je vois l'ampleur du travail, je tenterai ça quand je n'aurai rien d'autre à faire :p
    Le css en question doit-il reprendre l'intégralité du css de base ? Où je peux le faire à la suite du css basique ? Parce qu'overblog bien que relativement libre, bloque tout de même pas mal de choses, notamment ce genre d'accès.. Avec un ftp je peux ajouter tout ce que je veux, mais pas là.. J'ai peut-être plus de chance d'arriver à faire cela avec wordpress ?
    En gros, dois-je avoir plusieurs css ou tout peut se faire dans le même avec ensuite un appel de catégorie comme tu me disais.. ?

    Pardon si je ne suis pas très claire, même si je me débrouille pas trop mal dans ce domaine, je n'ai pas toujours les bons mots, précis, pour me faire comprendre ^^'

    RépondreSupprimer
  10. Bonjour Plume :)
    Tu peux le faire à la suite du CSS basique. Le plus simple est de copier/coller le CSS final dans ton bloc note.
    D'enregistrer :
    nom du fichier : Catégorie1.css
    type de fichier : tous les fichiers.
    Tu sauvegardes ensuite ce fichier sur ArchiveHost.
    Ensuite, dans les articles de la catégorie1, tu colles en HTML, pour appeler ce CSS :
    < link type="text/css" href="adresse du fichier css" rel="stylesheet" >
    (sans espace avant/après les < et > )
    Et le design se modifiera dans cet article. Mais il ne faut pas qu'il apparaisse en page d'accueil, sinon toute la page d'accueil prendra ce design.
    Ce n'est pas hyper compliqué.

    RépondreSupprimer
  11. Merci pour ta réponse ! Je tenterai, ne serait-ce que par curiosité, voir par défi personnel. Pas tout de suite je dois dire, deux jours les mains dans le css, j'ai besoin d'une pause. D'ailleurs je te remercie, c'est grâce à ton site que j'ai réussi à faire passer un thème wordpress sur overblog. Toutes les indications que tu donnes m'ont été vraiment d'une très grande aide :)

    RépondreSupprimer
  12. bonsoir,
    je voudrai savoir ce qu il faut modifier dans le css pour que le module categorie et le module article recent de ce theme (http://www.nirvana-ishaka47.com/) soit comme celui là (file:///C:/Users/Ishaka/Pictures/Nirvana-ishaka47.htm)
    merci d avance

    RépondreSupprimer
  13. coucou ! un grand merci pour tes aides c'est génial, comment fait tu pour gerer la largeur de la section module ainsi que le reste sur le coté? merci !!

    RépondreSupprimer
  14. Bonjour,
    J'ai un blog sur overblog et je voudrais mettre une photo différente sur que chacune de mes catégories (par exemple, un drapeau du Brésil sur la catégorie Brésil, etc). J'ai essayé plein de choses en suivant vos conseils, je n'y suis pas arrivée...et surtout, je ne comprends pas tout ce que vous expliquez!!
    Voici la partie du CSS qui concerne les catégories : je n'arrive pas à voir ce qu'il faut toucher.
    .text li, .lien li, .articlerecent li, .micropayment li, .micropayment li, .commentrecent li, .categorie li {min-height: 20px; background: url(http://fdata.over-blog.net/99/00/00/01/designs/374/dark/pics/li.jpg) no-repeat left; border-bottom: 1px dotted #c1c1c1; padding: 7px 0 3px 15px; line-height: 14px; /line-height: 15px;}
    Si vous pouvez m'aider, ce serait super : je vais finir par jeter mon ordi par la fenêtre!!

    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)