Créer un post-it sur l'index du forum pour les administrateurs

[MävenRâleuse (Admin)]

Créer un post-it sur l'index du forum pour les administrateurs

Salut à toi !!

Parfois, sur un forum, on a des choses planifiées, des tâches à faire régulièrement ou non. Mais si tu es aussi tête de linotte que moi, il t'arrive peut-être d'oublier... Ça arrive !
Je vais donc t'apprendre à faire un post-it que tous les administrateurs pourront mettre à jour facilement sans passer par le PA :

Spoiler:

  Ce tutoriel est adaptable à toutes les versions de Forumactif
Avoir des connaissances basiques en html / css est conseillé pour pouvoir comprendre la mise en place
Il ne faut pas que tu sois effrayé par le javascript.

On prépare le message contenu dans le post-it

Tout d'abord, très simple, tu vas devoir créer un sujet dans ta zone privée du forum, y mettre le titre de ton choix et le contenu de ce que tu veux afficher sur l'index dans le post-it :

Spoiler:

Il faut récupérer le lien de ton sujet et du message en particulier (pour moi : http://maven.forumactif.org/t36-post-it-des-admins#51)

Pour le récupérer, sur certaines versions l'url est récupérable quand tu clique sur le titre du message dans le sujet. Pour d'autres versions, il te suffit en envoyant le sujet de récupérer l'URL tout de suite. Ce qui est présent derrière le # est très important

On passe à la suite maintenant !

Une petite modification de template

Je pars d'un template non modifié. Si tes templates sont personnalisés et que tu ne sais pas où le placer n'hésite pas à demander.

Ici ça va être très rapide ! Pour afficher le post-it sur l'index du forum on va aller modifier le template Index_body et juste avant :

Code:

<!-- BEGIN message_admin_index -->

Tu vas placer ceci :

Code:

<div id="post-it-admin"  class="displayNone"></div>

Tu enregistres et tu publies.

Un peu de javascript

On va faire un peu de javascript. J'ai complètement commenté le code pour que tu puisses comprendre.
Il est à installer dans PA > Module > Gestion des codes javascript > Créer un nouveau > A appliquer sur l'index.

Il faut mettre à jour le lienMsg ainsi que la valeur qui suit le # sans retirer le "p" :

Code:

var lienMsg = "/t36-post-it-des-admins";

Code:

 $('#post-it-admin').load(''+ lienMsg + '#p51 ' + cheminMsg +'');


La version est également à mettre à jour :

Code:

var versionForum = 'modernbb';

Voilà le script complet à installer :

Code:

// Lorsque la page est chargée
$(function(){
  
  // on indique la version du forum
  // attention de bien respecter les écritures ci-dessous
  // invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
  var versionForum = 'modernbb';

  // On déclare une variable qui va récupérer les liens du footer
  // et une variable qui contient le chemin d'un message
  // Ainsi que la variable contenant le lien du message contenant le post-it
      
  var lien, cheminMsg;
  var lienMsg = "/t36-post-it-des-admins";
  
    switch (versionForum) {
        /* phpbb2 */
        case 'phpbb2':
             lien = $('#page-footer').find('a').html();
         cheminMsg = ".postbody > div";
            break;
        /* phpbb3 */
        case 'phpbb3':
             lien = $('#page-footer .copyright').find('a').html();
         cheminMsg = ".postbody .content > div";
            break;
        /* punBB */
        case 'punbb':
             lien = $('#pun-foot .center').find('a').html();
         cheminMsg = ".postbody .entry-content > div";
            break;
        /* Invision */
        case 'invision':
             lien = $('#ipbwrapper .center').find('a').html();
         cheminMsg = ".postbody .post-entry > div";
            break;
         /* Awesome BB */
        case 'awesomebb':
             lien = $('#page-footer .copyright').find('a').html();
         cheminMsg = ".post-body .post-content";
            break;
        /* modernbb */
        default:
             lien = $('#page-footer .copyright-body').find('a').html();
         cheminMsg = ".postbody .content > div";
            break;
    }
   // Si le lien "panneau d'aministration" est présent (= si c'est un admin qui est connecté)
    if(lien != null){
      // On retire la classe displayNone si elle existe au bloc contenant du post-it
      // Et on rempli notre bloc, qui n'est plus caché, avec le contenu du message ciblé
      if(lien.indexOf('Panneau d\'administration') > -1){
          $('#post-it-admin').toggleClass('displayNone');
            setTimeout(function(){
            $('#post-it-admin').load(''+ lienMsg + '#p51 ' + cheminMsg +'');
          },
          100
        );
       }
    }
});

Et de la mise en page !

Maintenant on va ajouter la CSS : PA > Affichage > Couleurs > Feuille de style CSS :
Tu peux personnaliser l'apparence du post-it avec l'id "post-it-admin". N'hésites pas à jouer sur le "left" et le "top" pour le placer où tu le souhaites

Code:

body{
 position:relative;
}
.displayNone{
 display:none !important;
}
#post-it-admin{
  position:absolute;
  padding:10px;
  left:10px;
  top:150px;
  background: #f7f4ea;
  border:#9c9577 1px solid;
  width:200px;
}


---

Et voilà ! Tu as un superpost-it pour toi et tes administrateurs !
Si tu as des questions n'hésite pas à les poser

[PêpêcheMascotte]

Hello hello

Le JS vient d'être mis à jour pour ajouter un test de nullité sur la variable "lien" (sans ce test, le js pouvait entraîner des bugs avec la toolbar ou d'autres js).

[InvitéInvité]

Merci pour cet astuce!

Je viens de la mettre en place. C'est super pour ma petite mémoire

[Contenu sponsorisé]