Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

avatar

Shadow
Adminactive
Adminactive

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

https://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