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

La data/ora di oggi è Ven 26 Apr 2024 - 11:23

4 risultati trovati per "moderno"

Modernizzare la lista utenti

modernizzare la lista utenti (phpBB2)


Carissimi utenti, 
State rendendo il vostro forum più #moderno  Hashtag moderno su Forum dei Forum: Aiuto per Forumattivo Icon_question  Allora, anche questo tutorial fa proprio al caso vostro.

Hashtag moderno su Forum dei Forum: Aiuto per Forumattivo Icon_exclaim  ATTENZIONE: questo tutorial è funzionante solamente per le versioni phpBB2 e punBB

Hashtag moderno su Forum dei Forum: Aiuto per Forumattivo 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
Da Teodor
il Gio 30 Giu 2016 - 0:21
 
Cerca in: Pié di pagina e Fondo del forum
Argomento: Modernizzare la lista utenti
Risposte: 1
Visite: 1799

Modernizzare la lista utenti

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:

Hashtag moderno su Forum dei Forum: Aiuto per Forumattivo 2016-013

Perfetto, ora procediamo con la prossima versione!  cheers


Tutorial creato dal forum di supporto rumeno e tradotto da Teo

Da Teodor
il Gio 30 Giu 2016 - 0:06
 
Cerca in: Pié di pagina e Fondo del forum
Argomento: Modernizzare la lista utenti
Risposte: 1
Visite: 1799

Modernizzare l'aspetto dei messaggi

Modernizzare l'aspetto dei messaggi (phpBB2)


Carissimi utenti, state rendendo il vostro forum più #moderno  Question  

Beh allora questo tutorial fa proprio al caso vostro.

Quest'oggi, andiamo a modernizzare la struttura dei messaggi pubblicati.

Exclamation  attenzione, ecco alcune cose che devi sapere prima di passare all'installazione:

  • Lavoreremo principalmente con il template viewtopic_body , nel caso avete questo template modificato, sarà necessario eliminare le modifiche.
  • Questo tutorial è funzionante solamente con le versioni phpBB2 e punBB 


 caso 1: versione del forum -> phpBB

Modifica al template


Andiamo verso Pannello di amministrazione ► visualizzazione ► template ► viewtopic_body

Andiamo a eliminare la seguente parte del template

Codice:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;"> <tr align="right"> <td class="catHead" colspan="3" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"> <h1 class="cattitle"> {TOPIC_TITLE}</h1> </td> <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> </tr> </table> </td> </tr> <!-- BEGIN topicpagination --> <tr> <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td> </tr> <!-- END topicpagination --> {POLL_DISPLAY} <tr> <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th> </tr> <!-- BEGIN postrow --> <!-- BEGIN displayed --> <tr class="post"> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br /> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span><br /> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /> </td> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td> <td valign="top" nowrap="nowrap" class="post-options"> {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG} </td> </tr> <tr> <td colspan="2" class="hr"> <hr /> </td> </tr> <tr> <td colspan="2"> <!-- BEGIN switch_vote_active --> <div class="vote gensmall"> <!-- BEGIN switch_vote --> <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div> <!-- END switch_vote --> <!-- BEGIN switch_bar --> <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"> <!-- BEGIN switch_vote_plus --> <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div> <!-- END switch_vote_plus --> <!-- BEGIN switch_vote_minus --> <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div> <!-- END switch_vote_minus --> </div> <!-- END switch_bar --> <!-- BEGIN switch_no_bar --> <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div> <!-- END switch_no_bar --> <!-- BEGIN switch_vote --> <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div> <!-- END switch_vote --> </div> <!-- END switch_vote_active --> <div class="postbody"> <div>{postrow.displayed.MESSAGE}</div> <!-- BEGIN switch_attachments --> <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd> <!-- BEGIN switch_post_attachments --> <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" /> <!-- BEGIN switch_dl_att --> <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL} <!-- END switch_dl_att --> <!-- BEGIN switch_no_dl_att --> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL} <!-- END switch_no_dl_att --> </dt> <!-- BEGIN switch_no_comment --> <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd> <!-- END switch_no_comment --> <!-- BEGIN switch_no_dl_att --> <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd> <!-- END switch_no_dl_att --> <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl> <!-- END switch_post_attachments --> </dd> </dl> <!-- END switch_attachments --> <div class="clear"></div> <div class="signature_div"> {postrow.displayed.SIGNATURE} </div> </div> <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> </td> </tr> </table> </td> </tr> <tr> <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150"> <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG} </td> </tr> </table> </td> </tr> <!-- BEGIN first_post_br --> </table>


Dopo aver eliminato quella parte, andiamo a inserire quest'altra:

Codice:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;"> <tr align="right"> <td class="catHead" colspan="3" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"> <h1 class="cattitle"> {TOPIC_TITLE}</h1> </td> <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> </tr> </table> </td> </tr> <!-- BEGIN topicpagination --> <tr> <td class="row1 pagination" colspan="3" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td> </tr> <!-- END topicpagination --> {POLL_DISPLAY} <!-- BEGIN postrow --> <!-- BEGIN displayed --> <tr class="post"> <tr> <th class="thLeft post-infos" nowrap="nowrap" colspan="3"><span style="float:left;"><img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" /> {postrow.displayed.POST_DATE}</span> <span style="float:right;"><a class="post-n" href="#{postrow.displayed.U_POST_ID}">#{postrow.displayed.COUNT_POSTS}</a></span></th> </tr> <tr> <td colspan="3" class="{postrow.displayed.ROW_CLASS} user-post-info"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <table><tr> <td class="post_avatar" width="1" style="padding-right: 10px;">{postrow.displayed.POSTER_AVATAR}</td> <td class="post_author" valign="top"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}</td> <td class="post_author_info" width="165"><span class="postdetails poster-profile"> <br /> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span></td> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /> </tr></table> </td> </tr> <td colspan="3" class="{postrow.displayed.ROW_CLASS} user-post-body"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="delete_br"> <td><span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span></td> <script> $(document).ready(function(){ $('.delete_br br').remove(); }); </script> </tr> <tr> <td colspan="2"> <!-- BEGIN switch_vote_active --> <div class="vote gensmall"> <!-- BEGIN switch_vote --> <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div> <!-- END switch_vote --> <!-- BEGIN switch_bar --> <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"> <!-- BEGIN switch_vote_plus --> <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div> <!-- END switch_vote_plus --> <!-- BEGIN switch_vote_minus --> <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div> <!-- END switch_vote_minus --> </div> <!-- END switch_bar --> <!-- BEGIN switch_no_bar --> <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div> <!-- END switch_no_bar --> <!-- BEGIN switch_vote --> <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div> <!-- END switch_vote --> </div> <!-- END switch_vote_active --> <div class="postbody"><br> <div>{postrow.displayed.MESSAGE}</div> <!-- BEGIN switch_attachments --> <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd> <!-- BEGIN switch_post_attachments --> <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" /> <!-- BEGIN switch_dl_att --> <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL} <!-- END switch_dl_att --> <!-- BEGIN switch_no_dl_att --> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL} <!-- END switch_no_dl_att --> </dt> <!-- BEGIN switch_no_comment --> <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd> <!-- END switch_no_comment --> <!-- BEGIN switch_no_dl_att --> <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd> <!-- END switch_no_dl_att --> <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl> <!-- END switch_post_attachments --> </dd> </dl> <!-- END switch_attachments --> <div class="clear"></div> <div class="signature_div"> {postrow.displayed.SIGNATURE} </div> </div> </td> </tr> </table> </td> </tr> <tr> <td colspan="3" class="{postrow.displayed.ROW_CLASS} messaging gensmall user-post-footer"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28"> <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG} </td> <td valign="middle" class="post-options"> {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG} </td> </tr> </table> </td> </tr> <!-- BEGIN first_post_br --> </table>


:new:  salviamo le modifiche 

Installazione codice CSS


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

Hashtag moderno su Forum dei Forum: Aiuto per Forumattivo 2335517815 Inseriamo Il Seguente Codice

Codice:
.post-n{ color: #BBB!important; } .post_avatar a img{ max-width: 100px!important; max-height: 75px!important; } .post_author{ font-size: 12px; text-align: center; padding-top: 10px; width: 90%; text-align: left; } .post_author .name{ font-weight: bold; font-size: 14px; } .post_author_info{ float: right; width: 230px; } .postbody{ padding-bottom: 5px; } .user-post-info, .user-post-footer{ background-color: #DEE3E7!important; }


:new:  Salviamo Le Modifche!

Risultato


Hashtag moderno su Forum dei Forum: Aiuto per Forumattivo 2016-011

Procediamo ora con il caso 2.  Very Happy

Tutorial tradotto da Teo 

Da Teodor
il Mer 29 Giu 2016 - 0:31
 
Cerca in: Pié di pagina e Fondo del forum
Argomento: Modernizzare l'aspetto dei messaggi
Risposte: 1
Visite: 1713

Rendere i bottoni più moderni con Font Awesome

Rendere i bottoni più moderni con Font Awesome 


Carissimi utenti,

Avete voglia di rendere più #moderno il vostro forum #forumattivo  Question  Con questo semplice tutorial potrete rendere i bottoni del vostro forum più semplici e moderni

Installazione di Font awesome


Pannello di amministrazione ► moduli  ► HTML&JAVASCRIPT  ► gestione dei codici Javascript  

:new:  Andiamo a cred un nuovo Javascript. 


  • Titolo: Font awesome
  • Posizione: tutte le pagine 
  • Codice: 

Codice:
(function() { var FA = 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', a = document.createElement('LINK'); a.rel = 'stylesheet'; a.type = 'text/css'; a.href = FA; document.getElementsByTagName('HEAD')[0].appendChild(a); })();


:permisos:  salviamo le modifiche.

Modifica dei bottoni


:new:  Andiamo ora a creare un altro Javascript 


  • Titolo: bottoni moderni
  • Posizione: negli argomenti
  • Codice: 


Codice:
jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_quote.png']").replaceWith('<span class="butoanetopic butoanetopic-quote"><i class="fa fa-quote-right"></i> CITA</span>'); }); jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_edit.png']").replaceWith('<span class="butoanetopic butoanetopic-editeaza"><i class="fa fa-pencil-square-o"></i> MODOFICA</span>'); }); jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_delete.png']").replaceWith('<span class="butoanetopic butoanetopic-sterge"><i class="fa fa-scissors"></i> ELIMINA</span>'); }); jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_ip.png']").replaceWith('<span class="butoanetopic butoanetopic-ip"><i class="fa fa-search"></i> IP</span>'); }); jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_report.png']").replaceWith('<span class="butoanetopic butoanetopic-ip"><i class="fa fa-search"></i> RAPPORTO</span>'); });


Da modificare nel codice:

Hashtag moderno su Forum dei Forum: Aiuto per Forumattivo 209609infohttps://2img.net/s/t/20/31/02/i_icon_quote.png - eliminate e sostituite con l'immagine attuale della citazione
https://2img.net/s/t/20/31/02/i_icon_edit.png - eliminate e sostituite con l'immagine attuale del bottone "modifica"
https://2img.net/s/t/20/31/02/i_icon_delete.png - eliminate e sostituite con l'immagine attuale di "elimina"
https://2img.net/s/t/20/31/02/i_icon_ip.png - eliminate e sostituite con l'immagine attuale di "vedere IP"


Installazione del codice CSS


Passiamo ora al codice CSS e andiamo verso: Pannello di amministrazione ►visualizzazione ► colori ► foglio di stile CSS

Codice:
.butoanetopic { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); } .butoanetopic { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); cursor: pointer; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.42857143; margin-bottom: 0; padding: 3px 4px; text-align: center; touch-action: manipulation; user-select: none; vertical-align: middle; white-space: nowrap; } .butoanetopic-sterge { background-color: #B52A26; border-color: #902522; color: #fff; } .butoanetopic-sterge:hover { color: #fff; background-color: #c9302c; border-color: #ac2925; } .butoanetopic-quote { background-color: #CA8226; border-color: #9E661F; color: #fff; } .butoanetopic-quote:hover { background-color: #E48710; border-color: #CE7F1A; color: #fff; } .butoanetopic-editeaza { background-color: #1381C3; border-color: #0A71AF; color: #fff; } .butoanetopic-editeaza:hover { background-color: #1092E0; border-color: #0A71AF; color: #fff; } .butoanetopic-ip:hover { color: #fff; background-color: #157254; border-color: #0f543e; } .butoanetopic-ip { color: #fff; background-color: #1d9d74; border-color: #198764; }


:new: Salviamo Le Modifche

Risultato


Hashtag moderno su Forum dei Forum: Aiuto per Forumattivo 2016-010

Ecco qui, ora finalmente i nostri bottoni sono molto più moderni.

Saluti da Forumattivo


Tutorial tradotto da Teo
Da Teodor
il Lun 27 Giu 2016 - 21:53
 
Cerca in: Argomenti e Messaggi (Topic e Post)
Argomento: Rendere i bottoni più moderni con Font Awesome
Risposte: 0
Visite: 2465

Torna in alto

Vai verso: