Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Modernizzare la lista utenti


Tutorial Modernizzare la lista utenti

Messaggio Da teo il Gio 30 Giu 2016, 00:06

modernizzare la lista utenti (punBB)

Carissimi utenti, 

State rendendo il vostro forum più #moderno  Question  Allora, anche questo tutorial fa proprio al caso vostro.

Exclamation  ATTENZIONE: questo tutorial è funzionante solamente per le versioni phpBB2 e punBB
Exclamation  lavoreremo principalmente con il template memberlist_body , ed eventuale modifica già effettuata a questo template andrà eliminata!

Vediamo ora come procedere nel caso la versione del tuo forum sia punBB

Modifica al template


Per prima cosa andiamo verso Pannello di amministrazione ► visualizzazione ► template ► generale ► memberlist_body

Individuiamo la seguente parte:

Codice:
<thead> <tr> <th class="tcl memberlist">{L_AVATAR} - {L_USERNAME}</th> <!-- BEGIN switch_th_group --> <th class="tc2">{L_GROUPS}</th> <!-- END switch_th_group --> <th class="tc3">{L_INTERESTS}</th> <th class="tc2">{L_JOINED}</th> <th class="tc2">{L_VISITED}</th> <th class="tc3">{L_POSTS}</th> <th class="tc3">{L_PM}</th> <th class="tc3">{L_WEBSITE}</th> </tr> </thead>

:eli: La eliminiamo 

Poi, andiamo a individuare la seguente parte:

Codice:
<!-- BEGIN memberrow --> <tr> <td class="tcl avatar-mini"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG} <span>{memberrow.USERNAME}</span></a></td> <!-- BEGIN switch_td_group --> <td class="tc2">{memberrow.GROUPS}</td> <!-- END switch_td_group --> <td class="tc3">{memberrow.INTERESTS}</td> <td class="tc2">{memberrow.JOINED}</td> <td class="tc2">{memberrow.LASTVISIT}</td> <td class="tc3">{memberrow.POSTS}</td> <td class="tc3">{memberrow.PM_IMG}</td> <td class="tc4">{memberrow.WWW_IMG}</td> </tr> <!-- END memberrow -->

:eli: La eliminiamo e la sostituiamo con 

Codice:
<!-- BEGIN memberrow --> <div class="tableUsers"> <div class="userNames">{memberrow.USERNAME}</div> <div class="userAvatar"> <a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a> </div> <div class="infoUsers"> {L_JOINED}: {memberrow.JOINED}<br /> {L_VISITED}: {memberrow.LASTVISIT}<br /> {L_POSTS}: {memberrow.POSTS} </div> <div class="contactUsers"> {memberrow.PM_IMG} {memberrow.WWW_IMG} </div> </div> <!-- END memberrow -->

:new: Salviamo Le Modifiche.

Installazione CSS


Ora andiamo verso Pannello di amministrazione ► visualizzazione ► immagini&colori ► colori ► foglio di stile CSS  

E inseriamo il seguente codice:

Codice:
/* Bottoni contatto */ .contactUsers { padding:2px; border-top: 1px solid #ddd; margin-top: -45px;} .contactUsers img { width: auto; height: auto;} /* tabella generale */ .infoUsers { margin-left: 55px; padding: 5px !important; top: -50px; position: relative;} .tableUsers { box-shadow: 0px 0px 4px #ccc; background: #f3f3f3; border: 1px solid #ddd; display: inline-table !important; width: 250px; font-size:11px; margin: 5px; font-family: Verdana,Arial,Helvetica,sans-serif; border-radius: 4px; -moz-border-radius: 4px; padding: 5px; -webkit-border-radius: 4px;} /* Avatar  */ .userAvatar img { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #ddd; width: 50px; height: 50px;} .userAvatar img:hover { box-shadow: 0px 0px 4px #ccc;} /* Nome utente */ .userNames { border-bottom: 1px solid #ddd; padding: 2px; margin-bottom: 4px;}

:new: Salviamo Le modifiche.

Risultato


Ora vediamo il risultato finale:


Perfetto, ora procediamo con la prossima versione!  cheers



Ultima modifica di teo il Gio 30 Giu 2016, 00:22, modificato 1 volta

teo
Aiutattivo
Aiutattivo


Sesso : Maschile
Età : 20
Messaggi : 1417
Località : Cremona


Vedere il profilo dell'utente http://Ilforumditutti.net
teo è stato ringraziato dall'autore di questo topic.

Tutorial Re: Modernizzare la lista utenti

Messaggio Da teo il Gio 30 Giu 2016, 00:21

modernizzare la lista utenti (phpBB2)

Carissimi utenti, 
State rendendo il vostro forum più #moderno    Allora, anche questo tutorial fa proprio al caso vostro.

  ATTENZIONE: questo tutorial è funzionante solamente per le versioni phpBB2 punBB

  lavoreremo principalmente con il template memberlist_body , ed eventuale modifica già effettuata a questo template andrà eliminata!

Vediamo ora come procedere nel caso la versione del tuo forum sia phpBB2

Modifica al template


Per prima cosa andiamo verso Pannello di amministrazione ► visualizzazione ► template ► generale ► memberlist_body 

E troviamo:

Codice:
<tr> <th class="thCornerL" nowrap="nowrap" height="25">#</th> <th class="thTop" nowrap="nowrap">{L_AVATAR}</th> <th class="thTop" nowrap="nowrap">{L_USERNAME}</th> <!-- BEGIN switch_th_group --> <th class="thTop" nowrap="nowrap">{L_GROUPS}</th> <!-- END switch_th_group --> <th class="thTop" nowrap="nowrap">{L_INTERESTS}</th> <th class="thTop" nowrap="nowrap">{L_JOINED}</th> <th class="thTop" nowrap="nowrap">{L_VISITED}</th> <th class="thTop" nowrap="nowrap">{L_POSTS}</th> <th class="thTop" nowrap="nowrap">{L_PM}</th> <th class="thCornerR" nowrap="nowrap">{L_WEBSITE}</th> </tr>

:eli: eliminiamo e sostituiamo con:

Codice:
<tr> <th class="thCornerL" nowrap="nowrap" height="25">Lista membri</th> </tr>

Ora troviamo:


Codice:
<!-- BEGIN memberrow --> <tr> <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"> {memberrow.ROW_NUMBER} </span></td> <td class="{memberrow.ROW_CLASS}" align="center"><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></td> <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span></td> <!-- BEGIN switch_td_group --> <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">{memberrow.GROUPS}</span></td> <!-- END switch_td_group --> <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.INTERESTS}</span></td> <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.JOINED}</span></td> <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.LASTVISIT}</span></td> <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.POSTS}</span></td> <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.PM_IMG} </td> <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.WWW_IMG} </td> </tr> <!-- END memberrow -->

:eli: eliminiamo e sostituiamo con


Codice:
<!-- BEGIN memberrow --> <tr> <td> <div class="tableUsers"> <div class="userNames">{memberrow.USERNAME}</div> <div class="userAvatar"> <a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a> </div> <div class="infoUsers"> {L_JOINED}: {memberrow.JOINED}<br /> {L_VISITED}: {memberrow.LASTVISIT}<br /> {L_POSTS}: {memberrow.POSTS} </div> <div class="contactUsers"> {memberrow.PM_IMG} {memberrow.WWW_IMG} </div> </div> </td> </tr> <!-- END memberrow -->

:new:  Salviamo Le Modifiche Effettuate.


Installazione codice CSS


Ora andiamo verso Pannello di amministrazione ► visualizzazione ► immagini&colori ► colori ► foglio di stile CSS  

E inseriamo il seguente codice:

Codice:
/* Buttoni contatto  */ .contactUsers { padding:2px; border-top: 1px solid #ddd; margin-top: -45px;} .contactUsers img { width: auto; height: auto;} /* Tabella generale */ .infoUsers { margin-left: 55px; padding: 5px !important; top: -50px; position: relative;} .tableUsers { box-shadow: 0px 0px 4px #ccc; background: #f3f3f3; border: 1px solid #ddd; display: inline-table !important; width: 250px; font-size:11px; margin: 5px; font-family: Verdana,Arial,Helvetica,sans-serif; border-radius: 4px; -moz-border-radius: 4px; padding: 5px; -webkit-border-radius: 4px;} /* Avatar */ .userAvatar img { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #ddd; width: 50px; height: 50px;} .userAvatar img:hover { box-shadow: 0px 0px 4px #ccc;} /* Nome utente */ .userNames { border-bottom: 1px solid #ddd; padding: 2px; margin-bottom: 4px;}

:new:  Salviamo Le modifiche.

Ed ecco fatto, il risultato sarà sempre lo stesso!

Saluti e alla prossima  :zen:

teo
Aiutattivo
Aiutattivo


Sesso : Maschile
Età : 20
Messaggi : 1417
Località : Cremona


Vedere il profilo dell'utente http://Ilforumditutti.net
teo è stato ringraziato dall'autore di questo topic.

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

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum