Aiuto e supporto ai creatori di forum Forumattivo. Creare un forum e amministrarlo. Scopri nuove guide, nuovi tutoriali, nuove astuzie nel supporto di Forumattivo

Modernizzare la lista utenti

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Pié di pagina e Fondo del forum


Tutorial Modernizzare la lista utenti

Messaggio Da Teodor Gio 30 Giu 2016 - 0: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:

Modernizzare la lista utenti 2016-013

Perfetto, ora procediamo con la prossima versione!  cheers

Tutorial creato dal forum di supporto rumeno e tradotto da Teo



Ultima modifica di teo il Gio 30 Giu 2016 - 0:22 - modificato 1 volta.
avatar
Teodor
@ Super attivo @

Sesso : Maschio
Età : 28
Messaggi : 1873
Località : Cremona

http://Ilforumditutti.net
Teodor è stato ringraziato dall'autore di questo topic.

Tutorial Re: Modernizzare la lista utenti

Messaggio Da Teodor Gio 30 Giu 2016 - 0:21

modernizzare la lista utenti (phpBB2)

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

Modernizzare la lista utenti Icon_exclaim  ATTENZIONE: questo tutorial è funzionante solamente per le versioni phpBB2 e punBB

Modernizzare la lista utenti Icon_exclaim  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:
Tutorial tradotto da Teo
avatar
Teodor
@ Super attivo @

Sesso : Maschio
Età : 28
Messaggi : 1873
Località : Cremona

http://Ilforumditutti.net
Teodor è stato ringraziato dall'autore di questo topic.

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

- Argomenti simili

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Pié di pagina e Fondo del forum

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