Bonjour les petits chatons ! Aujourd'hui on va voir comment coder un élément qu'on retrouve régulièrement sur les forums : une sidebar (ou barre latérale) rétractable. Nous verrons quel template éditer et comment écrire le code JS qui servira à replier et déplier la sidebar.

La sidebar

Commençons par le commencement et par le plus simple : la sidebar en elle-même. Je ne m'attarderai pas vraiment sur le sujet, on va supposer que vous avez les bases en HTML et CSS pour coder votre élément. Pour l'instant, ne vous souciez pas de son placement, contentez-vous simplement de la construire attentivement.

Je vous déconseille de coder votre sidebar directement dans votre template, tout simplement parce que ce n'est pas pratique et qu'il faut publier le template à chaque modification. Préférez le faire dans une page HTML à part.

Votre sidebar va prendre toute la hauteur de votre forum. Mais voilà... Tous les forums ne font pas la même hauteur ! Comment s'y prendre, alors ? Vous vous doutez bien que vous ne voulez pas indiquer une hauteur en pixels. Pour cela, deux choix s'offrent à vous :

Vous souhaitez une sidebar fixée sur le côté (qui défilera avec la page) :



Vous souhaitez une sidebar non fixée sur le côté (qui ne défilera pas avec la page) :



Dans les deux cas, la valeur 100% convient. Vous pouvez aussi, pour une sidebar fixe, utiliser l'unité vh. L'unité de mesure vh correspond à viewport height, c'est à dire la hauteur de l'écran. Pour qu'un élément prenne toute la hauteur, la valeur qu'on doit lui attribuer est 100vh. Les tailles variant d'un écran à l'autre, gardez en tête que si vous choisissez cette valeur, certains écrans, plus petits, ne pourront probablement pas contenir la totalité du contenu de la sidebar... Pensez alors à mettre place un overflow: auto ou à limiter le contenu de la sidebar.

Attention, si vous attribuez la valeur height: 100vh à une sidebar en position: absolute, votre sidebar ne prendra pas toute la hauteur du forum... Seulement celle de l'écran !
N'oubliez pas que quelle que soit la position de votre sidebar (fixed ou absolute), il faudra également la placer avec les propriétés left, top ou right selon si vous souhaitez caler votre sidebar à droite ou à gauche de votre forum.

Pour l'exemple et pour ceux qui ont la flemme, voici une petite sidebar et son CSS, si vous souhaitez suivre le reste du tutoriel avec du code tout fait :

Code:

<div class="sidebar">
   <h2 class="sidebar_title">
      Made for <b>carnage</b>
   </h2>
   <h3 class="sidebar_small-title">RPG Original nc-18</h3>
   <p class="sidebar_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quia quasi aspernatur autem, mollitia molestiae similique nesciunt maiores dolorum corporis dicta nostrum, perferendis vero, accusamus praesentium velit voluptatem beatae ipsum!</p>
   <ul class="sidebar_menu">
      <li><a href=""><i class="fas fa-book"></i> Contexte</a></li>
      <li><a href=""><i class="fas fa-chess-queen"></i> Règlement</a></li>
      <li><a href=""><i class="far fa-folder-open"></i> Prédéfinis</a></li>
      <li><a href=""><i class="fas fa-glass-cheers"></i> Partenariats</a></li>
      <li><a href=""><i class="fas fa-book"></i> Crédits</a></li>
   </ul>
   <h3 class="sidebar_subtitle">Le staff</h3>
   <div class="sidebar_staff">
      <img src="https://outsitoutsi.files.wordpress.com/2015/04/tumblr_muiq5l6iwy1sl25ifo1_1280.jpg" class="sidebar_staff-img" />
      <div class="sidebar_staff-info">
         <b>Pseudo</b>
         <div>
            Rôle <a href="#">MP</a>
         </div>
      </div>
   </div>
   <div class="sidebar_staff">
      <img src="https://outsitoutsi.files.wordpress.com/2015/04/tumblr_muiq5l6iwy1sl25ifo1_1280.jpg" class="sidebar_staff-img" />
      <div class="sidebar_staff-info">
         <b>Pseudo</b>
         <div>
            Rôle <a href="#">MP</a>
         </div>
      </div>
   </div>
   <div class="sidebar_staff">
      <img src="https://outsitoutsi.files.wordpress.com/2015/04/tumblr_muiq5l6iwy1sl25ifo1_1280.jpg" class="sidebar_staff-img" />
      <div class="sidebar_staff-info">
         <b>Pseudo</b>
         <div>
            Rôle <a href="#">MP</a>
         </div>
      </div>
   </div>
   <h3 class="sidebar_subtitle">Top sites</h3>
   <div class="sidebar_top">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
   </div>
</div>

Code:

.sidebar {
 background-color: #9c86ca;
 box-sizing: border-box;
 font-family: "Roboto", sans-serif;
 height: 100%;
 height: 1000px;
 left: 0;
 padding: 15px;
 position: fixed;
 top: 0;
 width: 200px;
 z-index: 1000;
}

.sidebar a,
.sidebar a:hover,
.sidebar a:active {
 text-decoration: none !important;
}

.sidebar_title {
 color: #4f3b78;
 font-family: "Oswald", sans-serif;
 font-size: 1.8em;
 font-weight: 700;
 line-height: 1em;
 margin: 0;
 text-transform: uppercase;
}

.sidebar_title b {
 color: #b19ae2;
 text-shadow: 1px 1px 0 #4f3b78, 1px -1px 0 #4f3b78, -1px 1px 0 #4f3b78, -1px -1px 0 #4f3b78;
}

.sidebar_small-title {
 color: #4f3b78;
 font-size: 0.6em;
 font-weight: normal;
 letter-spacing: 0.3em;
 margin: 5px 0 0;
 text-transform: uppercase;
}

.sidebar_text {
 color: #fff;
 font-size: 0.7em;
 text-align: justify;
}

.sidebar_menu {
 display: flex;
 flex-direction: column;
 list-style: none;
 padding: 0;
}

.sidebar_menu li {
 display: flex;
 margin-bottom: 8px;
}

.sidebar_menu li a {
 background-color: #7f6aab;
 border-radius: 5px;
 color: #fff;
 font-size: 0.6em;
 padding: 5px;
 text-transform: uppercase;
 transition: 0.3s;
 width: 100%;
}

.sidebar_menu li a:hover {
 background-color: #947dc5;
}

.sidebar_menu li a i {
 color: #4f3b78;
 margin-right: 10px;
}

.sidebar_subtitle {
 color: #4f3b78;
 font-family: "Oswald", sans-serif;
 font-size: 1.1em;
 font-weight: 700;
 letter-spacing: 1px;
 margin: 20px 0 10px;
 text-transform: uppercase;
}

.sidebar_staff {
 align-items: center;
 background-color: #ccc;
 border-radius: 5px;
 height: 30px;
 margin-bottom: 5px;
 overflow: hidden;
 padding-left: 50px;
 position: relative;
}

.sidebar_staff-img {
 width: 50px;
 position: absolute;
 left: 0;
 transform: scale(1);
 transition: 0.3s;
}

.sidebar_staff-info {
 background: #7f6aab;
 display: flex;
 flex-direction: column;
 font-size: 0.6em;
 height: 100%;
 justify-content: center;
 padding: 0 10px;
 position: relative;
 text-transform: uppercase;
}

.sidebar_staff-info::before,
.sidebar_staff-info::after {
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 20px 15px 0;
 border-color: transparent #7f6aab transparent transparent;
 position: absolute;
 left: -20px;
 top: 0;
}

.sidebar_staff-info::after {
 top: initial;
 bottom: 0;
 border-width: 0 0 15px 20px;
 border-color: transparent transparent #7f6aab transparent;
}

.sidebar_staff-info b {
 color: #fff;
}

.sidebar_staff-info div {
 color: #b692ff;
 display: flex;
 justify-content: space-between;
}

.sidebar_staff-info div a {
 color: #4f3b78;
}

.sidebar_staff:hover .sidebar_staff-img {
 transform: scale(1.3);
}

.sidebar_top {
 display: flex;
 justify-content: space-between;
}

.sidebar_top a {
 border: 3px solid #b692ff;
 font-family: "Oswald", sans-serif;
 display: inline-flex;
 height: 30px;
 width: 30px;
 align-items: center;
 justify-content: center;
 color: #fff;
 border-radius: 50%;
 font-weight: 700;
 box-shadow: 0 0 0 0 inset #7f6aab;
 transition: 0.3s;
}

.sidebar_top a:hover {
 box-shadow: 0 0 0 3px inset #7f6aab;
}

Si vous utilisez mon code, n'oubliez pas d'importer les polices qui vont avec.

L'installation dans le template

Vous avez codé votre sidebar, elle est belle, elle est propre, vous en être fier... Vous pouvez dès à présent passer à l'installation ! La sidebar étant présente sur toutes les pages du forum, il faudra modifier le template overall_header. C'est le template de tête du forum (la head) qui est présent partout.

Pour cette étape, vous devez être fondateur du forum pour accéder à la modification des templates. Dans votre panneau d'administration > Affichage > Templates > Général, modifiez le template overall_header. Si vous l'avez déjà modifié, pas d'inquiétude, il suffit simplement de retrouver une ligne : l'ouverture du body.

Descendez quelques lignes et retrouvez la balise d'ouverture body. Vous allez coller le code HTML de votre sidebar juste après. N'ajoutez pas de CSS, que ce soit dans des balises <style> ou directement dans le HTML ! Le CSS sera à ajouter dans votre feuille de style. Enregistrez votre template, publiez-le et passons au style.

Allez donc dans votre panneau d'administration > Affichage > Images et couleurs > Couleurs, et dans l'onglet Feuille de style CSS. Collez-y votre CSS puis enregistrez.

Voilà, votre sidebar est en place et apparaît sur toutes les pages. Si vous ne voulez pas d'une sidebar rétractable, vous pouvez vous arrêter là. Sinon, nous allons passer à l'étape suivante : le javascript.

Un peu d'interaction avec du javascript

Pour une sidebar rétractable, les solutions sont multiples. Ce que je vais vous expliquer est l'une d'elles, mais ce n'est pas forcément la meilleure ou la plus adaptée.

Le principe est simple : Au clic sur un bouton, la sidebar se rétracte ou se déploie. Comment ça se passe, concrètement ?

L'élément body contient la sidebar.



Au clic sur un bouton de la sidebar, on ajoute une class à la sidebar : cette class joue sur la propriété transform: translateX pour faire glisser la sidebar sur 100% de sa largeur : elle sort du body.



On donne au body la propriété overflow-x: hidden qui cache les éléments qui dépassent sur l'axe X (horizontal) : voilà comment notre sidebar se plie et se déploie. Sans le overflow-x: hidden, une barre de défilement horizontal apparaîtrait.



Bien entendu, si on fait glisser la sidebar à 100% de sa largeur, elle disparaît complètement. Le bouton qui déclenche l'événement devra donc dépasser pour rester cliquable !



Une autre solution est de replier la sidebar en la laissant légèrement dépasser pour que le bouton reste accessible.



Quand on clique de nouveau sur le bouton, la class précédemment ajoutée disparaît et la propriété transform: translateX revient à la normale. Notre sidebar se déplie à nouveau.

Voilà en gros le principe de fonctionnement de la sidebar. Pour y arriver, voici ce qu'on va faire en javascript :

• Identifier deux éléments : la sidebar d'un côté et le bouton de la sidebar d'un autre


• Déclencher un événement au clic sur le bouton : l'ajout ou la suppression d'une class sur la sidebar

Et... C'est tout ! Simple, non ?

Dans mon code, j'ai choisi de votre en sorte que la sidebar soit de base repliée, puis au clic sur le bouton, déployée :

Code:

.sidebar {
 transform: translateX(-100%);
}
.sidebar--deployed {
 transform: translateX(0);
}

Vous pouvez faire la même chose ou inverser les valeurs pour que la sidebar soit déployée de base et vice-versa. Quoi qu'il en soit, n'oubliez pas d'ajouter ce morceau de CSS à votre code pour que votre sidebar puisse bien avoir ces deux états : déployée et repliée.
J'ai ici un état à transform: translateX(-100%); pour replier la sidebar... Mais l'unité peut être en pixel (ou dans une autre unité) si vous le souhaitez, par exemple transform: translateX(-100px);.

Ajout d'un bouton

J'en parlais juste en haut, mais il va bien falloir un bouton dans votre sidebar pour déclencher l'action ! Je l'ajoute tout en haut, juste après l'ouverture de mon élément sidebar.

Code:

<div class="sidebar" id="sidebar">
    <button id="sidebar_btn" class="sidebar_btn"><i class="fas fa-times"></i></button>
    ...

Remarquez que j'ai donné un id à ma sidebar et à mon bouton... C'est important pour la suite. Ajoutez-les aussi dans votre code. Je décide que ma sidebar se repliera sur toute sa largeur et je vais donc faire dépasser le bouton.

Code:

.sidebar_btn {
    background-color: #9c86ca;
    border: 0;
    height: 30px;
    outline: 0;
    position: absolute;
    right: -30px;
    width: 30px;
}

Je donne une position: absolute à mon bouton avant de le placer correctement. Un peu de style pour embellir le tout, et voilà, la sidebar n'a plus besoin que d'un peu de js. Je résume ce qu'il nous faut pour la suite et ce qu'on devrait avoir en ayant suivi le tutoriel jusqu'ici :

• Une sidebar avec une class "pliée" ou "dépliée" (selon l'état de base de votre sidebar) jouant sur la propriété transform: translateX


• Un bouton


• Un id pour le bouton, un id pour la sidebar

Le js en pratique

Pour commencer, on va identifier les deux éléments qui nous intéressent : la sidebar et le bouton. On va créer deux variables : sidebar et btn (vous pouvez nommer vos variables comme vous le souhaitez, évidemment).
Dans mon exemple, mon bouton est un button... Mais il pourrait être une div, une span, un a ou n'importe quoi d'autre. Écrire un button pour déclencher des actions est juste une syntaxe logique en HTML.
Si vous regardez mon code, vous pouvez voir que j'ai donné un id à ma sidebar et à mon bouton. C'est la manière la plus simple d'identifier des éléments. En js, on peut ensuite sélectionner les éléments par leur identifiant et les attribuer à une variable.

Code:

let btn = document.getElementById('sidebar_btn');
let sidebar = document.getElementById('sidebar');

Voilà, c'est aussi simple que ça : j'ai mes deux variables avec mes deux éléments identifiés par leur id. Bien entendu, adaptez cette formule à votre code si vous n'avez pas les mêmes id. De même, btn et sidebar pourraient très bien s'appeler toto et titi... Vous êtes libre de nommer vos variables comme bon vous semble.

On va ensuite déclencher l'événement au clic :



Même pour les néophytes, le code est facile à comprendre. Au clic (onclick) sur mon bouton (stocké dans la variable btn), je déclenche la fonction : dans la liste des class (classList) de ma sidebar (stockée dans la variable sidebar) je "toggle" (c'est à dire, je fais basculer, voyez ça comme une sorte d'interrupteur) la class sidebar-deployed. Pour le dire simplement, lorsque je clique sur le bouton, j'ajoute la class si elle est absente ou je la supprime si elle est présente.

Le code en entier :

Code:

let btn = document.getElementById('sidebar_btn');
let sidebar = document.getElementById('sidebar');

btn.onclick = () => {
 sidebar.classList.toggle("sidebar--deployed");
};

Voilà, il ne suffit que de trois lignes de code pour ça ! Un dernier détail : il faut charger le code js après le chargement du DOM HTML. Pourquoi ? Parce que notre code js identifie des éléments par leur id. S'il s'exécute avant que ces éléments ne chargent, le script n'identifie aucun élément et la fonction ne peut pas marcher. Pour ce faire, un brin de jQuery va nous faciliter la vie :

Code:

$(document).ready(function() {
let btn = document.getElementById('sidebar_btn');
let sidebar = document.getElementById('sidebar');

btn.onclick = () => {
 sidebar.classList.toggle("sidebar--deployed");
};
});

Pour mettre en place le script, allez dans votre panneau d'administration > Modules >  HTML & JAVASCRIPT > Gestion des codes Javascript. Assurez-vous d'avoir bien coché "oui" à "Activer la gestion des codes Javascript" et créez un nouveau script. Collez-y votre code, cochez "Sur toutes les pages" pour le placement, entrez le titre que vous voulez et enregistrez.

Ça y est, votre code est en place.

À cette étape-ci, si vous avez bien tout suivi, vous avez normalement une sidebar fonctionnelle. Je résume un peu tout ce qu'on a fait jusqu'ici :

• On a codé une sidebar qu'on a installée dans le template overall_header


• On a mis en place le CSS de la sidebar dans la feuille de style du forum


• On a codé un petit script qu'on a mis en place dans les modules js du forum

Si pour vous la sidebar ne fonctionne pas, assurez-vous que tout est correct : avez-vous ciblé les bons identifiants dans votre js ? Avez-vous bien écrit la class dans votre CSS ? Avez-vous bien changé les valeurs de vos propriétés ? Soyez attentifs !

Un brin d'animation

La sidebar se plie et se déplie, c'est génial. Cependant, c'est un peu abrupt, non ? Pour cela, il suffit d'agrémenter un peu le CSS pour animer la sidebar.

Code:

.sidebar {
  transition: 0.3s;
}

C'est aussi simple que ça, oui. Maintenant la propriété transform s'anime et votre sidebar bouge avec fluidité. On peut aussi jouer sur les éléments à l'intérieur de la sidebar. Par exemple, j'ai ajouté une icône dans le bouton. Je peux animer son angle de rotation pour en faire un + dans la sidebar repliée et une croix dans la sidebar repliée.

Code:

.sidebar_btn i {
      transform: rotate(45deg);
      transition: 0.3s;
}
.sidebar--deployed .sidebar_btn i {
      transform: rotate(0);
}

À vous de jouer

Ça y est, le tutoriel se termine... Vous voyez, ce n'est pas compliqué de coder une sidebar rétractable. Libre à vous de jouer sur le placement (à droite ou à gauche), les valeurs (par exemple pour ne pas replier totalement la sidebar), les animations... Vous avez les bases pour créer comme bon vous semble. Le code complet de la sidebar est à retrouver ici.

BONUS : jouons avec les cookies

Qu'est-ce qu'un cookie ? C'est un petit biscuit aux pépites de chocolat fichier temporaire inscrit sur votre navigateur. Vous devez régulièrement tomber sur ces bandeaux sur les sites web vous invitant à accepter (ou non) les cookies... Et bien voilà, c'est ce dont il s'agit. À quoi ça sert ? À conserver, par exemple, des données de session pour que vous restiez connecté. Et là, vous vous demandez le rapport entre une sidebar et des cookies.

Si vous codez une sidebar latérale, vous avez probablement remarqué qu'en passant d'une page à une autre sur votre forum, la sidebar que vous avez déplié... Se redéploie. Ou vice-versa ! Et oui, d'une page à l'autre, l'état de notre sidebar n'est pas conservé. On va inscrire un cookie pour que le navigateur puisse conserver cet état en mémoire.

Pour créer un cookie, rien de plus simple :

Code:

document.cookie = "sidebar=true";

sidebar est le nom de notre cookie et true est sa valeur. En l'occurrence, sa valeur ne nous intéresse pas, vous pourriez remplacer true par "Babar" ou "coucou", ça reviendra au même pour la suite de notre tutoriel. Voilà ce qu'on souhaite faire :

• Quand l'état de notre sidebar change de son état de base, on inscrit un cookie


• Lorsque la page charge, on vérifie si le cookie est présent : si c'est le cas, alors on donne à la sidebar l'état adéquat.


• Quand l'état de notre sidebar revient à son état de base, on détruit ce cookie

Si vous ne comprenez pas, en gros, on veut qu'une sidebar déployée le reste sur toutes les pages, même si on les actualise. Si on décompose étape par étape :

1. Ma page charge : je vérifie si le cookie est présent. Si oui, je donne à ma sidebar l'état qui convient.


2. Je clique sur le bouton de la sidebar : une nouvelle fois, je vérifie si le cookie est présent. Si oui, je le détruis. Si non, je crée un cookie.

On va reprendre le script de notre sidebar et le modifier un peu, déjà en lui ajoutant une nouvelle fonction qui nous permettra de vérifier la présence (ou non) d'un cookie. Cette fonction prend en paramètre une chaîne de caractère (le nom du cookie) et renvoie true (si le cookie existe) ou false (si le cookie n'existe pas.

Code:

function getCookie (sKey) {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  };

Je ne m'attarde pas longtemps dessus, cette fonction est un regex, un peu compliqué pour les débutants, mais voilà comment on l'appelle :

Code:

getCookie("sidebar")

J'ai donc le nom de ma fonction à laquelle je passe le nom de mon cookie ("sidebar"). Si le cookie existe, c'est que ma barre est déployée. Si ma barre est déployée, je dois lui donner la class qui correspond :

Code:

 if (getCookie("sidebar")) {
  sidebar.classList.toggle("sidebar--deployed");
  }

Maintenant, si je clique sur le bouton de ma sidebar, je fais la même vérification. Si le cookie existe, je le détruis. Sinon, j'en crée un. Pour détruire un cookie, c'est le même code que pour en créer un, sauf qu'on ne lui passe aucune valeur :

Code:

btn.onclick = () => {
  if (getCookie("sidebar")) {
    document.cookie = "sidebar=";
  } else {
    document.cookie = "sidebar=true";
  }
sidebar.classList.toggle("sidebar--deployed");
};

Et voilà le code complet :

Code:

let btn = document.getElementById('sidebar_btn');
let sidebar = document.getElementById('sidebar');

function getCookie(sKey) {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
};

btn.onclick = () => {
    if (getCookie("sidebar")) {
        document.cookie = "sidebar=";
    } else {
        document.cookie = "sidebar=true";
    }
    sidebar.classList.toggle("sidebar--deployed");
};


if (getCookie("sidebar")) {
    sidebar.classList.toggle("sidebar--deployed");
}

Un peu compliqué ? On revient dessus ligne par ligne, pas d'inquiétude.

Comme au début, on a nos variables, elles n'ont pas changé. Jusqu'ici, c'est facile.

On a ensuite notre fonction getCookie, qui nous sert à vérifier la présence ou non d'un cookie. C'est une fonction difficilement lisible, donc ne vous en faites pas si vous ne la comprenez pas. Sachez juste qu'elle prend en paramètre une chaîne de caractères et renvoie un booléen (vrai ou faux).

Comme tout à l'heure, on déclenche une fonction au clic sur le bouton : cette fois, on vérifie si le cookie existe avec getCookie("sidebar"). Si il existe, on le détruit (document.cookie = "sidebar=";), sinon, on le crée (document.cookie = "sidebar=true";). Ensuite, on retire ou on ajoute la class de notre sidebar.

La dernière partie de notre script nous sert à vérifier, au chargement de la page, la présence de notre cookie. S'il est présent, c'est qu'il faut que notre sidebar soit déployée : on lui passe donc la class nécessaire. S'il est absent, il ne se passe rien.

Enfin, comme tout à l'heure, on charge ce script après le chargement du DOM :

Code:

$(document).ready(function() {
let btn = document.getElementById('sidebar_btn');
let sidebar = document.getElementById('sidebar');

function getCookie(sKey) {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
};

btn.onclick = () => {
    if (getCookie("sidebar")) {
        document.cookie = "sidebar=";
    } else {
        document.cookie = "sidebar=true";
    }
    sidebar.classList.toggle("sidebar--deployed");
};


if (getCookie("sidebar")) {
    sidebar.classList.toggle("sidebar--deployed");
}
});

Voilà, voilà ! Rien de bien compliqué, au fond, n'est-ce pas ? Vous avez à présent une barre latérale fonctionnelle, qui garde son état sur toutes les pages !

Amusez-vous et n'hésitez pas à me montrer le résutat de vos expérimentations !

En cas de souci ou de question, postez à la suite de ce tutoriel.