Widget dernier sujets d'un sous-forum isolé

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

  • 0

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

Message par Shadow le Ven 25 Oct 2013 - 11:01

Widget dernier 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.

Voici un exemple qui sera plus parlant. Je veux faire un widget sur tout les sujets récents de mon sous-forum "La santé de votre chat":




1. Créer un Widget et ajouter le contenu ci-dessous


Si vous ne savez pas comment marche un widget merci de lire ce tutoriel.

Code:
<div id="newsareal1"> </div>

Exemple:



Enregistrez votre widget et placez-le dans votre colonne widget.

2. Créer un Javascript et rajouter le code suivant


Attention à bien inclure le code Javascript correspondant à votre version de forum.
Si vous ne savez pas comment fonctionne la gestion des codes Javascript merci de lire ce tutoriel.

Version PhpBB2

Code:
jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f1-la-sante-de-votre-chat div.topictitle:lt(11)");
});

Version PhpBB3

Code:
jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f1-la-sante-de-votre-chat div.topic-title-container:lt(11)");
});

Version PunBB

Code:
jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f1-la-sante-de-votre-chat a.topictitle:lt(11)");
});

Version Invision :

Code:
jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f1-la-sante-de-votre-chat a.topictitle:lt(11)");
});

Exemple:



Faites bien attention à afficher votre Javascript sur "toutes les pages".
Il faudra aussi bien vérifier que ce que je vous ai sougliné en exemple corresponde bien à ce qui se trouve dans votre forum.

"newsreal1" doit apparaitre aussi dans votre widget.
Remplacer  "f1-la-sante-de-votre-chat" par ce qui se trouve dans l'url de votre forum.

Exemple:



Si vous le souhaitez vous pouvez afficher plus de 4 sujets récents. Il vous suffit de changer le 4 dans votre Javascript.




Pensez à bien enregistrer votre Javascript.

3. Rajouter ce code dans votre CSS


Pour cela, allez dans le Panneau d'administration -> Affichage -> Images et couleurs -> Couleurs -> Feuille de style CSS et copiez le code correspondant à votre version de forum.

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('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
    }
    #newsareal1 div.topictitle:hover {
    background-color: #D8DEDE;
    }
    #newsareal1 div.topictitle a {
    color: #708090 !important;
    text-decoration: none !important;
    text-shadow: #fff 1px 1px 0px
    }

Version PunBB

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('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
    text-decoration: none !important;
    }
    #newsareal1 a.topictitle:hover {
    background-color: #D8DEDE;
    color: #708090 !important;
    text-shadow: #fff 1px 1px 0px
    }

Version PhpBB3

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('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
    }
    #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
    }

Version 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('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
    text-decoration: none !important;
    }
    #newsareal1 a.topictitle:hover {
    background-color: #D8DEDE;
    color: #708090 !important;
    text-shadow: #fff 1px 1px 0px
    }

Il ne vous reste plus qu'à enregistrer votre CSS et le tour est joué! Wink



Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

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

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

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


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