Pannello di Controllo Utente 1.0 - widget


Tutorial Pannello di Controllo Utente 1.0 - widget

Messaggio Da XSync il Mer 24 Nov 2010 - 18:18

Pannello di Controllo Utente 1.0 - widget


Descrizione tutorial
Grazie a questo Tutoriale potrete creare il vostro Pannello di Controllo Utente ( PCU ) personale.



Questo qui mostrato è un esempio di PCU. Potrete personalizzarlo a vostro piacimento.


Instrallazione
Allora, prima di tutto dobbiamo individuare lo Script che fa funzionare il PCU.

Codice:
<script type="text/javascript">
function aprichiudi(item) {
   elem=document.getElementById(item);
   visibile=(elem.style.display!="none")
   prefisso=document.getElementById("menu" + item);
   if (visibile) {
     elem.style.display="none";
     prefisso.innerHTML="<b>+</b>";
   } else {
      elem.style.display="block";
      prefisso.innerHTML="<b>-</b>";
   }
}
</script>

Questo Script non andrà modificato. Wink

Ora passiamo alla configurazione.  Il PCU funziona a Tabelle.

Per creare una tabella che comprima quelle coi Link, procedete così.
Codice:
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'><a id="menu*TAG*" href="javascript:aprichiudi('*TAG*');"><b>+</b></a></td>
<td><b>NOME</b></td>
</table><div id="*TAG*" style="display: none; margin-left: 2em;">
*QUI LE TABELLE SECONDARIE*
</div>

Sostituite *TAG* con un TAG a vostra scelta. Ce ne dovrà essere uno diverso per ogni tabella a compressione.

Potete anche inserire Tabelle a Compressione dentro a Tabelle a Compressione.

Codice:
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'><a id="menu*TAG*" href="javascript:aprichiudi('*TAG*');"><b>+</b></a></td>
<td><b>NOME</b></td>
</table><div id="*TAG*" style="display: none; margin-left: 2em;">
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'><a id="menu*TAG*" href="javascript:aprichiudi('*TAG*');"><b>+</b></a></td>
<td><b>NOME</b></td>
</table><div id="*TAG*" style="display: none; margin-left: 2em;">
*QUI LE TABELLE SECONDARIE*
</div>
</div>
Otterrete una Sotto-Tabella a Compressione.

Fatto ciò, dovrete passare ai contenuti. :bene:

Per creare una Tabella di contenuto, procedete così :

Codice:
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'></td>
<td><a href="LINK"><b>Nome</b></a></td>
</tr>
</table>

Potete inserirne quante volete all' interno delle Tabelle a Compressione.

Esempio:

Codice:
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'>
<a id="menuguide" href="javascript:aprichiudi('guide');"><b>+</b></a>
</td>
<td><b>Account</b></td>
</table><div id="guide" style="display: none; margin-left: 2em;">
<table border=0 cellpadding='1' cellspacing='1'>
<table cellpadding='1' cellspacing='1'><tr>
<td width='16'><a id="menuaccount" href="javascript:aprichiudi('account');"><b>+</b></a></td>
<td><b>Modifica Stato</b></td>
</table><div id="account" style="display: none; margin-left: 2em;">
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'></td>
<td><a href="/login.forum?connexion"><b>Connessione</b></a></td>
</tr>
</table>
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'></td>
<td><a href="/profile.forum?mode=register"><b>Registrazione</b></a></td>
</tr>
</table>
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'></td>
<td><a href="/login.forum?logout=true"><b>Disconnessione</b></a>
</td>
</tr>
</table>
</div>

Potete anche creare Tabelle che contengano solo testo, o qualunque cosa sufficientemente piccola vogliate.  cheers

Codice:
<table cellpadding='1' cellspacing='1'>
<tr>
<td width='16'></td>
<td>TESTO/CAMPO TESTO/QUELLO CHE VOLETE</td>
</tr>
</table>

Procedete creando Tabelle a Compressione e Sotto-Tabelle fino a ottenere la vostra struttura.

Finito questo processo, dovrete metterlo tra
Codice:
<table border="0" style="position:fixed;top:0px;left:0;height:0px;padding:0px 0px 0px 0px;margin: 0px 0px 0px 0px;background:url('') bottom center no-repeat;z-index: 999;"><tr><td align="left" style="text-align:center !important;">

e

Codice:
</a>
</td></tr></table>

Per agganciarlo fisso a una parte della pagina.  Wink

Una volta fatto, dovrete inserirlo.

Ora, vi sono varie possibilità:

Per chi utilizza PunBB o phpBB2

Inserite la vostra struttura senza lo script nei Templates.

Templates - Generale - overall_footer

Inseritelo appena sotto
Codice:
<li>{U_BLOG}</li>

Lo script potete inserirlo in un annuncio o in un Widget.

Per chi utilizza Invision o phpBB3

Dovrete inserire tutto il codice in un Widget o negli Annunci.  Exclamation

Se lo inserite negli Annunci sarà visibile in tutto il Forum, ma potrete avere solo un annuncio statico. Se lo inserite in un Widget, non sarà possibile visualizzarlo durante la visualizzazione del profilo.

:bene: Buon divertimento! :bene:

avatar
XSync
Veterano dello staff
Veterano dello staff

Sesso : Maschile
Età : 20
Messaggi : 592
Località : Genova


http://illydium.ace.st/
XSync è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

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