Adicionar estrelas nos tópicos

Detalhes da questão

Endereço do fórum: http://suportedesign.forumeiros.com
Versão do fórum: ModernBB

Descrição

Olá!

Queria adicionar essas mesmas estrelas desse fórum: http://bplaystories-rpg.forumeiros.com/f1- no meu.

topic_list_box do fórum:

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} />&nbsp;
            <!-- END single_selection -->
            {topics_list_box.row.ICON}&nbsp;
            {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
            {topics_list_box.row.TOPIC_TYPE}&nbsp;
            <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>&nbsp;
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}&nbsp;
            {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
            <!-- BEGIN switch_description -->
            <br />
            &nbsp;{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>&nbsp;{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;
    [b][/b]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 -->


topic_list_box do meu fórum:

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}()
      {
         alert('MAIN');

         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}()
      {
         alert('ALL');

         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="forumbg announcement">
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dt>
                  <!-- 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 -->
                  {topics_list_box.row.L_TITLE}
               </dt>
               <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.L_REPLIES}"></i></dd>
               <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.L_VIEWS}"></i></dd>
               <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.L_LASTPOST}"></i></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
<!-- END header_table -->

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

<!-- BEGIN topic -->

   <!-- BEGIN table_sticky -->
         </ul>
      </div>
      <div class="forumbg">
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm">
                  <!-- 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 -->
                  {topics_list_box.row.topic.table_sticky.L_TITLE}
               </dd>
               <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.topic.table_sticky.L_REPLIES}"></i></dd>
               <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.topic.table_sticky.L_VIEWS}"></i></dd>
               <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.topic.table_sticky.L_LASTPOST}"></i></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
   <!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
         <dl class="icon" style=" margin-left: -30px; padding-top: 10px; padding-bottom: 10px; ">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
               <!-- 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 -->
               <div class="topic-title-container">
                  <h2 class="topic-title hierarchy">
                     <a style="font-size: 18px;" class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
                        {topics_list_box.row.TOPIC_TITLE}
                     </a>
                  </h2>
               </div>
               <!-- BEGIN switch_description -->

                   <span style=" font-size: 14px; "class="topic-description">
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
               <!-- END switch_description -->
               {topics_list_box.row.GOTO_PAGE_NEW}
               <!-- BEGIN nav_tree -->
                  {topics_list_box.row.TOPIC_NAV_TREE_NEW}
               <!-- END nav_tree -->
<br/><br/>
<div id="topicInfo">
<span class="views"><i class="fa fa-eye" aria-hidden="true"></i>&nbsp;{topics_list_box.row.VIEWS}<span id="viewsWord"> Visualizações &nbsp;&nbsp;</span></span>
<span class="posts"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;{topics_list_box.row.REPLIES} <span id="commentWord">Comentários</span></span>
</div>

<style>
.topic-description:before {
        content: "\A";
        white-space:pre-wrap;
        font-size: 5px !important;
}
.lastpost-avatar img {
    border-radius: 50px !important;
    height: 50px !important;
    width: 50px !important;
    margin-top: 5px !important;
}
.lastpost-avatar:after {
    width: 50px !important;
    height: 50px !important;
    margin-top: 5px !important;
}
ul.topiclist li.header {
        display: none !important;
}
</style>

            </dd>
            <dd class="topicPreview">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </dd>


            <dd class="lastpost">
               <!-- BEGIN avatar -->
                  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
               <!-- END avatar -->

               <span>
                  Última mensagem  {topics_list_box.row.LAST_POST_IMG}<br /><dfn>{L_LASTPOST}</dfn>{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR}
               </span>
            </dd>
            <!-- BEGIN multi_selection -->
               <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} />
            <!-- END multi_selection -->
         </dl>
      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
   <dl>
      <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
   </dl>
</li>
<!-- END no_topics -->

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

Essas estrelas representam o quê?

No fórum que eu passei ele representa os views mas eu queria se possível que no meu ele representasse a reputação do tópico, como por exemplo o numero de "obrigados" que a pessoa da, entende?

Creio que não é possível, Apollo, para a reputação, digo. :/

T-T
Tem como por para views como no fórum então? Mas sem remover o "visualizações" que fica no cantinho.

Vai ficar meio repetido, não?
Mas enfim... Quantas visualizações são necessárias para uma estrela cheia?

Vai ficar bonitinho
Pode ser 100 depois mudamos isso.

Na primeira mensagem, o senhor mandou dois templates. No caso, eu só preciso do topics_list_box.
Poderia me dizer, exatamente e precisamente qual é?

É esse:

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}()
      {
        alert('MAIN');

        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}()
      {
        alert('ALL');

        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="forumbg announcement">
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <dt>
                  <!-- 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 -->
                  {topics_list_box.row.L_TITLE}
              </dt>
              <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.L_REPLIES}"></i></dd>
              <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.L_VIEWS}"></i></dd>
              <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.L_LASTPOST}"></i></dd>
            </dl>
        </li>
      </ul>
      <ul class="topiclist topics bg_none">
<!-- END header_table -->

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

<!-- BEGIN topic -->

  <!-- BEGIN table_sticky -->
        </ul>
      </div>
      <div class="forumbg">
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <!--<dd class="dterm">-->
              <dd class="dterm">
                  <!-- 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 -->
                  {topics_list_box.row.topic.table_sticky.L_TITLE}
              </dd>
              <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.topic.table_sticky.L_REPLIES}"></i></dd>
              <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.topic.table_sticky.L_VIEWS}"></i></dd>
              <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.topic.table_sticky.L_LASTPOST}"></i></dd>
            </dl>
        </li>
      </ul>
      <ul class="topiclist topics bg_none">
  <!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
        <dl class="icon" style=" margin-left: -30px; padding-top: 10px; padding-bottom: 10px; ">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
              <!-- 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 -->
              <div class="topic-title-container">
                  <h2 class="topic-title hierarchy">
                    <a style="font-size: 18px;" class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
                        {topics_list_box.row.TOPIC_TITLE}
                    </a>
                  </h2>
              </div>
              <!-- BEGIN switch_description -->

                  <span style=" font-size: 14px; "class="topic-description">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
              <!-- END switch_description -->
              {topics_list_box.row.GOTO_PAGE_NEW}
              <!-- BEGIN nav_tree -->
                  {topics_list_box.row.TOPIC_NAV_TREE_NEW}
              <!-- END nav_tree -->
<br/><br/>
<div id="topicInfo">
<span class="views"><i class="fa fa-eye" aria-hidden="true"></i>&nbsp;{topics_list_box.row.VIEWS}<span id="viewsWord"> Visualizações &nbsp;&nbsp;</span></span>
<span class="posts"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;{topics_list_box.row.REPLIES} <span id="commentWord">Comentários</span></span>
</div>

<style>
.topic-description:before {
        content: "\A";
        white-space:pre-wrap;
        font-size: 5px !important;
}
.lastpost-avatar img {
    border-radius: 50px !important;
    height: 50px !important;
    width: 50px !important;
    margin-top: 5px !important;
}
.lastpost-avatar:after {
    width: 50px !important;
    height: 50px !important;
    margin-top: 5px !important;
}
ul.topiclist li.header {
        display: none !important;
}
</style>

            </dd>
            <dd class="topicPreview">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </dd>


            <dd class="lastpost">
              <!-- BEGIN avatar -->
                  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
              <!-- END avatar -->

              <span>
                  Última mensagem  {topics_list_box.row.LAST_POST_IMG}<br /><dfn>{L_LASTPOST}</dfn>{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR}
              </span>
            </dd>
            <!-- BEGIN multi_selection -->
              <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} />
            <!-- END multi_selection -->
        </dl>
      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
  <dl>
      <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
  </dl>
</li>
<!-- END no_topics -->

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

Uma modificação se possível, em vez de aparecer o numero de visualizações no balão azul teria como por uma palavra pra cada numero de estrelas? Por exemplo, se o tópico tem 10 views (1 estrela azul) e você passar o cursor por cima das estrelas aparece "Regular", se o tópico tiver 30 views (3 estrelas azul) aparece "Regular3". Teria como fazer isso?

Troque por este para que possamos continuar:

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}()
      {
        alert('MAIN');

        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}()
      {
        alert('ALL');

        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="forumbg announcement">
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <dt>
                  <!-- 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 -->
                  {topics_list_box.row.L_TITLE}
              </dt>
              <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.L_REPLIES}"></i></dd>
              <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.L_VIEWS}"></i></dd>
              <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.L_LASTPOST}"></i></dd>
            </dl>
        </li>
      </ul>
      <ul class="topiclist topics bg_none">
<!-- END header_table -->

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

<!-- BEGIN topic -->

  <!-- BEGIN table_sticky -->
        </ul>
      </div>
      <div class="forumbg">
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <!--<dd class="dterm">-->
              <dd class="dterm">
                  <!-- 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 -->
                  {topics_list_box.row.topic.table_sticky.L_TITLE}
              </dd>
              <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.topic.table_sticky.L_REPLIES}"></i></dd>
              <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.topic.table_sticky.L_VIEWS}"></i></dd>
              <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.topic.table_sticky.L_LASTPOST}"></i></dd>
            </dl>
        </li>
      </ul>
      <ul class="topiclist topics bg_none">
  <!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
        <dl class="icon" style=" margin-left: -30px; padding-top: 10px; padding-bottom: 10px; ">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
              <!-- 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 -->
              <div class="topic-title-container">
                  <h2 class="topic-title hierarchy">
                    <a style="font-size: 18px;" class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
                        {topics_list_box.row.TOPIC_TITLE}
                    </a>
                  </h2>
              </div>
              <!-- BEGIN switch_description -->

                  <span style=" font-size: 14px; "class="topic-description">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
              <!-- END switch_description -->
              {topics_list_box.row.GOTO_PAGE_NEW}
              <!-- BEGIN nav_tree -->
                  {topics_list_box.row.TOPIC_NAV_TREE_NEW}
              <!-- END nav_tree -->
<br/><br/>
<div id="topicInfo">
<span class="views"><i class="fa fa-eye" aria-hidden="true"></i>&nbsp;<span class="topics-list-views">{topics_list_box.row.VIEWS}</span><span id="viewsWord"> Visualizações &nbsp;&nbsp;</span></span>
<span class="posts"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;{topics_list_box.row.REPLIES} <span id="commentWord">Comentários</span></span>
</div>

<style>
.topic-description:before {
        content: "\A";
        white-space:pre-wrap;
        font-size: 5px !important;
}
.lastpost-avatar img {
    border-radius: 50px !important;
    height: 50px !important;
    width: 50px !important;
    margin-top: 5px !important;
}
.lastpost-avatar:after {
    width: 50px !important;
    height: 50px !important;
    margin-top: 5px !important;
}
ul.topiclist li.header {
        display: none !important;
}
</style>

            </dd>
            <dd class="topicPreview">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </dd>


            <dd class="lastpost">
              <!-- BEGIN avatar -->
                  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
              <!-- END avatar -->

              <span>
                  Última mensagem  {topics_list_box.row.LAST_POST_IMG}<br /><dfn>{L_LASTPOST}</dfn>{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR}
              </span>
            </dd>
            <!-- BEGIN multi_selection -->
              <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} />
            <!-- END multi_selection -->
        </dl>
      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
  <dl>
      <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
  </dl>
</li>
<!-- END no_topics -->

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

Pronto!

Deu um trabalho enorme para pensar na lógica. Você não faz ideia.
Enfim, crie um novo JavaScript:

Código:

(function ($) {
  'use strict';

  var config = {
    activeColor: '#39c',
    $el        : $('.topiclist .row'),
    list      : [
      { tooltip: 'Nenhuma estrela', min: 0, index: 0 },
      { tooltip: '1 estrela', min: 100, index: 1 },
      { tooltip: '2 estrelas', min: 200, index: 2 },
      { tooltip: '3 estrelas', min: 300, index: 3 },
      { tooltip: '4 estrelas', min: 400, index: 4 },
      { tooltip: '5 estrelas', min: 500, index: 5 },
    ]
  };

  config.list.reverse();

  $(function () {
    var $el = config.$el;

    $el.each(function () {
      var $this = $(this);
      var views = parseInt($this.find('.topics-list-views').text());

      var $div  = $('<div>', {
        'class': 'fa-stars-wrapper',
        'html' : [
          '<i class="fa fa-star fa-star-inactive fa-star-1"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-2"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-3"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-4"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-5"></i>'
        ].join('\n')
      })
        .appendTo($this)
          .tooltipster()
      ;

      $.each(config.list, function () {
        var self = this;

        if (views >= self.min) {
          for (var i = 0; i < self.index; i++) {
            var o = i + 1;

            $div.find('.fa-star-' + o).css('color', config.activeColor);
          }

          $div.tooltipster('content', self.tooltip);
          return false;
        }
      });
    });

    $('<style>', {
      'text': [
        '.row {',
        '  position: relative;',
        '}',
        '',
        '.fa-stars-wrapper {',
        '  position: absolute;',
        '  top: 50%;',
        '  transform: translateY(-50%);',
        '  left: 57%;',
        '}'
      ].join('\n')
    }).appendTo('head');
  });
}(jQuery));

Invista-o nos subfóruns.
Você pode configurar o tooltip na variável de configuração.

Não teve resultado. ;-;
http://suportedesign.forumeiros.com/f7-

Tente trocar por:

Código:

(function ($) {
  'use strict';
 
  var config = {
    activeColor: '#39c',
    $el        : $('.topiclist .row'),
    list      : [
      { tooltip: 'Nenhuma estrela', min: 0, index: 0 },
      { tooltip: '1 estrela', min: 100, index: 1 },
      { tooltip: '2 estrelas', min: 200, index: 2 },
      { tooltip: '3 estrelas', min: 300, index: 3 },
      { tooltip: '4 estrelas', min: 400, index: 4 },
      { tooltip: '5 estrelas', min: 500, index: 5 },
    ]
  };
 
  config.list.reverse();
 
  $(window).on('load', function () {
    var $el = config.$el;
 
    $el.each(function () {
      var $this = $(this);
      var views = parseInt($this.find('.topics-list-views').text());
 
      var $div  = $('<div>', {
        'class': 'fa-stars-wrapper',
        'html' : [
          '<i class="fa fa-star fa-star-inactive fa-star-1"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-2"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-3"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-4"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-5"></i>'
        ].join('\n')
      })
        .appendTo($this)
          .tooltipster()
      ;
 
      $.each(config.list, function () {
        var self = this;
 
        if (views >= self.min) {
          for (var i = 0; i < self.index; i++) {
            var o = i + 1;
 
            $div.find('.fa-star-' + o).css('color', config.activeColor);
          }
 
          $div.tooltipster('content', self.tooltip);
          return false;
        }
      });
    });
 
    $('<style>', {
      'text': [
        '.row {',
        '  position: relative;',
        '}',
        '',
        '.fa-stars-wrapper {',
        '  position: absolute;',
        '  top: 50%;',
        '  transform: translateY(-50%);',
        '  left: 57%;',
        '}'
      ].join('\n')
    }).appendTo('head');
  });
}(jQuery));

E ele só tem como funcionar nos fóruns normais.
-> http://suportedesign.forumeiros.com/f26-suporte-grafico

Nos blogs, não.

Ainda não apareceu nada.

Tente remover o JS e trocar o template por este:

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}()
      {
        alert('MAIN');

        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}()
      {
        alert('ALL');

        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="forumbg announcement">
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <dt>
                  <!-- 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 -->
                  {topics_list_box.row.L_TITLE}
              </dt>
              <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.L_REPLIES}"></i></dd>
              <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.L_VIEWS}"></i></dd>
              <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.L_LASTPOST}"></i></dd>
            </dl>
        </li>
      </ul>
      <ul class="topiclist topics bg_none">
<!-- END header_table -->

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

<!-- BEGIN topic -->

  <!-- BEGIN table_sticky -->
        </ul>
      </div>
      <div class="forumbg">
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <!--<dd class="dterm">-->
              <dd class="dterm">
                  <!-- 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 -->
                  {topics_list_box.row.topic.table_sticky.L_TITLE}
              </dd>
              <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.topic.table_sticky.L_REPLIES}"></i></dd>
              <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.topic.table_sticky.L_VIEWS}"></i></dd>
              <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.topic.table_sticky.L_LASTPOST}"></i></dd>
            </dl>
        </li>
      </ul>
      <ul class="topiclist topics bg_none">
  <!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
        <dl class="icon" style=" margin-left: -30px; padding-top: 10px; padding-bottom: 10px; ">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
              <!-- 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 -->
              <div class="topic-title-container">
                  <h2 class="topic-title hierarchy">
                    <a style="font-size: 18px;" class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
                        {topics_list_box.row.TOPIC_TITLE}
                    </a>
                  </h2>
              </div>
              <!-- BEGIN switch_description -->

                  <span style=" font-size: 14px; "class="topic-description">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
              <!-- END switch_description -->
              {topics_list_box.row.GOTO_PAGE_NEW}
              <!-- BEGIN nav_tree -->
                  {topics_list_box.row.TOPIC_NAV_TREE_NEW}
              <!-- END nav_tree -->
<br/><br/>
<div id="topicInfo">
<span class="views"><i class="fa fa-eye" aria-hidden="true"></i>&nbsp;<span class="topics-list-views">{topics_list_box.row.VIEWS}</span><span id="viewsWord"> Visualizações &nbsp;&nbsp;</span></span>
<span class="posts"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;{topics_list_box.row.REPLIES} <span id="commentWord">Comentários</span></span>
</div>

<style>
.topic-description:before {
        content: "\A";
        white-space:pre-wrap;
        font-size: 5px !important;
}
.lastpost-avatar img {
    border-radius: 50px !important;
    height: 50px !important;
    width: 50px !important;
    margin-top: 5px !important;
}
.lastpost-avatar:after {
    width: 50px !important;
    height: 50px !important;
    margin-top: 5px !important;
}
ul.topiclist li.header {
        display: none !important;
}
</style>

            </dd>
            <dd class="topicPreview">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </dd>


            <dd class="lastpost">
              <!-- BEGIN avatar -->
                  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
              <!-- END avatar -->

              <span>
                  Última mensagem  {topics_list_box.row.LAST_POST_IMG}<br /><dfn>{L_LASTPOST}</dfn>{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR}
              </span>
            </dd>
            <!-- BEGIN multi_selection -->
              <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} />
            <!-- END multi_selection -->
        </dl>
      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
  <dl>
      <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
  </dl>
</li>
<!-- END no_topics -->

<!-- BEGIN bottom -->
</ul>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<script>(function ($) {
  'use strict';
 
  var config = {
    activeColor: '#39c',
    $el        : $('.topiclist .row'),
    list      : [
      { tooltip: 'Nenhuma estrela', min: 0, index: 0 },
      { tooltip: '1 estrela', min: 100, index: 1 },
      { tooltip: '2 estrelas', min: 200, index: 2 },
      { tooltip: '3 estrelas', min: 300, index: 3 },
      { tooltip: '4 estrelas', min: 400, index: 4 },
      { tooltip: '5 estrelas', min: 500, index: 5 },
    ]
  };
 
  config.list.reverse();
    var $el = config.$el;
 
    $el.each(function () {
      var $this = $(this);
      var views = parseInt($this.find('.topics-list-views').text());
 
      var $div  = $('<div>', {
        'class': 'fa-stars-wrapper',
        'html' : [
          '<i class="fa fa-star fa-star-inactive fa-star-1"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-2"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-3"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-4"></i>',
          '<i class="fa fa-star fa-star-inactive fa-star-5"></i>'
        ].join('\n')
      })
        .appendTo($this)
          .tooltipster()
      ;
 
      $.each(config.list, function () {
        var self = this;
 
        if (views >= self.min) {
          for (var i = 0; i < self.index; i++) {
            var o = i + 1;
 
            $div.find('.fa-star-' + o).css('color', config.activeColor);
          }
 
          $div.tooltipster('content', self.tooltip);
          return false;
        }
      });
    });
 
    $('<style>', {
      'text': [
        '.row {',
        '  position: relative;',
        '}',
        '',
        '.fa-stars-wrapper {',
        '  position: absolute;',
        '  top: 50%;',
        '  transform: translateY(-50%);',
        '  left: 57%;',
        '}'
      ].join('\n')
    }).appendTo('head');
}(jQuery));</script>
<!-- END topics_list_box -->

O engraçado é que não é um erro no JavaScript, tendo em vista que quando testo pelo console ele funciona perfeitamente.

HAHA! Agora sim apareceu!
Brigadão Luiz! Pena que aqui no FdF não tenha vários botões de "obrigado" ;-;