Tutorial Cacher la barre latérale

Salut communauté iHaxGlobal ,

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

Avant :



Après :



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: