Faire dérouler les modules de votre blog

Publié le par Francisek

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.

Publié dans Pour les experts

Commenter cet article

Marietoune 25/02/2007 16:53

Bonjour Francisek. Je dois être complètement nulle, mais je suis bloquée à l'étape 2: je ne parviens m^me pas à ouvrir le fichier, mon ordi me sort un message d'erreur... ou alors je dois l'ouvrir quelque part ailleurs???

Francisek 01/03/2007 13:28

Quel message d'erreur as-tu ?
 

Razort 05/01/2007 18:08

wow! c'est moi ou les modules se sont resizés tout seul :?

Arf! ^^ ba mon problème s'est résolu ... sans que j'y touche!
@+

Francisek 05/01/2007 19:56

Tu devais avoir une vieille version dans le cache.
 

Razort 05/01/2007 17:39

Salut,
j'ai réussi a tout installer sur mon site, les images apparaissent, les modules déroulent, mais! Ils prennent aussi toute la page :?
Mon problème c'est que je sais pas trop ou j'ai rater ... Le fichier javascript a l'air ok, dans le CSS c'est bon ... Je pense que ça vien de mon index.php (la seule page où j'ai insérer le truc) peut etre une balise mal fermer ou le fichier .js mal inséré ...
Ou alors c'est Lycos qui ne prend pas bien ce genre d'accesoires ...
Enfin je sait pas trop ^^
Si tu pouvait m'éclairer parce que je rame un peu ce serait simpa XD
@+

Claudine 15/11/2006 07:20

Rhôô ! Corrigé, et... miracle ! Plein de mercis à ton grand savoir ! ;-)

Claudine 14/11/2006 10:30

Je pense avoir fait tout point par point, mais ça n'a pas l'air de marcher.... snif !

Francisek 14/11/2006 22:54

 
Tu a fouché dans l'url de ton deroulemodule1.js : elle commence pat http:// et non hhttp:// et elle est entourée de guillemets doubles et par d'un mélange guillemets simple et double.