Adicionar estrelas nos tópicos

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Adicionar estrelas nos tópicos

Mensagem por APOllO 19.10.17 23:36

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

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por Luiz 19.10.17 23:39

Essas estrelas representam o quê?

Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por APOllO 19.10.17 23:43

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?
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por Luiz 19.10.17 23:46

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

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por APOllO 19.10.17 23:51

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

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por Luiz 19.10.17 23:58

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

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por APOllO 20.10.17 0:00

Vai ficar bonitinho Feliz
Pode ser 100 depois mudamos isso.
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por Luiz 20.10.17 20:13

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

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por APOllO 21.10.17 16:43

É 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?
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por Luiz 21.10.17 17:28

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

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por APOllO 21.10.17 17:44

Pronto!
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por Luiz 21.10.17 18:48

Deu um trabalho enorme para pensar na lógica. Você não faz ideia. Rindo
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. Piscada
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por APOllO 21.10.17 21:19

APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por Luiz 21.10.17 21:22

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.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por APOllO 21.10.17 21:27

Ainda não apareceu nada. Não
APOllO

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por Luiz 21.10.17 21:30

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. Pensativo
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por APOllO 21.10.17 21:38

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

APOllO
Super Membro

Membro desde : 08/12/2014
Mensagens : 1104
Pontos : 1529

http://suportedesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Adicionar estrelas nos tópicos

Mensagem por Luiz 21.10.17 21:39

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos