PêpêcheMascotte- Messages : 4428
Afficher le widget des sujets récents sur son en-tête
Jeu 4 Juil 2019 - 15:00
Toutes versions
Afficher le widget des sujets récents sur son en-tête
Bonjour 
C'est une demande qui revient souvent, alors, autant en faire un tutoriel utile à tous ^^
Dans ce message, nous allons voir comment afficher le widget des derniers messages sur notre message d'en-tête (pa).
Pré-requis :
• Avoir accès au template du forum,
• savoir utiliser les iframes (voir le tutoriel).
Tout se passe dans le panneau d'administration.
Pour commencer, on va faire les manipulations suivantes :
1) On va dans :
Modules > Portail & Widgets > Configuration du portail > Afficher le portail : oui
2) On va ensuite aller dans :
Général > Affichage > Page d'accueil > Généralités > L'adresse de votre forum dirige vers : L'index du forum
3) On termine par :
Modules > Portail & Widgets > Configuration du portail > Afficher le portail : non
C'est bon, on va pouvoir récupérer notre widget.
Toujours dans la même page, on va créer une nouvelle page qu'on va appeler "derniers sujets" et dans celle-ci, on va juste appeler le widget "sujets récents".
On enregistre.
On retourne ensuite sur cette page Modules > Portail & Widgets > Configuration du portail et on clique sur "voir le portail" que l'on vient de créer :
On va avoir besoin du lien juste après.
Pour ça, on va aller dans : Panneau d'admin > Affichage > Templates > portail > mod_recent_topics. L'idée ici ça va être de donner une nouvelle classe au bloc pour pouvoir le récupérer.
Pour cela, voilà les modifications à faire en fonction des versions de forum :
En enregistre et on publie.
Maintenant, on va créer une page HTML qui va récupérer notre widget. Pour ça, on va aller dans Modules > HTML & JAVASCRIPT
> Gestion des pages HTML. On va créer une nouvelle page en mode avancé et on va y copier/coller ce code :
Il faut que tu changes ceci :
A ce stade, tu dois avoir un truc qui ressemble à ça :
http://miettes.lebonforum.com/h5-nps-tuto-widget-sujets-recents-dans-un-message
Qu'il s'agisse du nombre de topics à afficher, du défilement, de son sens et de la vitesse, tout ce passe dans les réglages du widget.
Il faut savoir que 8000 = 8sec. Ça veut dire que l'animation de défilement doit se faire en 8 secondes. Si tu as choisi d'afficher 10 sujets, tu vas faire défiler ses 10 sujets en 8 sec. (au début, je vois le 1er sujet, 8 secondes plus tard, je vois le dernier). Idéalement, je te conseille de compter 1 seconde par sujet
Pour finir, il ne te reste plus qu'à appeler cette page HTML à l'endroit où tu le veux sur ton en-tête en utilisant les iframes. Par exemple :
De mon coté, je suis allée dans :
Panneau d'administration > Affichage > Page d'accueil > Généralité.
et j'ai ajouté mon iframe dans la zone de saisi de texte où j'ai déjà le reste de mon en-tête :
Tu peux voir le rendu sur mon forum de test.
Si tu as un souci pour mettre en place ça sur ton forum, n'hésite pas à nous demander un coup de pouce
C'est une demande qui revient souvent, alors, autant en faire un tutoriel utile à tous ^^
Dans ce message, nous allons voir comment afficher le widget des derniers messages sur notre message d'en-tête (pa).
Pré-requis :• Avoir accès au template du forum,
• savoir utiliser les iframes (voir le tutoriel).
Utilisation du portail
Tout se passe dans le panneau d'administration.Pour commencer, on va faire les manipulations suivantes :
1) On va dans :
Modules > Portail & Widgets > Configuration du portail > Afficher le portail : oui
2) On va ensuite aller dans :
Général > Affichage > Page d'accueil > Généralités > L'adresse de votre forum dirige vers : L'index du forum
3) On termine par :
Modules > Portail & Widgets > Configuration du portail > Afficher le portail : non
C'est bon, on va pouvoir récupérer notre widget.
Toujours dans la même page, on va créer une nouvelle page qu'on va appeler "derniers sujets" et dans celle-ci, on va juste appeler le widget "sujets récents".
On enregistre.
On retourne ensuite sur cette page Modules > Portail & Widgets > Configuration du portail et on clique sur "voir le portail" que l'on vient de créer :
On va avoir besoin du lien juste après.
Une modification de template
Pour ça, on va aller dans : Panneau d'admin > Affichage > Templates > portail > mod_recent_topics. L'idée ici ça va être de donner une nouvelle classe au bloc pour pouvoir le récupérer.
Pour cela, voilà les modifications à faire en fonction des versions de forum :
- Spoiler:
• pour phpBB2, comme il y a plusieurs modifications à faire, voici le template (il te suffit de remplacer l'actuel)
- Code:
<!-- BEGIN scrolling_row -->
{MARQUEE_JS_SRC}
<table class="forumline genmed sujets-recents" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="catLeft" height="25">
<span class="genmed module-title">{L_RECENT_TOPICS}</span>
</td>
</tr>
<tr>
<td class="row1" style="height:{SCROLL_HEIGHT}px;">
<div id="comments_scroll_div">
<div class="marquee" align="left" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
<!-- BEGIN recent_topic_row -->
» <a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TITLE}</a><br />
<img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY}
<!-- BEGIN switch_poster -->
<a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a><br /><br />
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}<br /><br />
<!-- END switch_poster_guest -->
<!-- END recent_topic_row -->
</div>
</div>
</td>
</tr>
</table>
<script>
$(".marquee").marquee();
</script>
<!-- END scrolling_row -->
<!-- BEGIN classical_row -->
<table class="forumline sujets-recents" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="catHead" height="25"><span class="genmed"><b><center>{L_RECENT_TOPICS}</center></b></span></td>
</tr>
<tr>
<td class="row1" align="left"><span class="gensmall">
<!-- BEGIN recent_topic_row -->
» <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br /><img src="{ICON_TIME}" alt="" />{BY}
<!-- BEGIN switch_poster -->
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
{ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
<!--
<a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
-->
<!-- END recent_topic_row -->
</span></td>
</tr>
</table>
<!-- END classical_row -->
• pour phpBB3 et modernBB :
- Code:
<div class="module sujets-recents">
• pour punBB :
- Code:
<div class="module main sujets-recents">
• pour invision :
- Code:
<div class="module borderwrap sujets-recents">
• pour AwesomeBB :
- Code:
<div class="box sujets-recents">
En enregistre et on publie.
La page html
Maintenant, on va créer une page HTML qui va récupérer notre widget. Pour ça, on va aller dans Modules > HTML & JAVASCRIPT
> Gestion des pages HTML. On va créer une nouvelle page en mode avancé et on va y copier/coller ce code :
- Code:
<!DOCTYPE html>
<html ng-app="angularApp" ng-controller="appController as app" ng-cloak>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sujets Récents</title>
<style>
/*** Le bloc qui contient le widget ***/
#bloc-sujets-recents{
background: #fff; /* Couleur de fond */
box-sizing: border-box;
padding: 10px;
width: 100%; /* Largeur */
}
/*** Le widget ***/
.sujets-recents{
background: #e4b99e; /* Couleur de fond */
padding: 5px;
border: 2px solid #f16e00; /* Bordures*/
}
/*** Titre ***/
.h3{
border-bottom: 2px solid #f16e00; /* Bordures*/
color: #f16e00; /* Couleur du texte */
font-size: 14px; /* Taille de la typo */
font-weight: bold; /* Texte en gras */
line-height: 1.2;
margin-bottom: 4px;
}
.h3::before{
content: "►";
padding-right: 5px;
}
/*** Sujet ***/
.topic,
.marquee .mod-recent-row{
font-size: 12px;
line-height: 1;
margin-bottom: 2px;
}
.topic::before,
.marquee .mod-recent-row::before{
content: "•";
padding-right: 5px;
}
.topic a,
.marquee .mod-recent-row a{
color: #ab6031;
}
.mod-recent-author{
margin-left: 4px;
}
.mod-recent-info::before{
content: ":";
padding: 0 4px;
}
.do-marquee {
height: {{height}};
width: 100%;
overflow: hidden;
position: relative;
}
.do-marquee .marquee {
display: block;
width: 100%;
position: absolute;
animation: {{direction}} {{duree}}ms linear infinite;
height: auto !important;
top: {{height}};
}
.do-marquee .marquee:hover{
animation-play-state:paused;
cursor: pointer;
}
@keyframes up {
0% { top: {{height}}; }
100% { top: -{{heightMarquee}}px; }
}
@keyframes down {
0% { top: -{{heightMarquee}}px; }
100% { top: {{height}}; }
}
</style>
<!-- Pour éviter que les liens ne s'ouvrent dans l'iframe mais bien dans la page actuelle -->
<base target="_parent">
</head>
<body>
<div id="bloc-sujets-recents"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" language="Javascript" type="text/javascript"></script>
<script>
; (function () {
$('#bloc-sujets-recents').load('/portal?pid=1 .sujets-recents');
// Met en place défilement
var gestionMarquee = setInterval(function () {
if ($('.marquee').length) {
$('#comments_scroll_div').addClass('do-marquee');
stopGestionMarquee();
}
}, 100);
function stopGestionMarquee() {
clearInterval(gestionMarquee);
};
})();
var app = angular.module("angularApp", []);
app.controller("appController", function($scope, $sce, $timeout){
var recupInfo = setInterval(function () {
if (angular.element('.do-marquee').length) {
$timeout(function(){
var heightBloc = angular.element('.marquee').attr('style');
heightBloc = heightBloc.split(';');
heightBloc = heightBloc[1].split(':');
$scope.height = heightBloc[1];
$scope.duree = angular.element('.marquee').attr("data-duration");
$scope.heightMarquee = angular.element('.marquee').height();
$scope.direction = angular.element('.marquee').attr('data-direction');
},10);
stopRecupInfo();
}
}, 110);
function stopRecupInfo() {
clearInterval(recupInfo);
};
});
</script>
</body>
</html>
Il faut que tu changes ceci :- Code:
/portal?pid=3
A ce stade, tu dois avoir un truc qui ressemble à ça :http://miettes.lebonforum.com/h5-nps-tuto-widget-sujets-recents-dans-un-message
Les réglages
Qu'il s'agisse du nombre de topics à afficher, du défilement, de son sens et de la vitesse, tout ce passe dans les réglages du widget.
Il faut savoir que 8000 = 8sec. Ça veut dire que l'animation de défilement doit se faire en 8 secondes. Si tu as choisi d'afficher 10 sujets, tu vas faire défiler ses 10 sujets en 8 sec. (au début, je vois le 1er sujet, 8 secondes plus tard, je vois le dernier). Idéalement, je te conseille de compter 1 seconde par sujet Installation sur l'en-tête
Pour finir, il ne te reste plus qu'à appeler cette page HTML à l'endroit où tu le veux sur ton en-tête en utilisant les iframes. Par exemple :
- Code:
<iframe name="Sujets récents" src="http://miettes.lebonforum.com/h5-nps-tuto-widget-sujets-recents-dans-un-message" height="200px" width="100%" align="center" marginheight="0" frameborder="0" scrolling="no"></iframe>
De mon coté, je suis allée dans :
Panneau d'administration > Affichage > Page d'accueil > Généralité.
et j'ai ajouté mon iframe dans la zone de saisi de texte où j'ai déjà le reste de mon en-tête :
- Code:
<br />
<div class="d-flex">
<div id="date-infos">
</div>
<div id="wrapper-sjt-recent">
<iframe name="Sujets récents" src="http://miettes.lebonforum.com/h5-nps-tuto-widget-sujets-recents-dans-un-message" height="200px" width="100%" align="center" marginheight="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
<div id="bloc-derniere-stats">
</div>
Tu peux voir le rendu sur mon forum de test.
Si tu as un souci pour mettre en place ça sur ton forum, n'hésite pas à nous demander un coup de pouce
MiettesRâleuse (Admin)- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2205 
Re: Afficher le widget des sujets récents sur son en-tête
Ven 27 Mar 2020 - 9:44
Hello hello
MàJ du tuto pour phpbb2 quand on choisit de faire défiler les sujets
MàJ du tuto pour phpbb2 quand on choisit de faire défiler les sujets
InvitéInvité
Re: Afficher le widget des sujets récents sur son en-tête
Dim 6 Déc 2020 - 6:28
Coucou les Râleuses,
D'abord merci du partage. J'ai utilisé ce codage avec bien du mal lol.
J'ai réussi à enlever la couleur des liens auto et le soulignement mais il y a encore une chose qui me prend le chou. Je n'arrive pas à enlever le titre du widget pour avoir une PA harmonieuse
J'ai essayé d'enlevé cette partie, de mettre la même couleur que le background pour le cacher
mais rien ne fonctionne 
Je me demande si c'est bien cette partie qu'il faut rectifier
Merci de votre aide
D'abord merci du partage. J'ai utilisé ce codage avec bien du mal lol.
J'ai réussi à enlever la couleur des liens auto et le soulignement mais il y a encore une chose qui me prend le chou. Je n'arrive pas à enlever le titre du widget pour avoir une PA harmonieuse
J'ai essayé d'enlevé cette partie, de mettre la même couleur que le background pour le cacher
mais rien ne fonctionne Je me demande si c'est bien cette partie qu'il faut rectifier
- Code:
/*** Titre ***/
.h3{
border-bottom: 2px solid #f16e00; /* Bordures*/
color: #f16e00; /* Couleur du texte */
font-size: 14px; /* Taille de la typo */
font-weight: bold; /* Texte en gras */
line-height: 1.2;
margin-bottom: 4px;
}
.h3::before{
content: "►";
padding-right: 5px;
}
Merci de votre aide
MävenRâleuse (Admin)- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4099
Re: Afficher le widget des sujets récents sur son en-tête
Dim 6 Déc 2020 - 11:28
Coucou @Tara.
Ca serait plus facile avec un lien pour qu'on puisse voir
Mais essaie en allant modifier le tempalte mod_recent_topics dans Affichage > Templates > Portail
Et supprime cette partie : (elle peut changée selon ta version, je me suis basées sur phpBB2)
Ca serait plus facile avec un lien pour qu'on puisse voir
Mais essaie en allant modifier le tempalte mod_recent_topics dans Affichage > Templates > Portail
Et supprime cette partie : (elle peut changée selon ta version, je me suis basées sur phpBB2)
- Code:
<tr>
<td class="catHead" height="25"><span class="genmed"><b><center>{L_RECENT_TOPICS}</center></b></span></td>
</tr>
- Code:
<tr>
<td class="catLeft" height="25">
<span class="genmed module-title">{L_RECENT_TOPICS}</span>
</td>
</tr>
- InvitéInvité
Re: Afficher le widget des sujets récents sur son en-tête
Dim 6 Déc 2020 - 16:37
Coucou Mäven ,
Toutes mes excuses pour le lien mais je vais te le donner car j'ai autre souci
Tout d'abord merci car le titre a bien disparu avec la manipulation ci-dessus mais depuis je n'ai plus le défilement.
Bon le défilement en lui même ce n'est pas méchant mais j'aimerais au moins avoir une scrollbar mais je ne vois pas où la placer (sinon je n'ai que 3 sujets récents)
Toutes mes excuses pour le lien mais je vais te le donner car j'ai autre souci
Tout d'abord merci car le titre a bien disparu avec la manipulation ci-dessus mais depuis je n'ai plus le défilement.
Bon le défilement en lui même ce n'est pas méchant mais j'aimerais au moins avoir une scrollbar mais je ne vois pas où la placer (sinon je n'ai que 3 sujets récents)
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2205
Re: Afficher le widget des sujets récents sur son en-tête
Dim 6 Déc 2020 - 18:57
Coucou
Pour la scrollbar, tu peux tenter ça :
Par contre, tu n'as pas suivi exactement le tuto ? Tu n'appelles pas une iframe ?
Pour la scrollbar, tu peux tenter ça :
- Code:
#recent-topics .marquee{
overflow: auto !important;
}
Par contre, tu n'as pas suivi exactement le tuto ? Tu n'appelles pas une iframe ?
- InvitéInvité
Re: Afficher le widget des sujets récents sur son en-tête
Lun 7 Déc 2020 - 7:02
Coucou Miettes;
Merci de ton aide mais je comprends pas ce que tu veux dire là
[quote="Miettes"
Par contre, tu n'as pas suivi exactement le tuto ? Tu n'appelles pas une iframe ?[/quote]
J'ai bien mon iframe
Merci de ton aide mais je comprends pas ce que tu veux dire là
[quote="Miettes"
Par contre, tu n'as pas suivi exactement le tuto ? Tu n'appelles pas une iframe ?[/quote]
J'ai bien mon iframe
- MiettesRâleuse (Admin)
- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2205
Re: Afficher le widget des sujets récents sur son en-tête
Lun 7 Déc 2020 - 11:35
coucou
Hier quand je suis allée jeter un oeil, ça ne marchait pas :/
Du coup, le scroll fonctionne d'après ce que je vois :p Tout est réglé du coup ?
Hier quand je suis allée jeter un oeil, ça ne marchait pas :/
Du coup, le scroll fonctionne d'après ce que je vois :p Tout est réglé du coup ?
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum