Widget : Sujets récents d'un sous-forum spécifique

[AdminAdministrateurs]

Widget : Sujets récents d'un sous-forum spécifique

Lien du tuto :
===> https://help.forumotion.com/t129060-widget-recent-topics-of-a-specific-sub-forum

Traduction du tuto

Ce tutoriel vous permettra de créer un widget qui affichera les sujets récents d'un sous-forum spécifique.

Voici un exemple plus significatif

Je veux faire un widget qui affiche tous les sujets récents dans mon sous-forum "Divers Tutos"

1 - Créer un widget et ajouter le contenu suivant

Panneau d'administration > Modules > Portail et Widgets > Gestion des widgets du forum > Créer un widget

Code:

<div id="newsareal1" class="newsareal"> </div>

Exemple

Voir :

Enregistrez votre widget et mettez-le dans votre colonne.

2 - Créez un nouveau Javascript et ajoutez le code suivant en fonction de la version de votre forum

Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript > créer un nouveau script

phpBB2 :

Code:

jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f5-divers-tutos div.topictitle:lt(11)");
});

phpBB3 & ModernBB :

Code:

jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f5-divers-tutos div.topic-title-container:lt(11)");
});

PunBB & Invision :

Code:

jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f5-divers-tutos a.topictitle:lt(11)");
});

Exemple

Voir :

N'oubliez pas de placer votre Javascript "sur toutes les pages".

Il conviendra également de vérifier que les zones mises en évidence dans l'exemple correspondent à votre forum.

"newsreal1" doit apparaître dans votre widget.

Remplacez "/f5-divers-tutos" par ce qui se trouve dans l'URL de votre sous-forum.

Si vous souhaitez modifier le nombre de sujets récents affichés, il suffit de changer le 11 dans votre Javascript.

Lorsque vous avez terminé, enregistrez votre Javascript.

3 - Ajoutez le code CSS suivant qui correspond à la version de votre forum

Panneau d'administration > Affichage > Images et couleurs > Couleurs> Feuille de style CSS

phpBB2 :

Code:

.newsareal 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;
}
.newsareal div.topictitle:hover {
background-color: #D8DEDE;
}
.newsareal div.topictitle a {
color: #708090 !important;
text-decoration: none !important;
text-shadow: #fff 1px 1px 0px
}

phpBB3 & ModernBB :

Code:

.newsareal 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;
}
.newsareal div.topic-title-container:hover {
background-color: #D8DEDE;
}
.newsareal div.topic-title-container a {
color: #708090 !important;
text-decoration: none !important;
text-shadow: #fff 1px 1px 0px
}

PunBB & Invision :

Code:

.newsareal 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;
text-decoration: none !important;
}
.newsareal a.topictitle:hover {
background-color: #D8DEDE;
color: #708090 !important;
text-shadow: #fff 1px 1px 0px
}

Exemple

Voir :

Ensuite, sauvegardez votre CSS et vous avez terminé!