Tutorial Cacher la barre latérale

Discussion dans 'Modifications de templates' créé par Sι∂яα∂ι, 30 Juillet 2016.

  1. Sι∂яα∂ι

    Sι∂яα∂ι Administrateur

    Messages:
    28 564
    J'aime reçus:
    116 079
    Points:
    13 043
    Inscrit:
    25 Juin 2014
    Salut communauté iHax ,

    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:

    Dernière édition: 17 Novembre 2021
  2. striarc

    striarc Membre

    Messages:
    23
    J'aime reçus:
    2
    Points:
    533
    Inscrit:
    21 Mars 2016
    merci merci merci merci
     
  3. MihB21

    MihB21 Membre

    Messages:
    7
    J'aime reçus:
    0
    Points:
    21
    Inscrit:
    9 Mars 2018
    hey thank you for modification template!!
     
  4. MasterMan

    MasterMan Membre

    Messages:
    2
    J'aime reçus:
    0
    Points:
    11
    Inscrit:
    6 Octobre 2019
    Merci, je vais testé tout ça.
     

Partager cette page

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