1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.

Tutorial Réduire les catégories

Discussion dans 'Modifications de templates' créé par BҽʂƚPσρυɳ, 30 Juillet 2016.

  1. BҽʂƚPσρυɳ

    BҽʂƚPσρυɳ Administrateur

    Hors Ligne
    Salut communauté BestPopun ,

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

    Avant :

    upload_2016-7-30_5-18-59.png

    Après :

    upload_2016-7-30_5-18-28.png

    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:
     

    Fichiers jointes:

    • upload.zip
      Taille de fichier:
      3 KB
      Affichages:
      20
      Hash MD5:
      7a350697804aa410ce8366335df8cfba
    Dernière édition: 5 Août 2020
  2. AnTr4X

    AnTr4X Membre

    Hors Ligne
  3. siposiulyan

    siposiulyan Membre

    Hors Ligne
  4. led@lire

    led@lire Membre

    Hors Ligne
    Bonjour

    Je vais tester cette fonction

    Merci
     
  5. Chkuguru

    Chkuguru Membre

    Hors Ligne
    Parfait merci ! Je cherchais ça
     
  6. BANDIT33800

    BANDIT33800 Membre

    Hors Ligne
  7. Michel Jackie

    Michel Jackie Membre

    Hors Ligne
    Nice mec mais sa marche pas :confused:
     
  8. WikozCanter

    WikozCanter Membre

    Hors Ligne
    Merci pour le tuto je go test
     
  9. siwalex

    siwalex Membre

    Hors Ligne
    Merci pour le tuto je go test
     
  10. ℓ๏я€ɲƶ๏

    ℓ๏я€ɲƶ๏ Membre

    Hors Ligne
  11. xplayners

    xplayners Membre

    Hors Ligne
    Merci pour le partage. Pratique pour plus d'ergonomie et moins de scroll down
     
  12. believe

    believe Membre

    Hors Ligne
    Merci pour le partage :) C''est sympa pour le forum :)
     
    Dommage que çà fonctionne pas :'(
     

Partager cette page