[Tutorial] Topiclist_box elegante

Informações:
Autor: While
Funcionalidade: PunBB

---

Acesse:

Painel de Controle ☛ Visualização ☛ Templates ☛ Geral☛ Topics_list_box

E Adicione esse código:

Código:

<!-- 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 -->

 <div class="main-head">
 <!-- BEGIN multi_selection -->
 <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
 <!-- END multi_selection -->
 <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
 </div>
 <div class="main-content">
 <table cellspacing="0" class="table">
 <thead>
 <tr>
 <th class="tcl">{L_TOPICS}</th>
 <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
 <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
 <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
 </tr>
 </thead>
 <tbody class="statused">
<!-- END header_table -->

<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->
 <!-- BEGIN table_sticky -->
 </tbody>
 </table>
 </div>

 <div class="main-head">
 <!-- BEGIN multi_selection -->
 <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" / >
 <!-- END multi_selection -->
 <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
 </div>
 <div class="main-content">
 <table cellspacing="0" class="table">
 <thead>
 <tr>
 <th class="tcl">{L_TOPICS}</th>
 <th class="tc2">{topics_list_box.row.topic.table_sticky.L_REPLIES}</th>
 <th class="tc3">{topics_list_box.row.topic.table_sticky.L_VIEWS}</th>
 <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
 </tr>
 </thead>
 <tbody class="statused">
 <!-- END table_sticky -->
 <tr>
 <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
 <span class="status">
 <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
 </span>
 <!-- BEGIN single_selection -->
 <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /> 
 <!-- END single_selection -->
 {topics_list_box.row.ICON} 
 {topics_list_box.row.NEWEST_POST_IMG}
 {topics_list_box.row.PARTICIPATE_POST_IMG} 
 {topics_list_box.row.TOPIC_TYPE} 
 <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2> 
 {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE} 
 {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
 <!-- BEGIN switch_description -->
 <br />
  {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
 <!-- END switch_description -->
 </td>
 <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"> <div class="star activity" stac="{topics_list_box.row.VIEWS}"></div></td>
 <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                <!-- BEGIN avatar -->
                <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

                {topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
 <div stac="{topics_list_box.row.REPLIES} Respostas" class="numerodasrespostas"></div>
                <div class="popularidade"><div stac="{topics_list_box.row.REPLIES}" class="barp" style="width: 3%;"></div></div>
            </td>
 <!-- BEGIN multi_selection -->
 <td><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} /></td>
 <!-- END multi_selection -->
 </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
 <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
 </tbody>
 </table>
 </div>
 <div class="main-foot clearfix">
 <!-- BEGIN multi_selection -->
 <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
 <!-- END multi_selection -->
 <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
 <p class="options">
 <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a> {S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
 </p>
 </div>

<style>
.star.activity {
    height: 12px;
    width: 73px;
    background: url("http://i.imgur.com/dm5QnCN.png");
    right: 10px;
    background-repeat: no-repeat;
    bottom: 15px;
    background-position: left center;
}
.star[stac="0"] {
    background: url("http://i.imgur.com/ViFyMEG.png");
}
.star[stac="1"],
.star[stac="2"],
.star[stac="3"],
.star[stac="4"] {
    background: url("http://i.imgur.com/9reqafN.png");
}
.star[stac="5"],
.star[stac="6"],
.star[stac="7"],
.star[stac="8"],
.star[stac="9"],
.star[stac="10"] {
    background: url("http://i.imgur.com/XpiY9iH.png");
}
.star[stac="11"],
.star[stac="12"],
.star[stac="13"],
.star[stac="14"],
.star[stac="15"] {
    background: url("http://i.imgur.com/pV3CoZR.png");
}
.star[stac="16"],
.star[stac="17"],
.star[stac="18"],
.star[stac="19"],
.star[stac="20"] {
    background: url("http://i.imgur.com/Mbzg4bC.png");
}
.star[stac="21"],
.star[stac="22"],
.star[stac="23"],
.star[stac="24"],
.star[stac="25"] {
    background: url("http://i.imgur.com/CbFTPnM.png");
}
.star[stac="26"],
.star[stac="27"],
.star[stac="28"],
.star[stac="29"],
.star[stac="30"] {
    background: url("http://i.imgur.com/qiMvzrL.png");
}
.star[stac="31"],
.star[stac="32"],
.star[stac="33"],
.star[stac="34"],
.star[stac="35"] {
    background: url("http://i.imgur.com/ryA6LNr.png");
}
.star[stac="36"],
.star[stac="37"],
.star[stac="38"],
.star[stac="39"],
.star[stac="40"] {
    background: url("http://i.imgur.com/APIhQSw.png");
}
.star[stac="41"],
.star[stac="42"],
.star[stac="43"],
.star[stac="44"],
.star[stac="45"] {
    background: url("http://i.imgur.com/TmeZdLD.png");
}
.star[stac="46"],
.star[stac="47"],
.star[stac="48"],
.star[stac="49"],
.star[stac="50"] {
    background: url("http://i.imgur.com/Q2JgrGS.png");
}
.star[stac="51"],
.star[stac="52"],
.star[stac="53"],
.star[stac="54"],
.star[stac="55"] {
    background: url("http://i.imgur.com/mJH6CcZ.png");
}
.star[stac="56"],
.star[stac="57"],
.star[stac="58"],
.star[stac="59"],
.star[stac="60"] {
    background: url("http://i.imgur.com/MuPtV3m.png");
}
.star[stac="61"],
.star[stac="62"],
.star[stac="63"],
.star[stac="64"],
.star[stac="65"] {
    background: url("http://i.imgur.com/ROXGqTE.png");
}
.star[stac="66"],
.star[stac="67"],
.star[stac="68"],
.star[stac="69"],
.star[stac="70"] {
    background: url("http://i.imgur.com/iRph5iv.png");
}
.star[stac="71"],
.star[stac="72"],
.star[stac="73"],
.star[stac="74"],
.star[stac="75"] {
    background: url("http://i.imgur.com/hYqLbmF.png");
}
.star[stac="76"],
.star[stac="77"],
.star[stac="78"],
.star[stac="79"],
.star[stac="80"] {
    background: url("http://i.imgur.com/3LSTxfB.png");
}
.star[stac="81"],
.star[stac="82"],
.star[stac="83"],
.star[stac="84"],
.star[stac="85"] {
    background: url("http://i.imgur.com/2hvADNM.png");
}
.star[stac="86"],
.star[stac="87"],
.star[stac="88"],
.star[stac="89"],
.star[stac="90"] {
    background: url("http://i.imgur.com/occYLvS.png");
}
.star[stac="91"],
.star[stac="92"],
.star[stac="93"],
.star[stac="94"],
.star[stac="95"] {
    background: url("http://i.imgur.com/ziRBtQ8.png");
}
.star[stac="96"],
.star[stac="97"],
.star[stac="98"],
.star[stac="99"],
.star[stac="100"] {
    background: url("http://i.imgur.com/dm5QnCN.png");
}
.star.activity::after {
    content: attr(stac);
    background: #18B0EB;
    width: 61px;
    display: block;
    border-radius: 2px;
    position: relative;
    bottom: 30px;
    color: #FFF;
    padding: 3px 0;
    left: 6px;
    text-align: center;
    font: bold 12px helvetica;
    text-shadow: 0 1px 0 #1297CA;
}
.star.activity::before {
    display: block;
    content: " ";
    height: 0;
    position: relative;
    width: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-top: 5px solid #18B0EB;
    bottom: 5px;
    left: 31px;
}
.star.activity::before,
.star.activity::after {
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition-duration: 0.5s;
    -htm-transition-duration: 0.5s;
}
.star.activity:hover::after,
.star.activity:hover::before {
    opacity: 1;
}
.popularidade {
    margin-top: 10px;
    right: 0px;
    height: 5px;
    width: 260px;
    background: #E2E2E2;
    bottom: 5px;
    left: 155px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16) inset;
}
.barp {
    height: 5px;
    max-width: 260px!important;
    border-radius: 4px;
    background: -webkit-linear-gradient(top, #83C200 0%, #71A00E 100%);
    background: -moz-linear-gradient(top, #83c200, #71A00E);
    background: linear-gradient(top, #83c200, #71A00E);
    background: -ms-linear-gradient(top, #83c200, #71A00E);
}
.barp[style="width: 36%;"],
.barp[style="width: 37%;"],
.barp[style="width: 38%;"],
.barp[style="width: 39%;"],
.barp[style="width: 40%;"],
.barp[style="width: 41%;"],
.barp[style="width: 42%;"],
.barp[style="width: 43%;"],
.barp[style="width: 44%;"],
.barp[style="width: 45%;"],
.barp[style="width: 46%;"],
.barp[style="width: 47%;"],
.barp[style="width: 48%;"],
.barp[style="width: 49%;"],
.barp[style="width: 50%;"],
.barp[style="width: 51%;"],
.barp[style="width: 52%;"],
.barp[style="width: 53%;"],
.barp[style="width: 54%;"],
.barp[style="width: 55%;"],
.barp[style="width: 56%;"],
.barp[style="width: 57%;"],
.barp[style="width: 58%;"],
.barp[style="width: 59%;"],
.barp[style="width: 60%;"],
.barp[style="width: 61%;"],
.barp[style="width: 62%;"],
.barp[style="width: 63%;"],
.barp[style="width: 64%;"],
.barp[style="width: 65%;"] {
    background: -webkit-linear-gradient(top, #E99B00 0%, #FF811F 100%);
    background: -moz-linear-gradient(top, #E99B00, #FF811F);
    background: -ms-linear-gradient(top, #E99B00, #FF811F);
    background: -o-linear-gradient(top, #E99B00, #FF811F);
    background: linear-gradient(top, #E99B00, #FF811F);
}
.barp[style="width: 0%;"],
.barp[style="width: 1%;"],
.barp[style="width: 2%;"],
.barp[style="width: 3%;"],
.barp[style="width: 4%;"],
.barp[style="width: 5%;"],
.barp[style="width: 6%;"],
.barp[style="width: 7%;"],
.barp[style="width: 8%;"],
.barp[style="width: 9%;"],
.barp[style="width: 10%;"],
.barp[style="width: 11%;"],
.barp[style="width: 12%;"],
.barp[style="width: 13%;"],
.barp[style="width: 14%;"],
.barp[style="width: 15%;"],
.barp[style="width: 16%;"],
.barp[style="width: 17%;"],
.barp[style="width: 18%;"],
.barp[style="width: 19%;"],
.barp[style="width: 20%;"],
.barp[style="width: 21%;"],
.barp[style="width: 22%;"],
.barp[style="width: 23%;"],
.barp[style="width: 24%;"],
.barp[style="width: 25%;"],
.barp[style="width: 26%;"],
.barp[style="width: 27%;"],
.barp[style="width: 28%;"],
.barp[style="width: 29%;"],
.barp[style="width: 30%;"],
.barp[style="width: 31%;"],
.barp[style="width: 32%;"],
.barp[style="width: 33%;"],
.barp[style="width: 34%;"],
.barp[style="width: 35%;"] {
    background: -webkit-linear-gradient(top, #40B6FD 0%, #009FFF 100%);
    background: -moz-linear-gradient(top, #40B6FD, #009fff);
    background: linear-gradient(top, #40B6FD, #009fff);
    background: -ms-linear-gradient(top, #40B6FD, #009fff);
}
.text-po {
    bottom: 3px;
    font: bold 9px verdana;
    left: 90px;
    color: #637479;
}
.numerodasrespostas {
    position: absolute;
    margin-top: 9px;
    height: 6px;
    margin-left: 50px;
    width: 260px;
}
.numerodasrespostas:hover::after,
.numerodasrespostas:hover::before {
    opacity: 1;
}
.numerodasrespostas::before,
.numerodasrespostas::after {
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition-duration: 0.5s;
    -htm-transition-duration: 0.5s;
}
.numerodasrespostas::before {
    display: block;
    content: " ";
    height: 0;
    position: relative;
    width: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-top: 5px solid #18B0EB;
    bottom: 5px;
    left: 31px;
}
.numerodasrespostas::after {
    content: attr(stac);
    background: #18B0EB;
    width: 150px;
    display: block;
    border-radius: 2px;
    position: relative;
    bottom: 30px;
    color: #FFF;
    padding: 3px 0;
    left: 6px;
    text-align: center;
    font: bold 12px helvetica;
    text-shadow: 0 1px 0 #1297CA;
}

</style>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->


Resultado:



Se desejar para outra versão, basta criar um novo tópico na área de suporte.