Blocco note per i tuoi utenti


Tutorial Blocco note per i tuoi utenti

Messaggio Da Niko Gio 9 Set 2021 - 12:56

Blocco note per i tuoi utenti


Questa astuzia ti mostra come creare un taccuino personale per i tuoi membri. Come il blocco note che si trova nella home del pannello di amministrazione, questo blocco note personale consente ai tuoi membri di poter annotare informazioni che saranno le uniche a poter consultare.

Blocco note per i tuoi utenti 20-07-10

Tieni presente che questo trucco utilizza la funzione di archiviazione del browser locale, quindi lo script non avrà alcun effetto per un browser IE inferiore a IE8. Inoltre, svuotando i dati del sito (cookie) dal browser, perderai le informazioni inserite nel blocco note.

Inserimento dello script

Pannello di amministrazione ► Moduli ► HTML & JAVASCRIPT - Gestione codice Javascript

Assicurati che la gestione dei codici JavaScript sia attivata , quindi crea un nuovo javascript con il titolo "taccuino personale dei membri" (facoltativo) e per il posizionamento "Su tutte le pagine"
Codice:
$(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)) || 'Benvenuti sul tuoblocco note personale, ' + _userdata.username + ' !';
    notepad.oninput ? notepad.oninput = handler : notepad.onkeyup = handler;
  }
});

L'unica impostazione indicata in questo codice è la frase predefinita che è possibile visualizzare. Ecco la frase è:

Codice:
'Benvenuti sul tuoblocco note personale, ' + _userdata.username + ' !';

Sei libero di poterlo personalizzare in base al contesto del tuo forum.:bene:

Inserimento del codice CSS

Il codice CSS sottostante consente di personalizzare la visualizzazione del blocco note. Puoi personalizzarlo in base al contesto del tuo forum.
Pannello di amministrazione ► Visualizzazione ► Immagini e colori - colori (scheda Foglio di stile CSS)

Codice:
/* Blocco-note */
 
.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%;
}

Non dimenticare di fare clic sul pulsante Convalida per salvare le modifiche.

Posizionamento del blocco note

Diversi posti possono essere indicati per posizionare questo blocco note:
  • Pannello di amministrazione ► Moduli ► Portale e widget - Gestione dei widget del forum

  • Pannello di amministrazione ► Moduli ► HTML & JAVASCRIPT - Gestione delle pagine HTML

  • Pannello di amministrazione ► Display ► Home page - Generale


Indipendentemente dalla posizione (che accetta HTML), è necessario compilare il seguente codice HTML:
Codice:
<div style="display:block;" class="panel_bn_global">
    <div class="panel_bn_header_global">Blocco Note</div>
    <textarea id="fa_notepad" class="notepad"></textarea>
</div>

Non dimenticare di fare clic sul pulsante Convalida per salvare le modifiche.


Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 25
Messaggi : 8539
Località : Provincia di Varese

Visualizza il profilo https://www.openstudio.one
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto


 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.