Estrelas nos tópicos

Detalhes da questão

Endereço do fórum: http://gtasavdl.forumeiros.com/
Versão do fórum: PunBB

Descrição

Gostaria de Algo parecido com isto Observem as imagens abaixo que irei mostrar



Queria esse Modo de Visualização que está na forma de popularidade e também o esse negocio de Respostas que ao colocar o mouse em cima das Respostas,aparecesse quantas Respostas tem, e ao por o mouse em cima das visualizações,aparecer quantas visualizações tem, deixarei mais dois exemplos abaixo





Obrigado e espero que alguém me ajude

Olá,

Quanto à sua primeira dúvida, poderia fornecer o endereço do fórum onde viu tal função?
E quanto à outra dúvida, o senhor já deveria de saber que só é permitida uma dúvida por tópico. Por isso peço-lhe que crie um novo tópico para sua outra dúvida.

Até mais.
Fraise

eu vi essa função nesse fórum: http://www.bplaystories.com/forum

e sobre a duas duvidas no mesmo tópico,é que é praticamente a mesma coisa que eu quero pra ambos...

Ambos eu vi nesse fórum citado acima

Olá,

Mas são duas dúvidas amigo! Terá de criar um tópico para cada dúvida.
Quanto à dúvida das estrelinhas, irei precisar do seu template topics_list_box.
Painel de Controle Visualização Templates Geral

Até mais.
Fraise

Desculpe a demora de responder, agora que fui ver a mensagem.... ok

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"><span class="filterb">Anúncios ({topics_list_box.row.COUNT_TOTAL_TOPICS})</span></h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">&nbsp;</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 -->
                  <h1><span class="filterb">Topics ({topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS})</span></h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">&nbsp;</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 -->
                          <span style="margin-left: -13px;">{topics_list_box.row.TOPIC_TYPE}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="margin-left: -7px;"><h2 class="topic-title" style="font-weight: normal !important; margin-left: -13px;"><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;
                                  <br/><p style="color: #a4a4a4; margin-left: -13px;">Iniciado {topics_list_box.row.L_BY} <span class="authooor">{topics_list_box.row.TOPIC_AUTHOR}</span></p></span>
            <!-- 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 -->" style="text-align: right; padding-right: 5px; color: #777 !important;">{topics_list_box.row.REPLIES} respostas<br/>
                  {topics_list_box.row.VIEWS} visualização</td>
                  <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><p style="margin-top: 8px;">{topics_list_box.row.LAST_POST_AUTHOR}<br/>{topics_list_box.row.LAST_POST_TIME}</p></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="options" style="font-size: 12px;">
         <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>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->
         
<style>
.pun-crumbs p {
display: none;
}
#onlinelist {
display: none;
}
#stats {
background-color: white !important;
}
</style>

Olá @Rafusqui_,

Troque por este:

Código:

      <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;
        }
        </style>
        <!-- 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="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="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}
                        <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}
                        </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>
            <!-- END bottom -->
            <!-- BEGIN spacer --><br /><!-- END spacer -->
            <!-- END row -->
            <!-- END topics_list_box -->

Até mais.
Fraise

Muito Bem,Obrigado,funcionou corretamente,pode fechar o topico
@fraise