Renommer les modules et les faire dérouler

Publié le par Francisek

Cet article ne s'applique plus à la nouvelle structure de modèles d'over-blog
Veuillez vous reporter à l'article Faire dérouler les modules de votre blog qui est compatible avec over-blog v1.10

 

PRESENTATION:

Comme certains me ont déjà demandé (n'est ce pas Alex ?) de publier un script permettant de faire dérouler les modules comme sur mon blog, voici enfin cet article.

Le script que je vous propose aujoud'hui va vous permettre à la fois de renommer vos modules (il remplace donc le précédant présenté ici) mais en plus de les réduire ou les afficher un peu à la manière de Mac OS. Vous pourrez définir l'état par défaut (affiché ou réduit).
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", "newTitle", content);
    avec
    • theID = identifiant du module à reconstruire (voir la liste des identifiants de modules)
    • newTitle = nouveau titre du module
    • content = état d'affichage initial du contenu : true = affiché, false = masqué
    Par exemple, pour renommer le module Texte libre de gauche ajoutez la ligne:
    derouleModule("LeftPart", "Bienvenue", true);
    Le titre du module sera Bienvenue, et 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 src="/lib/Z/Y/XXYZ/files/deroulemodule.js" type="text/javascript"></script>
    où XXYZ est le numéro de votre module.
    Si vous avez un problème, passez voir mon article sur l'insertion de javascript.
  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-updown-img { float: right; margin-right: 9px; margin-top: -8px; }

    .box-up-img { float: right; margin-right: 5px; margin-bottom: 0px; padding-bottom: 0px; width:12px;height: 15px; margin-top: -15px;background: url(up.gif) no-repeat bottom; }

    .box-up-img:hover, .box-up-img-hover { float: right; margin-right: 5px; margin-bottom: 0px; padding-bottom: 0px;width:12px; height: 15px; margin-top: -15px; background: url(oup.gif) no-repeat bottom;}

    .box-down-img { background: url(down.gif) no-repeat bottom; float: right; margin-right: 5px; margin-bottom: 0px; padding-bottom: 0px; width:12px; height: 15px; margin-top: -15px;}

    .box-down-img:hover, .box-down-img-hover{ background: url(odown.gif) no-repeat bottom; float: right; margin-right: 5px; margin-bottom: 0px; padding-bottom: 0px; width:12px; height: 15px; margin-top: -15px; }

    .box-title {overflow:auto; padding: 0px 0px 1px 0px; width: 100%; position: relative;}


    Dans le style .box-content modifier 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;

    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.
Comme toujours, ce script est original (vous ne le trouverez nul part ailleurs), vous pouvez l'utiliser tant que vous ne le modifiez pas. Si vous voulez ajouter votre touche personnelle au script, envoyez-moi un mail.
Je ne vous oblige pas à faire un lien de votre blog sur le mien si vous utilisez ce script, mais ce serait bien :)
Et les commentaires sont les bienvenus :-)

Publié dans Pour les experts

Commenter cet article

spouwny 27/03/2005 20:04

Je le savais!
Enfin j'avais émis cette hypothèse:

Lors de mon premier commantaire:
"ou bien ce scripte fait des trucs pas compatibles avec les modèle de design..."

Francisek 27/03/2005 20:00

Ok j'ai vu d'où ça vient : la structure des modules a changé, le script n'est plus compatible :(
Je vais me mettre sur une nouvelle version compatible ;)

spouwny 27/03/2005 19:49

ce ki ne résou pa mon blem de script
see my blog...

Francisek 27/03/2005 19:45

Oui j'ai signalé le bug du data en trop. Et visiblement, ton problème d'accès momentané à tes fichiers était dû à la résolution de ce bug.

Spouwny 27/03/2005 19:43

Sayé... bizare ce problème...Fodré vérifié certains lien lorsqu'on upload paske y rajoute un /data/ ds la path alors qu'on accède au fichier sans.
j'explique:

pour l'aperçut le lien c'est: data.over-blog.com/data/lib/etc..
mais pour accéder au fichier le lien est: data.over-blog.com/lib/etc...