Module sujets récents sur la PA ou le QEEL - Facile - Lyxiae

Bonjour !

Aujourd'hui, on va parler widgets et modules et, en particulier, d'un module très utile pour une page d'accueil ou qui est en ligne de forum : le module sujets récents.
Ce module du portail permet d'afficher les derniers sujets actifs du forum et donc, les derniers messages postés. La liste des sujets peut être défilante ou un simple scroll et le nombre de sujets affichés dans la liste peut être réglable. En somme, un module très utile pour mettre en avant les derniers sujets actifs du forum et suivre les actualités d'un coup d'oeil rapide.

Quels sont les prérequis ?

- Avoir accès aux templates via le compte fondateur
- Avoir accès aux modules Javascript sur le panneau d'administration
- Avoir accès au portail du forum.
- Savoir se repérer dans les templates en general (mais tout sera guide, ne vous en faites pas).
- Une connaissance basique du html / css est un gros plus, en particulier pour personnaliser le module par la suite.




Tout d'abord, quelques réglages de bases sont à effectuer pour activer le module des derniers sujets actifs. Il vous faut commencer par activer le portail dans le panneau d'administration. Pour cela, rendez vous dans l'onglet Modules > Configuration du Portail, puis l'activer sur votre forum.

Une fois le portail activé, veillez à ce qu'il soit affiché.

Spoiler:

Ensuite, cliquez sur le lien "structure" associé à votre portail sur la page de configuration du portail. Vous aurez accès à la page de configuration de la structure du portail qui contient probablement de nombreux modules. Enlevez les, et ne laissez que le module "sujets récents" à l'emplacement ci-dessous (normalement, ça devrait être celui qu'il a déjà).

Spoiler:

Une fois ceci fait, rendez vous sur la page Affichage > Généralites et réglez la redirection de l'adresse du forum comme ceci :

Spoiler:

Il vous faudra peut être attendre quelques minutes pour que tout soit bon mais, normalement, l'adresse de votre forum devrait vous rediriger vers l'index du forum et non le portail (ce qui n'était pas le cas juste avant).

Vient ensuite la partie technique.

Tout d'abord, nous allons nous rendre dans les templates du Portail et trouver le mod_recent_topics. Dans ce template, placez le bloc suivant :

Code:

<div id="recent_t"></div>

De façon à englober la totalité du template. C'est à dire ouvrir la div au début de template et la refermer tout à la fin. Enregistrez, et publiez le template. C'est tout pour celui-ci.

Rendez vous ensuite dans le template dans lequel vous voulez placer le module. Si votre page d'accueil est dans le overall_header, allez dans ce template, si c'est dans le Qui est en Ligne, rendez vous dans le index_body ou le overall_footer_begin selon où vous l'avez placé. Vous pouvez aussi placer ce code dans la Page d'Accueil via le Panneau d'Administration.

Vous devez ensuite placer le code suivant, tel quel :

Code:

<div id="recent_topics"></div><script type="text/javascript">jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('#recent_t').html());});</script>

Le code javascript va prendre le module sur le portail en sélectionnant l'id que nous avons attribué à tout le template du module sujets récents et le placer dans la div "recent_topics". A partir de là, la taille du module dépendra du style appliqué au bloc dans lequel il est placé, ou simplement du style que vous donnerez à la div "recent topics".

Pour ce qui est du style du module en tant que tel, vous pouvez le modifier tant en HTML qu'en CSS grâce au template mod_recent_topics et à votre feuille de style CSS.

Le module peut être réglé pour défiler automatiquement ou avec un scroll. Vous pouvez aussi déterminer le nombre de sujets affichés dans le module. Pour faire ces modifications, il vous suffit de vous rendre dans la page de configuration de la structure du portail, cliquez sur le petit engrenage sur le module sujets récents.

Spoiler:

Pour ce qui est de la hauteur, il est plus simple et fiable de la régler via CSS si vous stylisez votre module. Si vous souhaitez garder le module sans le styliser vous même, vous pouvez simplement ajouter ceci dans votre css en réglant la hauteur et la largeur comme vous le souhaitez :

Code:

.mod-recent-row {
    height: 150px; /*Hauteur réglable*/
    overflow: auto;
}

#recent_topics .module {
width: 250px; /*Pour modifier la largeur du module*/
}

Et voilà ! Vous pouvez placer votre module ou vous voulez sur l'index et le styliser comme vous le souhaitez.

N'hésitez pas si vous avez des questions ou des soucis !