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

Tutorial Cacher la barre latérale

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

  1. BҽʂƚPσρυɳ

    BҽʂƚPσρυɳ Administrateur

    En Ligne
    Salut communauté BestPopun ,

    On se retrouve pour un nouveau Tutorial xenForo.
    Ce tutoriel vous permet de cacher/afficher la barre latérale.

    Avant :

    upload_2016-7-30_6-1-49.png

    Après :

    upload_2016-7-30_6-2-6.png

    Dans le template EXTRA.CSS vous allez ajouter :

    Code:
    .sidebar_mini {
    background: #f0f7fc url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
    background-image: url('styles/sidebar_toggle.png');
    border: 1px solid #a5cae4;
    background-position: 50% 0;
    border-radius: 5px;
    float: right;
    margin-left: 5px;
    padding-left: 3px;
    padding-right: 3px;
    overflow: hidden;
    position: relative;
    width: 17px;
    height: 24px;
    background-repeat: no-repeat;
    }
    
    .sidebar_mini a{
        display: block;
        height: 24px;
    }
    
    .sidebar_mini.sidebar_expand{
        background-position: 50% -24px;
    }
    
    .mainContainer.no_sidebar,
    .mainContent.no_sidebar{ margin-right: 0; }
    
    .sidebar_collapse {
        position: absolute;
        right: -6px;
        top: 2px;
        z-index: 1;
    }
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
    .sidebar_mini {
    display: none;
    }}
    @media (max-width:@maxResponsiveMediumWidth) {
    .sidebar_mini {
    display: none;
    }}
    </xen:if>
    NB : Vous pouvez editer le CSS de la classe : .sidebar_mini pour s'adapter aux couleurs de votre thème.

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

    Template: breadcrumb
    Clé de la modification: Sidebar_Collapse_1
    Trouver:
    Code:
    <nav>
    Remplacer:
    Code:
    $0
    <xen:if is="{$contentTemplate} != 'forum_list'">
    <xen:else />
    <div class="sidebar_mini Tooltip" title="Sidebar"><a href="#"></a></div>
    </xen:if>
    
    Puis vous sauvegarder la modification de template, et vous créer une nouvelle :

    Template: page_container_js_head
    Clé de la modification: Sidebar_Collapse_2
    Trouver:
    Code:
    <!--XenForo_Require:JS-->
    Remplacer:
    Code:
    <script type="text/javascript" src="js/sidebar.js"></script>
    Maintenant et en dernier lieu vous allez télécharger le pack en pièces jointes et le mettre sur votre FTP ! Il contient : sidebar_toggle.png et sidebar.js

    Ce Tutorial touche à sa fin.

    A très bientôt. :neo:
     

    Fichiers jointes:

    • upload.zip
      Taille de fichier:
      1.6 KB
      Affichages:
      4
      Hash MD5:
      b1efbc2d94f90e7d223c5c71ee38e1c0
    Dernière édition: 5 Août 2020
  2. striarc

    striarc Membre

    Hors Ligne
    merci merci merci merci
     
  3. MihB21

    MihB21 Membre

    Hors Ligne
    hey thank you for modification template!!
     
  4. MasterMan

    MasterMan Membre

    Hors Ligne
    Merci, je vais testé tout ça.
     

Partager cette page