Personnaliser le FOND des Modules
Voici ici à titre d'information comment j'ai procédé pour personnaliser les fonds de mes modules.
- Cela peut être fait soit à l'aide d'une couleur, soit à l'aide d'une image. Dans le cas d'une image qui est plus grande que le module, on peut obtenir des effets différents entre l'un ou l'autre des modules en jouant sur les paramètres : TOP, BOTTOM, LEFT, RIGHT (voyez ce que ça donne sur les miens).
Dans le CSS il faut rajouter ceci aux éléments qui existent déjà dans chaque module :
/* ----------------------- colonne de gauche ------------------ */
#LeftPart {
font-family : "Comic Sans MS", Times New Roman, Helvetica, Arial, sans-serif;
background : transparent url(http://idata.over-blog.com/0/16/31/99/sitdriver.jpg) top;
}
/* ----------------------- colonne de droite -------------------- */
#RightPart {
background : transparent url(http://idata.over-blog.com/0/16/31/99/sitdriver.jpg) top;
}
/* ------------------------ module Présentation ---------------- */
#Presentation {
background : transparent url(http://idata.over-blog.com/0/16/31/99/sitdriver.jpg) no-repeat top left;
}
/* ------------------------ derniers articles ---------------------- */
#ArticleRecent .box-content {
background : transparent url(http://idata.over-blog.com/0/16/31/99/pieddroite.gif) no-repeat bottom left;
padding-bottom : 60px;
}
/* -------------------------- module Categories ----------------- */
#Categorie {
background : transparent url(http://idata.over-blog.com/0/16/31/99/sitdriver.jpg) bottom left;
}
/* -------------------------- module Liens ----------------------- */
#Lien {
background : transparent url(http://idata.over-blog.com/0/16/31/99/sitdriver.jpg) top right ;
}
/* -------------------------- module Archives ------------------- */
#Archive {
background : transparent url(http://idata.over-blog.com/0/16/31/99/sitdriver.jpg) top right;
}
/* ------------------------ Commentaires ----------------------- */
#CommentRecent {
background : url(http://idata.over-blog.com/0/16/31/99/sitdriver.jpg) bottom left ;
}
/* --------------------------- News --------------------------------*/
#Newsletter {
background : transparent url(http://idata.over-blog.com/0/16/31/99/sitdriver.jpg) left;
}
Rappel : liste des modules ici
Et puis si vous souhaitez pour un module :
- placer une couleur (ou une image de fond)
- ET un gif
Il vous faut :
- une image pour le fond
- un gif (sur fond transparent) à placer par-dessus
Et voici le contenu de mon CSS pour ce module SOMMAIRE :
#ArticleRecent {
background : transparent url(http://idata.over-blog.com/0/16/31/99/sitdriver.jpg) no-repeat bottom ;
}
#ArticleRecent .box-content {
background : transparent url(http://idata.over-blog.com/0/16/31/99/pieddroite.gif)
no-repeat bottom left;
padding-bottom : 60px;
}
Les éléments soulignés doivent être remplacés par votre image de fond, et votre gif.
Par ailleurs, le padding-bottom:60px doit être ajusté en fonction de la hauteur de votre gif (pour que le gif n'empiète pas sur la liste des articles)
Je rappelle que l'image de fond peut être placée en utilisant les paramètres BOTTOM, TOP, LEFT, RIGHT