Widget derniers sujets d'un sous-forum isolé

par **Shadow** Ven 25 Oct 2013 - 11:01

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

Citation :: Panneau d'administration  Modules  Portail & Widgets - Configuration du portail - Structure

Citation :: Panneau d'administration  Modules  Portail & Widgets - Gestion des widgets du forum

Widget derniers sujets d'un sous-forum isolé 27-06-17

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 :enreg:

afin de sauvegarder les modifications.

Création du script

Sélection du script en fonction de la version de votre forum

Citation :: 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 :

Widget derniers sujets d'un sous-forum isolé 15-08-40

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

Citation :: 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
}

Widget derniers sujets d'un sous-forum isolé

Vous et Forumactif...

Trucs et astuces