Faire dérouler les modules de votre blog

PRESENTATION:

Suite à la modification de la structure des blogs survenue la semaine dernière, mon dérouleur de modules s'est trouvé ne pas fonctionner sur certains blogs. Les blogs concernés sont ceux qui utilisent les modèles mis à disponibilité le 21 mars 2005.
Donc si votre script de déroulement des modules ne fonctionne pas depuis cette date, mettez le à jour avec cette version 2.0

La v2.0 détectera automatiquement la présence des nouveaux modèles.

NOTE AUX UTILISATEURS DES VERSIONS ANTERIEURES :
Le style CSS .box-title a été renommé en .box-titre par soucis de conformité avec la nouvelle structure de modèle.

Ce script nécessite quelques connaissances en CSS si vous utilisez des images de format particulier.

INSTALLATION:

1. Téléchargez puis décompressez le fichier dermod.zip
2. Lisez ce fichier !!
3. Editez le fichier deroulemodule.js (faites le glisser sur une fenêtre du bloc-notes par exemple), et placez-vous en fin de fichier (juste avant la ligne //-->).
4. Pour chaque module à reconstruire insérez une ligne telle que celle-ci:
   derouleModule("theID", visible);
   avec
• theID = identifiant du module à reconstruire (voir la liste des identifiants de modules)
  
• visible = état d'affichage initial du contenu : true = affiché, false = masqué
  
Par exemple, pour faire dérouler le module Texte libre de gauche ajoutez la ligne:
derouleModule("LeftPart", true);
Le contenu du module sera déroulé.
5. Sauvegardez le fichier deroulemodule.js (attention, le bloc-note rajoute l'extention .txt, supprimez cette extension).
6. Envoyez deroulemodule.js sur votre blog (dans Mes fichiers).
7. Placez la ligne suivante en fin de votre pied de page :
   <script type="text/javascript"></script>
   .
   Si vous avez un problème pour insérer le script, passez voir mon article sur l'insertion de javascript, dans la partie script include.
   
8. Créez 4 images de taille 12x7 pour les boutons de déroulement.
   Ces images s'appellent :
• up.gif (image pour masquer)
• oup.gif (image pour masquer, sous la souris)
• down.gif (image pour afficher)
• odown.gif (image pour afficher, sous la souris)
9. Créez les styles suivants dans votre CSS (pour des images de 12x7):
   

   .box-up-img, .box-down-img,
   .box-up-img:hover, .box-up-img-hover,
   .box-down-img:hover, .box-down-img-hover {
       float: right;
       margin-right: 5px;
       margin-bottom: 0px;
       padding-bottom: 0px;
       padding-top: 0px;
       margin-top: -8px;
       width:12px;
       height: 15px;
       position: relative;
       z-index: 4;
       background-repeat: no-repeat;
       background-position: center left;
   }
   
   .box-up-img {
       background-image: 
   }
   
   .box-up-img:hover, .box-up-img-hover {
       background-image: 
   }
       
   .box-down-img {
       background-image: 
   }
       
   .box-down-img:hover, .box-down-img-hover {
       background-image: 
   }

   
   Dans le style .box-content modifiez le padding top afin de le mettre à 0:
   soit en mettant 0px comme 1er valeur de padding: 0px 0px 15px 5px;
   soit en ajoutant l'attribut padding-top: 0px; Cette manipulation permet de réduire l'espace entre le titre et le contenu du module.
   
   Attention, les valeurs proposées dans ces styles sont valides uniquement si vous utilisez des images de taille 12x7, si optez pur une autre taille d'image, vos modules peuvent être dénaturés.