[TUTORIAL] Imagem com título do tópico nos subfóruns (PUNBB & PHPBB2)

Na função blog toda imagem adicionada primeiro é mostrada no subfórum quando ele é acessado, neste tutorial vamos usar a edição completa dos templates para aplicar um efeito simples e ao mesmo tempo atraente, adicionando essa primeira imagem dos tópicos nos subfóruns tipo "Fórum".

--> Tutoriais <--
Imagem com título do tópico nos subfóruns

1º - Funcionamento dos templates:

É fundamental que tenha em mente que a modificação nos templates é irreversível assim que o mesmo é editado. Antes de tudo, sempre aconselhamos que salve seu template em um bloco de notas ou editor de seu computador para continuar.

Aconselhamos que antes de tudo, leia o seguinte tópico: http://ajuda.forumeiros.com/t16827-#100797

Acessando Cpainel > Visualização > Templates > Geral > topics_list_box você vai substituir todo o seu template pelo seguinte template:

Código:

 <style>.blog_message1 {overflow: hidden;margin: 3px 3px 3px 3px;width: 100px;height: 50px;padding: 3px;border: 1px solid #CFCDCE;font-size: 0px;font-family: none;}.blog_message1 img {width: 100px;height: 50px;}.pun tbody.statused td.tcl {padding-left: 0;}.codebox {display: none;}.postmain blockquote,blockquote{display: none;}.blog_message1 {float: left;}.blog_tintuc li:nth-of-type(1) .blog_message1 {margin: 0px;width: 320px;height: 212px;border: 1px solid #626263;}.blog_tintuc li:nth-of-type(1) .blog_message1 img {padding: 0px;width: 320px;height: 212px;}.blog_tintuc li {background-color: white;}  .blog_tintuc li:nth-of-type(3) .blog_message1, .blog_tintuc li:nth-of-type(2) .blog_message1  {width: 190px;height: 90px;float: left;margin: 0px;border: 1px solid #B0B0B0;}.blog_tintuc li:nth-of-type(3) .blog_message1 img , .blog_tintuc li:nth-of-type(2) .blog_message1 img  {width: 190px;height: 90px;padding: 0px;}</style>
<script>
 jQuery(document).on('ready',function(){jQuery('.blog_message1').each(function(){var url=jQuery(this).attr('href');jQuery(this).load(url+' .post-entry .entry-content img:eq(0)')})});</script>
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
  var all_checked = true;
  for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
  }
  document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
  for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
  }
}
</script>
<!-- END multi_selection -->

  <table width="100%" border="0" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr width="100%">
      <td style="width:35%;float:right">
        <table style="float: left; width:100%">
          <tr style="float: left; width:100%">
      <!--Quảng cáo  -->
          </tr>
        </table>
      </td>


      <!-- BEGIN multi_selection -->
  <!-- END multi_selection -->

  <!-- BEGIN pagination -->

<p class="paging" style="margin-left:30px">{PAGINATION}</p>
  <br />
      <br />
 
  <!-- END pagination -->
  <!-- END header_table -->
      <!-- BEGIN header_row -->
<!-- END header_row -->
   
      <script type="text/javascript">$(function(){$(".xname").hide();});</script>
<!-- BEGIN topic -->

        <td style="width:60%; float:left">
  <table cellpadding="3" cellspacing="3"  style="float: left; width: 95%;border: 1px solid #B0B0B0;margin-left:15px;" >
  <tr>
    <td>
      <div class="tuananh4">
        <div class="blog_message1" href="{topics_list_box.row.U_VIEW_TOPIC}" ><img src="http://i71.servimg.com/u/f71/17/59/85/75/loadin10.gif"/></div></div><div class="bai_new4"><r>
          <h2 class="topic-title">
            <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}" onmouseover="showtip('<font color=#40ff00><b>Thời gian gửi:</b></font> <font color=#FF6600><b>{topics_list_box.row.LAST_POST_TIME}</b></font><br /><font color=#40ff00><b>Trạng Thái:</b></font> <font color=#ff8c00>{topics_list_box.row.L_TOPIC_FOLDER_ALT}</font> <br /><font color=#40ff00><b>Ler tópico:</b></font> <font color=red>{topics_list_box.row.VIEWS}</font><br /><font color=#40ff00><b>Trả lời:</b></font> <font color=#FF66CC>{topics_list_box.row.REPLIES}</font><br>');" onmouseout="hidetip();" >  {topics_list_box.row.TOPIC_TITLE}<br /><br /></a><span class="xname" style="float: right;"><strong>{topics_list_box.row.TOPIC_AUTHOR}  </strong><br/></span>
            </h2>
        <!-- BEGIN switch_description -->
        <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </span>
        <!-- END switch_description -->
        <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
                  <span class="gensmall"><!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
            <span class="postdetails"><font color="black">  Autor: </font>{topics_list_box.row.TOPIC_AUTHOR}</span>
                <a class="more-link" style="float:right" href="{topics_list_box.row.U_VIEW_TOPIC}">Ler tópico</a>
              <span class="postdetails xname"><font color="black"> </font><font color="red">{topics_list_box.row.REPLIES}</font></span>
              <span class="postdetails xname"><font color="black"> </font><font color="red">{topics_list_box.row.VIEWS}</font></span>
   
              <span class="postdetails xname"><font color="black"> </font><font color="red">{topics_list_box.row.LAST_POST_AUTHOR} ( <font color="#8c8787">{topics_list_box.row.LAST_POST_TIME}</font>)</font></span>
           
            </r>
            </div>
           
      </td>
      </tr>
    </table>
      </td>
      <style>
 a.more-link,
a.more-link:link,
a.more-link:visited  {
width:80px;
height:24px;
line-height:22px;
font-size:8pt;
text-align:center;
font-weight:normal;
color:#666;
display:block;
background:#eee;
border:1px solid #ddd;
}
a.more-link:hover,
a.more-link:active  {
color:#fff;
text-decoration:none;
background:#2A4375;
border:1px solid #1E3155;
}
      </style>

            <!-- BEGIN multi_selection -->
   
      <p align="center" valign="middle"><span class="postdetails xname"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></p>
  <!-- END multi_selection -->
 
  <!-- END topic --><!-- BEGIN no_topics -->
 
      <p class="xname" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></p>
 
  <!-- END no_topics --><!-- BEGIN bottom -->
      <br />
      <p class="paging xname" style="margin-left:30px;margin-top:30px">{PAGINATION}</p>
     
              </tr>
 
  </table>
<!-- END bottom --><!-- BEGIN footer_table -->
<!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Este código é para a versão PUNBB. Já o da versão PHPBB2:

Código:

 <style>.blog_message1 {overflow: hidden;margin: 3px 3px 3px 3px;width: 100px;height: 50px;padding: 3px;border: 1px solid #CFCDCE;font-size: 0px;font-family: none;}.blog_message1 img {width: 100px;height: 50px;}.pun tbody.statused td.tcl {padding-left: 0;}.codebox {display: none;}.postmain blockquote,blockquote{display: none;}.blog_message1 {float: left;}.blog_tintuc li:nth-of-type(1) .blog_message1 {margin: 0px;width: 320px;height: 212px;border: 1px solid #626263;}.blog_tintuc li:nth-of-type(1) .blog_message1 img {padding: 0px;width: 320px;height: 212px;}.blog_tintuc li {background-color: white;}  .blog_tintuc li:nth-of-type(3) .blog_message1, .blog_tintuc li:nth-of-type(2) .blog_message1  {width: 190px;height: 90px;float: left;margin: 0px;border: 1px solid #B0B0B0;}.blog_tintuc li:nth-of-type(3) .blog_message1 img , .blog_tintuc li:nth-of-type(2) .blog_message1 img  {width: 190px;height: 90px;padding: 0px;}</style>
<script><script> /*ShiftActif fórum http://shift.forumactif.com/*/
      jQuery(document).on('ready',function(){jQuery('.blog_message1').each(function(){var url=jQuery(this).attr('href');$(this).load(url+' div.postbody img:eq(0)')})});</script><!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
  var all_checked = true;
  for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
  }
  document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
  for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
  }
}
</script>
<!-- END multi_selection -->

  <table width="100%" border="0" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr width="100%">
      <td style="width:35%;float:right">
        <table style="float: left; width:100%">
          <tr style="float: left; width:100%">
      <!--Quảng cáo  -->
          </tr>
        </table>
      </td>


      <!-- BEGIN multi_selection -->
  <!-- END multi_selection -->

  <!-- BEGIN pagination -->

<p class="paging" style="margin-left:30px">{PAGINATION}</p>
  <br />
      <br />
 
  <!-- END pagination -->
  <!-- END header_table -->
      <!-- BEGIN header_row -->
<!-- END header_row -->
   
      <script type="text/javascript">$(function(){$(".xname").hide();});</script>
<!-- BEGIN topic -->

        <td style="width:60%; float:left">
  <table cellpadding="3" cellspacing="3"  style="float: left; width: 95%;border: 1px solid #B0B0B0;margin-left:15px;" >
  <tr>
    <td>
      <div class="tuananh4">
        <div class="blog_message1" href="{topics_list_box.row.U_VIEW_TOPIC}" ><img src="http://i71.servimg.com/u/f71/17/59/85/75/loadin10.gif"/></div></div><div class="bai_new4"><r>
          <h2 class="topic-title">
            <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}" onmouseover="showtip('<font color=#40ff00><b>Thời gian gửi:</b></font> <font color=#FF6600><b>{topics_list_box.row.LAST_POST_TIME}</b></font><br /><font color=#40ff00><b>Trạng Thái:</b></font> <font color=#ff8c00>{topics_list_box.row.L_TOPIC_FOLDER_ALT}</font> <br /><font color=#40ff00><b>Ler tópico:</b></font> <font color=red>{topics_list_box.row.VIEWS}</font><br /><font color=#40ff00><b>Trả lời:</b></font> <font color=#FF66CC>{topics_list_box.row.REPLIES}</font><br>');" onmouseout="hidetip();" >  {topics_list_box.row.TOPIC_TITLE}<br /><br /></a><span class="xname" style="float: right;"><strong>{topics_list_box.row.TOPIC_AUTHOR}  </strong><br/></span>
            </h2>
        <!-- BEGIN switch_description -->
        <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </span>
        <!-- END switch_description -->
        <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
                  <span class="gensmall"><!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
            <span class="postdetails"><font color="black">  By: </font>{topics_list_box.row.TOPIC_AUTHOR}</span>
                <a class="more-link" style="float:right" href="{topics_list_box.row.U_VIEW_TOPIC}">Ler tópico</a>
              <span class="postdetails xname"><font color="black"> </font><font color="red">{topics_list_box.row.REPLIES}</font></span>
              <span class="postdetails xname"><font color="black"> </font><font color="red">{topics_list_box.row.VIEWS}</font></span>
   
              <span class="postdetails xname"><font color="black"> </font><font color="red">{topics_list_box.row.LAST_POST_AUTHOR} ( <font color="#8c8787">{topics_list_box.row.LAST_POST_TIME}</font>)</font></span>
           
            </r>
            </div>
           
      </td>
      </tr>
    </table>
      </td>
      <style>
 a.more-link,
a.more-link:link,
a.more-link:visited  {
width:80px;
height:24px;
line-height:22px;
font-size:8pt;
text-align:center;
font-weight:normal;
color:#666;
display:block;
background:#eee;
border:1px solid #ddd;
}
a.more-link:hover,
a.more-link:active  {
color:#fff;
text-decoration:none;
background:#2A4375;
border:1px solid #1E3155;
}
      </style>

            <!-- BEGIN multi_selection -->
   
      <p align="center" valign="middle"><span class="postdetails xname"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></p>
  <!-- END multi_selection -->
 
  <!-- END topic --><!-- BEGIN no_topics -->
 
      <p class="xname" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></p>
 
  <!-- END no_topics --><!-- BEGIN bottom -->
      <br />
      <p class="paging xname" style="margin-left:30px;margin-top:30px">{PAGINATION}</p>
     
              </tr>
 
  </table>
<!-- END bottom --><!-- BEGIN footer_table -->
<!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

• Resultado
  
  

---

© ShiftActif

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Imagem com título do tópico nos subfóruns