» BBCode Spoiler
A l'aide de cette documentation, vous allez créer un BBCode Spoiler pour votre forum.
» 1. Ajout des classes CSS
Tout d'abord, nous allons modifier le fichier «
bbcodes.css » que vous avez au préalable créé à l'aide de cette
documentation (si ce n'est pas le cas, je vous invite à le faire dès maintenant).
Cherchez :
Code : Tout sélectionner
/* Fichier Style des BBCodes
--------------------------------------------------- */
Après, ajoutez :
Code : Tout sélectionner
/* Spoiler
--------------------------------------------- */
.spoiler {
margin-left: 50px;
margin-right: 50px;
margin-top: 10px;
background: #FFF;
border: 1px solid #C5CFDA;
overflow: hidden;
color: #536482;
}
.spoiler p.title {
text-transform: uppercase;
border-bottom: 1px solid #C5CFDA;
margin-bottom: 0;
padding: 5px 0px 5px 10px;
font-size: 0.9em !important;
font-weight: bold;
display: block;
}
.spoiler div {
padding: 10px;
font-size: 0.9em !important;
}
.spoiler div ul{
padding: 0;
list-style: none;
}
.spoiler div ul li {
padding-left: 1.3em;
padding-bottom: 5px;
}
.spoiler div ul li ul li {
font-size: 0.9em !important;
}
.spoiler div ul li:before {
font-family: "FontAwesome";
display: inline-block;
margin-left: -1.3em;
padding-right: 5px;
}
.spoiler div ul li:first-child {
padding-top: 5px;
}
» 2. Ajout de la fonction Javascript
Ensuite, nous allons modifier le fichier «
style/{VOTRE_STYLE}/template/forum_fn.js ». C'est ici que nous allons placer notre fonction.
Cherchez :
Avant, ajoutez :
Code : Tout sélectionner
/**
* Display Spoiler
*/
function display_spoiler()
{
phpbb.toggleDisplay('spoiler');
e = document.getElementById('spoiler');
if (e.style.display == 'block')
{
$('#ShowHide').html('<i class="icon fa-minus fa-fw" aria-hidden="true"></i>');
}
else
{
$('#ShowHide').html('<i class="icon fa-plus fa-fw" aria-hidden="true"></i>');
}
}
» 3. Vider le cache
Il ne vous reste plus qu'à vider le cache pour que vos modifications soient prises en compte. Rien de plus facile : rendez-vous dans le panneau d'administration puis vous cliquez sur l'onglet «
Général ». Une fois sur la page, vous cliquez sur le bouton «
Exécuter maintenant » en face de «
Purger le cache ».
» 4. Résultat
Voici ce que cela donne :
Masqué :
Affiché :