Le Deal du moment :
Nike : Promotions Sur Les Chaussures, ...
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4860

Afficher le widget des sujets récents sur son en-tête Empty Afficher le widget des sujets récents sur son en-tête

le Jeu 4 Juil 2019 - 15:00

Toutes versions

Afficher le widget des sujets récents sur son en-tête

Bonjour Smile

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

Idea Pré-requis :
• Avoir accès au template du forum,
• savoir utiliser les iframes (voir le tutoriel).

Utilisation du portail

Idea 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".
Afficher le widget des sujets récents sur son en-tête Portai11

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 :
Afficher le widget des sujets récents sur son en-tête Portai10

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}&nbsp;

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

Idea Il faut que tu changes ceci :
Code:
/portal?pid=3
par le lien de ton portail.

Idea 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.
Afficher le widget des sujets récents sur son en-tête Portai12

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

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 Smile

Miettes
Miettes
Râleuse (Admin)
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2153

Afficher le widget des sujets récents sur son en-tête Empty Re: Afficher le widget des sujets récents sur son en-tête

le Ven 27 Mar 2020 - 9:44
Hello hello Smile

MàJ du tuto pour phpbb2 quand on choisit de faire défiler les sujets Smile

_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses