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 l'aspetto dei messaggi


Tutorial Modernizzare l'aspetto dei messaggi

Messaggio Da teo il Mer 29 Giu 2016, 00:31

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://illiweb.com/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://illiweb.com/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

 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



Procediamo ora con il caso 2.  Very Happy

teo
Aiutattivo
Aiutattivo


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


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

Tutorial Re: Modernizzare l'aspetto dei messaggi

Messaggio Da teo il Mer 29 Giu 2016, 01:00

Modernizzare la struttura dei messaggi  (punBB)


Eccoci qui, ora vedremo come ottenere questo fantastico risultato su punBB 

  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 2: la versione de forum è punBB

modifica al template


Andiamo verso Pannello di amministrazione ► visualizzazione ► template ► viewtopic_body 

Troviamo questa parte

Codice:
<div class="user"> <div class="user-ident"> <h4 class="username">{postrow.displayed.POSTER_NAME}</h4> <div class="user-basic-info"> {postrow.displayed.POSTER_AVATAR}<br /> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE} </div> </div> <div class="user-info"> {postrow.displayed.ONLINE_IMG} <!-- 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} </div> </div>

:eli:  la eliminiamo e inseriamo quest'altra


Codice:
<div class="user"> <table width="100%" class="userpost_head"><tr> <td> <div class="user-ident"> <table width="100%"><tr><td class="post_author_baisc" width="70"> {postrow.displayed.POSTER_AVATAR}<br /></td> <td><h4 class="username">{postrow.displayed.POSTER_NAME}</h4> <div class="user-basic-info"> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE} </div> </td></tr></table> </div> </td> <td class="post_author_info"> <div class="user-info"> {postrow.displayed.ONLINE_IMG} <!-- 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} </div> </td> </tr></table> </div>

:new:  Salviamo Le Modifche


Installazione codice CSS


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

e inseriamo il codice seguente:

Codice:
.pun .postmain { margin-left: 0px; background-color: #FBFBFB; } .pun .postbody table.userpost_head{ background: whiteSmoke; border-bottom: 1px solid #DDD; } .pun .user .user-info{ float: right; margin-right: 100px; margin-top: 20px; margin-bottom: 10px; line-height: 10px; } .pun .post .user { float: none; margin-left: 0px; margin-top: 0px; position: initial; } .pun .user .user-ident{ margin-left: 20px; } .pun .user-ident .username{ position: initial; } .postfoot .user-contact, .postfoot .post-options{ height: 20px !important; } .pun .user .user-ident .post_author_basic a img{ max-width: 100px!important; max-height: 75px!important; }

:new:  salviamo le modifiche.

Ed ecco fatto, il risultato sarà lo stesso, un forum molto più moderno!

Vi ringrazio per l'attenzione e alla prossima!  :zen:

teo
Aiutattivo
Aiutattivo


Sesso : Maschile
Età : 20
Messaggi : 1394
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