Bloc-notes pour vos membres

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Bloc-notes pour vos membres

Message par Luzz Ven 30 Juil 2021 - 16:40

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.

Bloc-notes pour vos membres 20-07-10

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 :enreg: afin de sauvegarder les modifications.

Luzz

Luzz
Adminactive
Adminactive

Autre / Ne pas divulguer
Messages : 2574
Inscrit(e) le : 25/10/2007

Voir le profil de l'utilisateur https://forum.forumactif.com
Luzz a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum