Widget derniers sujets d'un sous-forum isolé

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Widget derniers sujets d'un sous-forum isolé

Message 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.

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

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


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

  1. Nom du widget : Derniers sujets du [forum] [sous-forums] [nom] ;

  2. Utiliser une table type : à votre convenance ;

  3. Titre du widget : Derniers sujets du [forum] [sous-forums] [nom] ;

  4. 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


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


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
    }

Shadow

Shadow
Modéractive
Modéractive

Féminin
Messages : 24354
Inscrit(e) le : 30/03/2007

Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum