25 août 2010

(OverBlog) Mettre une image à la place du titre du module

Si vous voulez mettre une image à la place du titre du module, vous avez 2 choix :
  • soit mettre la même image dans tous les titres de modules, elle ne devra alors comporter aucun écrit
  • soit mettre une image différente où est inscrit le titre de chaque module et il faudra effacer le titre dans le CSS

Vous déterminez ci-dessous le nom de votre colonne de modules



Ensuite,  dans le CSS : Design > Mode CSS, vous cherchez la ligne correspondante et notez la largeur de la colonne : width. Vous pourrez ainsi créer vos entêtes de module à la bonne largeur.

Une fois hébergée(s), vous pouvez placer votre(vos) entête(s) dans le CSS


La même image dans tous les titres
.box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
Vous personnalisez :
  • la couleur : voir les codes couleur
  • la hauteur : height
  • la largeur : width
Une image différente par titre

Une fois pour toutes, on fait disparaître le titre du module
.box-titre h2 span {display:none}
et on rajoute l'image dans chaque module

le module album photo
.album .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module archives
.archive .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module articles récents
.articlerecent .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module calendrier
.calendrier  .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module catégorie
.categorie  .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module commentaires récents
.commentrecent  .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module communauté
.community .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module images aléatoires
.aleaim .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module liens
.lien .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module newsletter
.newsletter .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module pages
.pages .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module profil
.profil  .box-titre h2 {background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module présentation
.presentation .box-titre h2{background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module rechercher
.recherche .box-titre h2{background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
le module syndication
.w3c .box-titre h2{background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
les modules texte libre
.text  .box-titre h2{background:url(adresse de l'image);background-position:top center;background-repeat:no-repeat;height:42px;width:195px;color:#5C3A5C;}
Article à voir pour différencier les modules Texte Libre

4 commentaires:

  1. rooooh trop joli le site en mauve/violet ^^

    Aujourd'hui, je bidouille avec tes trucs ;-)

    RépondreSupprimer
  2. Bonjour,
    tout d'abord merci beaucoup pour ce jolie tuto! Mais voilà, j'ai un petit problème avec mes images ; elles étaient censées toutes apparaître en .gif mais il n'y a que le titre de module "présentation" qui bouge en tant que .gif ... Si vous avez la solution à mon problème?

    RépondreSupprimer
  3. Bonjour,

    J'ai un peu la même astuce mais pour faire cela sur le titre d'un forum :)

    http://forum.forumactif.com/t346338-placer-une-image-comme-titre-de-forum


    Bonne journée et à bientot :)

    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)