Afficher / masquer les widgets du forum

[Threax]

Afficher / Masquer les widgets du forum

Ce script permet à vos membres de choisir individuellement d'afficher ou masquer les widgets du forum selon leurs préférences. Il ne nécessite aucune édition de template, il est donc très facile à installer. Toutefois, selon la version de votre forum vous devez installer un script différent. Le script retient votre choix même si vous changez de page, ou si vous la rafraîchissez. Le choix peut être inversé si vous cliquez sur la flèche, ou si vous videz le cache du navigateur. Création du script Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Widgets rétractables" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts). Pour la version PhpBB2 Code: $(function() {   var c = $("#left,#right"), d, e = function() {     var a = $(this).data("side");     window.localStorage && localStorage[("none" == $("#" + a).parent().css("display") ? "remove" : "set") + "Item"]("wid" + a, "1");     $("#" + a).parent().toggle();     $(this).toggleClass("isopened isclosed")   };   c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() {     var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');     b.data("side", a).appendTo(d).click(e);     window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger("click")   })) }); N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Pour les versions PhpBB3, PunBB et Invision Code: $(function() {   var c = $("#left,#right"), d, e = function(a) {     var a = a.direct ? 0 : 1E3, b = $(this).data("side");     window.localStorage && localStorage[("none" == $("#" + b).css("display") ? "remove" : "set") + "Item"]("wid" + b, "1");     $("#" + b).stop(!0, !0).animate({width:"toggle", height:"toggle", opacity:"toggle"}, a);     $(this).toggleClass("isopened isclosed")   };   c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() {     $(this).find("script").remove();     var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');     "right" == a && $("#content").prepend($("#right").css("padding", "0 10px")).css("margin-right", 0);     b.data("side", a).appendTo(d).click(e);     window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger({type:"click", direct:!0})   })) }); N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Installation du CSS Panneau d'administration  Affichage  Couleurs - Feuille de style CSS Insérez ce code dans votre feuille de style personnalisé : Code: #widget-arrows {   height: 13px; } .widget-arrow {   height: 13px;   width: 16px;   border-radius: 4px;   float: left;   cursor: pointer;   background: #f5ebf7 url(https://i.imgur.com/zVQMs.png) no-repeat 0 -13px; } .widget-arrow.isright {   float: right; } .widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {   background-position: 0 0; } N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Cette astuce a été rédigée sur la base d'un script de Ea, et d'un tutoriel anglais. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.