Structura tip MyBB pentru mesaje

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Structura tip MyBB pentru mesaje

Mesaj Scris de Cassius Dio la data de Vin 4 Ian - 13:13

Structura mesajelor tip MyBB (phpBB2)

Buna ziua La revedere ,

Avand in vedere sugestiile voastre de implementare a versiunii MyBB pentru platforma forumgratuit, am decis sa fac un tutorial in care sa va arat cum puteti personaliza structura subiectelor de discutii si a mesajelor, astfel incat sa fie foarte asemanatoare cu cea MyBB. Pentru aceasta, va trebui sa folositi versiunea phpBB2 sau PunBB pe forumurile dumneavoastra.
Daca folositi phpBB2, urmati pasii din acest mesaj. Daca folositi insa PunBB cititi mesajul de mai jos.

Exclamare Atentie: pentru a duce acest tutorial pana la capat este nevoie de modificarea radicala a template-ului viewtopic_body, deci toate modificarile efectuate anterior asupra acestuia vor fi pierdute.

Pasul 1. Modificarea template-urilor:

Exclamare Mergem catre Panoul de Administrare >> Afisare >> Template-uri >> General >> viewtopic_body.

Selectati urmatorul fragment de cod:
Cod:
<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>
si stergeti-l.

In loc, adaugati:
Cod:
<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>

Inregistrare Salvati si publicati modificarile efectuate.

Pasul 2. Modificarea foii de stil CSS:

Exclamare Pentru a stabili efectul final, v-a trebui sa mergem catre Panoul de Administrare >> Afisare >> Imagini si culori >> Culori >> Foaie de stil CSS.

Adaugati urmatorul cod:
Cod:
.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;
}

Inregistrare Validati modificarile efectuate.

Daca rezultatul arata ca in imaginea de mai jos, inseamna ca ati facut totul corect. Noroc



Acest tutorial a fost scris de catre SGSS

Copyright ˆ Forumgratuit.ro Nicio parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.


Ultima editare efectuata de catre SGSS in Mier 6 Mar - 10:03, editata de 1 ori
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data de inscriere : 13/07/2012
Multumiri : 82
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Tutorial Re: Structura tip MyBB pentru mesaje

Mesaj Scris de Cassius Dio la data de Mier 6 Mar - 10:02

Structura mesajelor tip MyBB (PunBB)

Buna ziua La revedere ,

Va rugam sa urmati pasii din acest tutorial numai daca folositi versiunea PunBB. Utilizatorii ce folosesc versiunea phpBB2 sunt rugati sa citeasca mesajul anterior (primul).

Exclamare Atentie: pentru a duce acest tutorial pana la capat este nevoie de modificarea radicala a template-ului viewtopic_body, deci toate modificarile efectuate anterior asupra acestuia vor fi pierdute.

Pasul 1. Modificarea template-urilor:

Exclamare Mergem catre Panoul de Administrare >> Afisare >> Template-uri >> General >> viewtopic_body.

Selectati urmatorul fragment de cod:
Cod:
               <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>
si stergeti-l.

In loc, adaugati:
Cod:
                  <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>

Inregistrare Salvati si publicati modificarile efectuate.

Pasul 2. Modificarea foii de stil CSS:

Exclamare Pentru a stabili efectul final, v-a trebui sa mergem catre Panoul de Administrare >> Afisare >> Imagini si culori >> Culori >> Foaie de stil CSS.

Adaugati urmatorul cod:
Cod:
.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;
}

Inregistrare Validati modificarile efectuate.

Daca rezultatul arata ca in imaginea de mai jos, inseamna ca ati facut totul corect. Noroc



Acest tutorial a fost scris de catre SGSS

Copyright ˆ Forumgratuit.ro Nicio parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data de inscriere : 13/07/2012
Multumiri : 82
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum