Widget derniers sujets d'un sous-forum isolé

[Shadow]

Widget derniers sujets d'un sous-forum isolé

Cette astuce vous permet de créer un widget qui affichera les sujets récents d'un de vos sous-forums. Création du Widget Si vous souhaitez ajouter le widget sur votre portail : Panneau d'administration  Modules  Portail & Widgets - Configuration du portail - Structure Si vous souhaitez ajouter le widget sur votre forum : Panneau d'administration  Modules  Portail & Widgets - Gestion des widgets du forum Nom du widget : Derniers sujets du [forum] [sous-forums] [nom] ; Utiliser une table type : à votre convenance ; Titre du widget : Derniers sujets du [forum] [sous-forums] [nom] ; Source du widget : ajoutez le code suivant : Code: <div id="newsareal1"> </div> N'oubliez pas de cliquer sur le bouton afin de sauvegarder les modifications. Création du script Sélection du script en fonction de la version de votre forum 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 "Derniers sujets d'un forum déterminé" et pour placement "Toutes les pages" (plus d'informations sur la gestion des scripts). Pour la version PhpBB2 Code: jQuery(document).ready(function(){ jQuery("#newsareal1").load("/fX- div.topictitle:lt(Y)"); }); Pour la version PhpBB3 et ModernBB Code: jQuery(document).ready(function(){ jQuery("#newsareal1").load("/fX- div.topic-title-container:lt(Y)"); }); Pour la version PunBB et Invision Code: jQuery(document).ready(function(){ jQuery("#newsareal1").load("/fX- a.topictitle:lt(Y)"); }); Pour la version AwesomeBB Code: jQuery(document).ready(function(){   jQuery("#newsareal1").load("/fX- div.posts-description h3 a:lt(Y)"); }); Paramétrage du script Sélection du forum (ou sous-forum) Dans un premier temps, il convient de sélectionner le forum (ou sous-forums) pour lequel vous souhaitez que les derniers sujets d'affichent dans le widget. Pour cela, il suffit de récupérer le numéro du forum (ou sous-forum) à partir de son adresse URL : Ainsi, il vous suffira de remplacer la variable X dans .load("/fX- par le numéro du forum (ou sous-forum). Détermination du nombre de sujets à afficher dans le widget Dans un second temps, il convient de déterminer le nombre de sujets qui s'affichera dans le widget "Derniers sujets". Pour cela, il convient simplement de remplacer la variable Y par le nombre de votre choix ! Par exemple, pour un forum en PhpBB3 : Code: jQuery(document).ready(function(){ jQuery("#newsareal1").load("/f8- div.topic-title-container:lt(10)"); }); J'ai remplacé la variable X par 8 car je souhaite afficher les derniers sujets du forum numéro 8, et j'ai remplacé la variable Y par 10 car je souhaite afficher les 10 derniers sujets publiés dans le forum numéro 8 ! N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder vos modifications. Création du CSS Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS) Pour la version PhpBB2 Code:   #newsareal1 div.topictitle {     display: block !important;     margin: 2px 1px 0;     padding: 2px 5px 5px 30px;     border: 1px solid #B1BFC0;     border-radius: 5px;     background: #F3F9F9 url('https://i.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;     max-width: 150px;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;     }     #newsareal1 div.topictitle:hover {     background-color: #D8DEDE;     }     #newsareal1 div.topictitle a {     color: #708090 !important;     text-decoration: none !important;     text-shadow: #fff 1px 1px 0px     } Pour la version PhpBB3 et ModernBB Code:   #newsareal1 div.topic-title-container {     display: block !important;     margin: 2px 1px 0;     padding: 2px 5px 5px 30px;     border: 1px solid #B1BFC0;     border-radius: 5px;     background: #F3F9F9 url('https://i.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;     max-width: 150px;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;     }     #newsareal1 div.topic-title-container:hover {     background-color: #D8DEDE;     }     #newsareal1 div.topic-title-container a {     color: #708090 !important;     text-decoration: none !important;     text-shadow: #fff 1px 1px 0px     } Pour la version PunBB et Invision Code:   #newsareal1 a.topictitle {     display: block !important;     margin: 2px 1px 0;     padding: 2px 5px 5px 30px;     border: 1px solid #B1BFC0;     border-radius: 5px;     background: #F3F9F9 url('https://i.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;     max-width: 150px;     overflow: hidden;     text-decoration: none !important;     text-overflow: ellipsis;     white-space: nowrap;     }     #newsareal1 a.topictitle:hover {     background-color: #D8DEDE;     color: #708090 !important;     text-shadow: #fff 1px 1px 0px     } Pour la version AwesomeBB Code:   #newsareal1 a {     display: block !important;     margin: 2px 1px 0;     padding: 2px 5px 5px 30px;     border: 1px solid #B1BFC0;     border-radius: 5px;     background: #F3F9F9 url('https://i.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;     max-width: 150px;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;     }     #newsareal1 a:hover {     background-color: #D8DEDE;     }     #newsareal1 a {     color: #708090 !important;     text-decoration: none !important;     text-shadow: #fff 1px 1px 0px     }

Cette astuce a été proposée Dana Domirani et Zen. Et actualisée par Bipo (août 2021). Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.