Tutorial Réduire les catégories

Salut communauté iHaxGlobal ,

On se retrouve pour un nouveau Tutoriel xenForo.
Ce tutorial vous permet de contracter les catégories en les réduisant

Avant :



Après :



Dans l'adminCP / Apparence / Modifications de template / + Créer une modification de template

Template: node_category_level_1
Clé de la modification: Collapse_1
Trouver:

Code:

<ol class="nodeList">
            <xen:foreach loop="$renderedChildren" value="$child">{xen:raw $child}</xen:foreach>
        </ol>

Remplacer:

Code:

<!-- IF SCRIPT_NAME eq 'index' --><div class="trigger active Tooltip"  title="Cacher / Afficher la catégorie"></div><!-- ENDIF -->
            <div class="collapsethis">
<ol class="nodeList">
            <xen:foreach loop="$renderedChildren" value="$child">{xen:raw $child}</xen:foreach>
        </ol>
</div>
<xen:else />
$0

Puis vous sauvegarder la modification de template, maintenant on va créer une autre modification de template :

Template: page_container_js_body
Clé de la modification: Collapse_2
Trouver:

Code:

</script>

Remplacer:

Code:

$0
<script type="text/javascript" src="js/jquery.collapse.js"></script>

<script type="text/javascript">
        $(".node.category").collapse({show: function(){
                this.animate({
                    opacity: 'toggle',
                    height: 'toggle'
                }, 300);
            },
            hide : function() {
                 
                this.animate({
                    opacity: 'toggle',
                    height: 'toggle'
                }, 300);
            }
        });
</script>

Puis vous sauvegarder la modification de template.

Maintenant dans le template EXTRA.CSS vous ajouter :

Code:

.trigger {
background: url("styles/toggle-sprite.png") no-repeat;
width: 16px;
height: 16px;
cursor: pointer;
float: right;
position: relative;
z-index: 9998;
margin-top: -22px;
margin-right: 8px;
}
.active {
background-position: left top;
}
.inactive {
background-position: left bottom;
}

Maintenant et en dernier lieu vous allez télécharger le pack en pièces jointes et le mettre sur votre FTP ! Il contient : toggle-sprite.png et jquery.collapse.js

Ce Tutorial touche à sa fin.

A très bientôt. :neo: