phpBB-fr.com

[lolovoisin]

»Mettre la légende des forums sous les styles basés sur Prosilver

Merci à abble pour le code du collapse

Ce tutorial s'adresse aux personnes désirant mettre la légende des forums dans les styles basés sur Prosilver, celle-ci n'étant pas présente par défaut.

ATTENTION : Tout le tutorial est basé sur prosilver. Si votre style est différent, changez prosilver par le nom de votre style dans le code à ajouter

1- Téléchargement et recopie des fichiers images et du script.


• Téléchargez le fichier legende_prosilver.zip
  
• Recopiez les images up.png et down.png dans styles/prosilver/theme/images/
• Recopiez le fichier animatedcollapse.js dans styles/prosilver/template/

2- Modification des fichiers.

• Ouvrir styles/prosilver/template/index_body.html
  
  • Chercher:
    

    Code: Tout sélectionner

    <!-- INCLUDE overall_footer.html -->

  • Avant ajouter:
    

    Code: Tout sélectionner

    <h3>Legende des folders <a href="javascript:collapse1.slidedown()"><img src="./styles/prosilver/theme/images/down.png" alt="Afficher la l&eacute;gende" /></a> <a href="javascript:collapse1.slideup()"><img src="./styles/prosilver/theme/images/up.png" alt="Cacher la l&eacute;gende" /></a></h3>
    <div id="leg" style="width: 900px; height: 200px;">   
    <p><img src="./styles/prosilver/imageset/forum_read.gif" alt="Forum lu" style="vertical-align: middle;" /> Forum lu &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="./styles/prosilver/imageset/forum_read_locked.gif" alt="Forum ferm&eacute;, lu" style="vertical-align: middle;" /> Forum ferm&eacute;, lu &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="./styles/prosilver/imageset/forum_read_subforum.gif" alt="Forum avec sous-forum lu" style="vertical-align: middle;" /> Forum avec sous-forum lu</p>
    <p><img src="./styles/prosilver/imageset/forum_unread.gif" alt="Forum non lu" style="vertical-align: middle;" /> Forum non lu &nbsp;<img src="./styles/prosilver/imageset/forum_unread_locked.gif" alt="Forum ferm&eacute;, non lu" style="vertical-align: middle;" /> Forum ferm&eacute;, non lu &nbsp;<img src="./styles/prosilver/imageset/forum_unread_subforum.gif" alt="Forum avec sous-forum non lu" style="vertical-align: middle;" /> Forum avec sous-forum non lu</p>
    <p><img src="./styles/prosilver/imageset/forum_link.gif" alt="Forum lien" style="vertical-align: middle;" /> Forum lien &nbsp;<img src="./styles/prosilver/imageset/subforum_read.gif" alt="Sous-forum lu" />Sous-forum lu &nbsp;<img src="./styles/prosilver/imageset/subforum_unread.gif" alt="Sous-forum non lu" />Sous-forum non lu</p>
    </div>
    <script type="text/javascript">
    //Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
    var collapse1=new animatedcollapse("leg", 1000, false)
    </script>

• Ouvrir styles/prosilver/template/viewforum_body.html
  
  • Chercher:
    

    Code: Tout sélectionner

    <!-- INCLUDE overall_footer.html -->

  • Avant ajouter:
    

    Code: Tout sélectionner

    <h3>Legende des folders <a href="javascript:collapse1.slidedown()"><img src="./styles/prosilver/theme/images/down.png" alt="Afficher la l&eacute;gende" /></a> <a href="javascript:collapse1.slideup()"><img src="./styles/prosilver/theme/images/up.png" alt="Cacher la l&eacute;gende" /></a></h3>
    <div id="leg" style="width: 900px; height: 420px;">
    <p><img src="./styles/prosilver/imageset/topic_read.gif" alt="Sujet lu" style="vertical-align: middle;" /> Sujet lu &nbsp;<img src="./styles/prosilver/imageset/topic_read_mine.gif" alt="Sujet lu dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Sujet lu dans lequel j'ai post&eacute; &nbsp;<img src="./styles/prosilver/imageset/topic_read_hot_mine.gif" alt="Sujet populaire lu dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Sujet populaire lu dans lequel j'ai post&eacute;</p>
    <p><img src="./styles/prosilver/imageset/topic_read_hot.gif" alt="Sujet populaire lu" style="vertical-align: middle;" /> Sujet populaire lu &nbsp;<img src="./styles/prosilver/imageset/topic_read_locked.gif" alt="Sujet lu ferm&eacute;" style="vertical-align: middle;" /> Sujet lu ferm&eacute;&nbsp;<img src="./styles/prosilver/imageset/topic_read_locked_mine.gif" alt="Sujet lu ferm&eacute; dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Sujet lu ferm&eacute; dans lequel j'ai post&eacute;</p>
    <p><img src="./styles/prosilver/imageset/topic_unread.gif" alt="Sujet non lu" style="vertical-align: middle;" /> Sujet non lu &nbsp;<img src="./styles/prosilver/imageset/topic_unread_mine.gif" alt="Sujet non lu dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Sujet non lu dans lequel j'ai post&eacute; &nbsp;<img src="./styles/prosilver/imageset/topic_unread_hot_mine.gif" alt="Sujet populaire non lu dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Sujet populaire non lu dans lequel j'ai post&eacute;</p>
    <p><img src="./styles/prosilver/imageset/topic_unread_hot.gif" alt="Sujet populaire non lu" style="vertical-align: middle;" /> Sujet populaire non lu &nbsp;<img src="./styles/prosilver/imageset/topic_unread_locked.gif" alt="Sujet non lu ferm&eacute;" style="vertical-align: middle;" /> Sujet non lu ferm&eacute;&nbsp;<img src="./styles/prosilver/imageset/topic_unread_locked_mine.gif" alt="Sujet non lu ferm&eacute; dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Sujet non lu ferm&eacute; dans lequel j'ai post&eacute;</p>
    <p><img src="./styles/prosilver/imageset/topic_moved.gif" alt="Topic d&eacute;plac&eacute;" style="vertical-align: middle;" /> Topic d&eacute;plac&eacute;</p>
    <p><img src="./styles/prosilver/imageset/announce_read.gif" alt="Annonce lue;" style="vertical-align: middle;" /> Annonce lue &nbsp;<img src="./styles/prosilver/imageset/announce_read_locked.gif" alt="Annonce lue ferm&eacute;e" style="vertical-align: middle;" /> Annonce lue ferm&eacute;e &nbsp;<img src="./styles/prosilver/imageset/announce_read_locked_mine.gif" alt="Annonce lue ferm&eacute;e dans laquelle j'ai post&eacute;" style="vertical-align: middle;" /> Annonce lue ferm&eacute;e dans laquelle j'ai post&eacute;&nbsp;<img src="./styles/prosilver/imageset/announce_read_mine.gif" alt="Annonce lue dans laquelle j'ai post&eacute;" style="vertical-align: middle;" /> Annonce lue dans laquelle j'ai post&eacute;</p>
    <p><img src="./styles/prosilver/imageset/announce_unread.gif" alt="Annonce non lue;" style="vertical-align: middle;" /> Annonce non lue &nbsp;<img src="./styles/prosilver/imageset/announce_unread_locked.gif" alt="Annonce non lue ferm&eacute;e" style="vertical-align: middle;" /> Annonce non lue ferm&eacute;e &nbsp;<img src="./styles/prosilver/imageset/announce_unread_locked_mine.gif" alt="Annonce non lue ferm&eacute;e dans laquelle j'ai post&eacute;" style="vertical-align: middle;" /> Annonce non lue ferm&eacute;e dans laquelle j'ai post&eacute;&nbsp;<img src="./styles/prosilver/imageset/announce_unread_mine.gif" alt="Annonce non lue dans laquelle j'ai post&eacute;" style="vertical-align: middle;" /> Annonce non lue dans laquelle j'ai post&eacute;</p>
    <p><img src="./styles/prosilver/imageset/sticky_read.gif" alt="Post-it lu;" style="vertical-align: middle;" /> Post-it lu &nbsp;<img src="./styles/prosilver/imageset/sticky_read_locked.gif" alt="Post-it lu ferm&eacute;" style="vertical-align: middle;" /> Post-it lu ferm&eacute; &nbsp;<img src="./styles/prosilver/imageset/sticky_read_locked_mine.gif" alt="Post-it lu ferm&eacute; dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Post-it lu ferm&eacute; dans lequel j'ai post&eacute;&nbsp;<img src="./styles/prosilver/imageset/sticky_read_mine.gif" alt="Post-it lu dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Post-it lu dans lequel j'ai post&eacute;</p>
    <p><img src="./styles/prosilver/imageset/sticky_unread.gif" alt="Post-it non lu;" style="vertical-align: middle;" /> Post-it non lu &nbsp;<img src="./styles/prosilver/imageset/sticky_unread_locked.gif" alt="Post-it non lu ferm&eacute;" style="vertical-align: middle;" /> Post-it non lu ferm&eacute; &nbsp;<img src="./styles/prosilver/imageset/sticky_unread_locked_mine.gif" alt="Post-it non lu ferm&eacute; dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Post-it non lu ferm&eacute; dans lequel j'ai post&eacute;&nbsp;<img src="./styles/prosilver/imageset/sticky_unread_mine.gif" alt="Post-it non lu dans lequel j'ai post&eacute;" style="vertical-align: middle;" /> Post-it non lu dans lequel j'ai post&eacute;</p>
    </div>
    <script type="text/javascript">
    //Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
    var collapse1=new animatedcollapse("leg", 1000, false)
    </script>

• Ouvrir styles/prosilver/template/overall_header.html
  
  • Chercher:
    

    Code: Tout sélectionner

    </head>

  • Avant ajouter:
    

    Code: Tout sélectionner

    <script type="text/javascript" src="{T_TEMPLATE_PATH}/animatedcollapse.js"></script>

  
  
  3- Finalisation.
  
  • Il ne vous reste plus maintenant qu'à vous rendre dans le panneau d'administration, onglet "STYLES", puis a gauche cliquez sur "Templates" et cliquez à droite sur "Rafraîchir" en face de Prosilver (ou de votre thème si celui-ci est différent de Prosilver)
  • Sur le forum, pour voir la légende, il suffit de cliquer sur la petite flèche rose en face de "Legende des folders" en bas de page, et sur la flèche bleue pour cacher la légende.
    
    
  
  
  4- Personnalisation
  
  • Si certains d'entres vous préfère avoir la légende juste en dessous de la liste des forums, il suffit de déplacer le code à copier:
    
    
    - Dans index_body.html mettre le code après:

    Code: Tout sélectionner

    <!-- INCLUDE forumlist_body.html -->

    
    
    - Dans viewforum_body.html, mettre le code aprés:

    Code: Tout sélectionner

    <!-- INCLUDE jumpbox.html -->

  • Pour ceux qui préfèrent avoir la légende centrée:
    
    - Ouvrir styles/prosilver/thème/common.css
    - Chercher:
    

    Code: Tout sélectionner

    .copyright {
   padding: 5px;
   text-align: center;
   color: #555555;
}

    
    - Avant ajouter:
    

    Code: Tout sélectionner

    #leg{
   text-align: center;
   margin: 0 auto;
}