20 août 2010

(OverBlog) Modifier le module Articles Récents

Nous allons modifier le design du module Articles Récents : 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
.articlerecent .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
.articlerecent a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Liste complète
.articlerecent em {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
.articlerecent 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
.articlerecent li {margin-left:15px;}

MODIFICATION DES FONDS

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

5 commentaires:

  1. hello anna


    petits soucis avc ce module


    sur ma page article
    comme ici

    http://mademoiselle-biotupp.over-blog.com/article-baignade-lac-de-sanguinet-un-des-plus-grands-europe-qualite-de-l-eau-avis-camping-lou-broustaricq-83159589.html


    j' ai mis un module au dessus du menu "articles qui pourraient vous plaire"



    hors qund on va daNS les rubriques ce module se change en module recent et le design chnge


    du coup je me trouve avec un design tres moche et 2 modules articles recents sur la meme page



    question: est il possible via CSS de virer le module recent uniquement qd on est ds les categories ......

    RépondreSupprimer
  2. si non rien à voir mais je suis tombée sous le charme de ce design http://btemplates.com/2011/blogger-template-warm-home/demo/


    et en ce moment on me prete un ordi , impossible de telecharger quoique ce soit ...je sais pas si tu fais tjrs des design sur le blog template mais je reverais d'une adaptation pour ob en 2 colonnes bizzzzz j'esperes que tu vas bien

    RépondreSupprimer
  3. Bonjour Anna,
    J'ai suivi tes conseils pour insérer une image dans le titre du module Articles récents
    .articlerecent .box-titre h2{background-image: url(http://idata.over-blog.com/2/93/10/81/Logos/images-design/g3012.png);background-repeat:no-repeat;background-position:left;background-attachment:fixed;}
    J'ai aussi tenté en remplaçant articlerecent par #cl_1_0 .box4 .box-titre
    mais cela ne fonctionne pas
    L'image est de même gabarit que celle du module "Résultats"
    Merci pour ton aide si tu peux
    Claire

    RépondreSupprimer
    Réponses
    1. J'ai oublié de te préciser que ce module n'est pas sur la page d'accueil mais dans les articles

      Supprimer
    2. suite message SCCT
      Je n'avais pas cocher "m'informer"
      Désolée pour cette erreur
      Claire

      Supprimer

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)