- 0Réputation du message : 100% (7 votes)
par Shadow Ven 25 Oct 2013 - 11:01
| 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 :
- Citation :
- Panneau d'administration Modules Portail & Widgets - Configuration du portail - Structure
Si vous souhaitez ajouter le widget sur votre forum :
- Citation :
- 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
- 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 :
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é
