Bloc-notes pour vos membres

[Luzz]

Bloc-notes pour vos membres

Cette astuce vous explique comment créer un bloc-notes personnel pour vos membres. A l'instar du bloc-notes qui se trouve sur l'accueil du panneau d'administration, ce bloc-notes personnel permet à vos membres de pouvoir noter des informations qui seront les seuls à pouvoir consulter. A noter que cette astuce utilise la fonction stockage local de navigateur, donc le script n'aura pas d'effet pour un navigateur IE en dessous d'IE8. De plus, en vidant les données (cookies) de site du navigateur, vous perdrez les informations saisies dans le bloc-notes. Insertion du script Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "bloc-notes personnel des membres" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts). Code: $(function() {   var notepad = document.getElementById('fa_notepad');   if (notepad) {     var key = 'fa_notepad_u' + _userdata.user_id,         storage = window.localStorage,         handler = function() {           var key = 'fa_notepad_u' + _userdata.user_id,               val = this.value,               storage = window.localStorage;           storage ? storage[key] = val : my_setcookie(key, val);         };     notepad.value = (storage ? storage[key] : my_getcookie(key)) || 'Bienvenue sur votre bloc-notes personnel, ' + _userdata.username + ' !';     notepad.oninput ? notepad.oninput = handler : notepad.onkeyup = handler;   } }); Le seul paramétrage indiqué dans ce code est la phrase par défaut que vous pouvez afficher. Ici, la phrase est : Code: 'Bienvenue sur votre bloc-notes personnel, ' + _userdata.username + ' !'; Vous êtes libre de pouvoir la personnaliser selon le contexte de votre forum. Par exemple, pour un forum RPG Harry Potter, nous pourrions écrire : Code: 'Bienvenue sur votre rapeltout, ' + _userdata.username + ' !'; N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Insertion du CSS Le code CSS ci-dessous permet de personnaliser l'affichage du bloc-notes. Vous pouvez le personnaliser eu égard au contexte de votre forum. Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS) Code: /* Bloc-notes */ .panel_bn_global {     background: #dfdfe1;     box-shadow: 0px 3px 2px #aab2bd;     border-radius: 2px;     width: 400px; } .panel_bn_header_global {     background-color: #38445A;     border-radius: 2px;     color: #fff;     height: 30px;     line-height: 2.5em;     padding: 3px;     padding-left: 11px;     text-transform: uppercase; } .notepad {     background-color: #fcf8e3;     border: 1px solid #faebcc;     color: #8a6d3b;     height: 250px;     overflow: auto;     padding: 5px;     width: 97%; } N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Emplacement du bloc-notes Plusieurs endroits peuvent être indiqués pour placer ce bloc-notes : Panneau d'administration  Modules  Portail & Widgets - Gestion des widgets du forum Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des pages HTML Panneau d'administration  Affichage  Page d'accueil - Généralités Quel que soit l'emplacement (qui accepte le HTML), vous devez renseigner le code HTML suivant : Code: <div style="display:block;" class="panel_bn_global">     <div class="panel_bn_header_global">Bloc-notes</div>     <textarea id="fa_notepad" class="notepad"></textarea> </div> N'oubliez pas de cliquer sur le bouton afin de sauvegarder les modifications.

Cette astuce a été proposée par Bipo (juillet 2021), à partir d'une astuce d'Ange tuteur. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.