Estrelas e Numero de resposta em balão

Detalhes da questão

Endereço do fórum: www.universodoscanarios.com
Versão do fórum: PhpBB3

Descrição

Boa noite a todos.

Acompanhei um tópico no qual deixo o Link e gostaria de saber se é possível alterar a aparência do meu fórum para este formato?


Ja antecipando deixo meu topic list box 

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">
      <div class="inner"><span class="corners-top"><span></span></span>
      <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">{topics_list_box.row.L_REPLIES}</dd>
               <dd class="views">{topics_list_box.row.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.L_LASTPOST}</span></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>
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm" style="padding-left:0;">
                  <!-- 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" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
               <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
               <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></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="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
               <!-- BEGIN single_selection -->
                  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
               <!-- END single_selection -->
               {topics_list_box.row.NEWEST_POST_IMG}
               {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
               {topics_list_box.row.TOPIC_TYPE}
               <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
               <!-- BEGIN switch_description -->
               <br />
               {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
               <!-- END switch_description -->
               <br />
               {topics_list_box.row.GOTO_PAGE_NEW}
               <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
               <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost">

                    <!-- BEGIN avatar -->
                    <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

               <span>{topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn>
               {topics_list_box.row.LAST_POST_IMG}<br style="clear:left;" />{topics_list_box.row.LAST_POST_TIME}</span>

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </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>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Se puderem me ajudar ficarei grato.




Abraço.

Olá @Nitram, tudo bem?

Troque o seu template topics_list_box por este:

Código:

<style>
.numerodasrespostas {
position: absolute;
margin-top: 9px;
height: 6px;
margin-left: 50px;
width: 260px;
}
.numerodasrespostas::before {
display: block;
content: " ";
height: 0;
position: relative;
width: 0;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-top: 5px solid #18B0EB;
bottom: 5px;
left: 31px;
}
.numerodasrespostas::after {
content: attr(stac);
background: #18B0EB;
width: 150px;
display: block;
border-radius: 2px;
position: relative;
bottom: 30px;
color: #FFF;
padding: 3px 0;
left: 6px;
text-align: center;
font: bold 12px helvetica;
text-shadow: 0 1px 0 #1297CA;
}
.numerodasrespostas::before, .numerodasrespostas::after {
opacity: 0;
-webkit-transition: 0.5s;
-moz-transition-duration: 0.5s;
-htm-transition-duration: 0.5s;
}
.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[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);
}

</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}()
      {
        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">
      <div class="inner"><span class="corners-top"><span></span></span>
      <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">{topics_list_box.row.L_REPLIES}</dd>
              <dd class="views">{topics_list_box.row.L_VIEWS}</dd>
              <dd class="lastpost"><span>{topics_list_box.row.L_LASTPOST}</span></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>
        <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <!--<dd class="dterm">-->
              <dd class="dterm" style="padding-left:0;">
                  <!-- 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" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
              <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
              <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
              <dd class="lastpost"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></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="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
              <!-- BEGIN single_selection -->
                  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
              <!-- END single_selection -->
              {topics_list_box.row.NEWEST_POST_IMG}
              {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
              {topics_list_box.row.TOPIC_TYPE}
              <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
              <!-- BEGIN switch_description -->
              <br />
              {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
              <!-- END switch_description -->
              <br />
              {topics_list_box.row.GOTO_PAGE_NEW}
              <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
              <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost">

                    <!-- BEGIN avatar -->
                    <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

              <span>{topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn>
              <div stac="{topics_list_box.row.REPLIES} Respostas" class="numerodasrespostas"><div class="popularidade"><div stac="0" class="barp" style="width: 3%;">{topics_list_box.row.LAST_POST_IMG}</div></div><br style="clear:left;" />{topics_list_box.row.LAST_POST_TIME}</span>

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </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>
  <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Até mais.
Fraise

Olá amigo boa tarde.

Infelizmente o codigo não resultou no resultado esperado, alias não mudou nada.

Publicou o seu template clicando no ícone ?

Até mais.

Sim fiz isto, foi confirmado.

Estranho..
No mais, troque o template por este:

Código:

<style>
.numerodasrespostas {
position: absolute;
margin-top: 9px;
height: 6px;
margin-left: 50px;
width: 260px;
}
.numerodasrespostas::before {
display: block;
content: " ";
height: 0;
position: relative;
width: 0;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-top: 5px solid #18B0EB;
bottom: 5px;
left: 31px;
}
.numerodasrespostas::after {
content: attr(stac);
background: #18B0EB;
width: 150px;
display: block;
border-radius: 2px;
position: relative;
bottom: 30px;
color: #FFF;
padding: 3px 0;
left: 6px;
text-align: center;
font: bold 12px helvetica;
text-shadow: 0 1px 0 #1297CA;
}
.numerodasrespostas::before, .numerodasrespostas::after {
opacity: 0;
-webkit-transition: 0.5s;
-moz-transition-duration: 0.5s;
-htm-transition-duration: 0.5s;
}
.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[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);
}

</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}()
      {
        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">
      <div class="inner"><span class="corners-top"><span></span></span>
      <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">{topics_list_box.row.L_REPLIES}</dd>
              <dd class="views">{topics_list_box.row.L_VIEWS}</dd>
              <dd class="lastpost"><span>{topics_list_box.row.L_LASTPOST}</span></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>
        <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <!--<dd class="dterm">-->
              <dd class="dterm" style="padding-left:0;">
                  <!-- 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" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
              <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
              <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
              <dd class="lastpost"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></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="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
              <!-- BEGIN single_selection -->
                  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
              <!-- END single_selection -->
              {topics_list_box.row.NEWEST_POST_IMG}
              {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
              {topics_list_box.row.TOPIC_TYPE}
              <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
              <!-- BEGIN switch_description -->
              <br />
              {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
              <!-- END switch_description -->
              <br />
              {topics_list_box.row.GOTO_PAGE_NEW}
              <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
              <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost">

                    <!-- BEGIN avatar -->
                    <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

              <span>{topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn>
              <div stac="{topics_list_box.row.REPLIES} Respostas" class="numerodasrespostas"><div class="popularidade"><div stac="0" class="barp" style="width: 3%;">{topics_list_box.row.LAST_POST_IMG}<br style="clear:left;" />{topics_list_box.row.LAST_POST_TIME}</span></div></div>

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </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>
  <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Até mais.
Fraise

Então não..... fiz a troca mas não atingiu o efeito desejado, alem de não mostras as estrelas nem o balão ao passar o mouse por cima da barra.

Olá!

Creio que agora esteja correto:

Código:

<style>
.numerodasrespostas {
position: absolute;
margin-top: 9px;
height: 6px;
margin-left: 50px;
width: 260px;
}
.numerodasrespostas::before {
display: block;
content: " ";
height: 0;
position: relative;
width: 0;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-top: 5px solid #18B0EB;
bottom: 5px;
left: 31px;
}
.numerodasrespostas::after {
content: attr(stac);
background: #18B0EB;
width: 150px;
display: block;
border-radius: 2px;
position: relative;
bottom: 30px;
color: #FFF;
padding: 3px 0;
left: 6px;
text-align: center;
font: bold 12px helvetica;
text-shadow: 0 1px 0 #1297CA;
}
.numerodasrespostas::before, .numerodasrespostas::after {
opacity: 0;
-webkit-transition: 0.5s;
-moz-transition-duration: 0.5s;
-htm-transition-duration: 0.5s;
}
.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[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);
}

</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}()
      {
        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">
      <div class="inner"><span class="corners-top"><span></span></span>
      <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">{topics_list_box.row.L_REPLIES}</dd>
              <dd class="views">{topics_list_box.row.L_VIEWS}</dd>
              <dd class="lastpost"><span>{topics_list_box.row.L_LASTPOST}</span></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>
        <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <!--<dd class="dterm">-->
              <dd class="dterm" style="padding-left:0;">
                  <!-- 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" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
              <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
              <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
              <dd class="lastpost"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></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="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
              <!-- BEGIN single_selection -->
                  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
              <!-- END single_selection -->
              {topics_list_box.row.NEWEST_POST_IMG}
              {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
              {topics_list_box.row.TOPIC_TYPE}
              <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
              <!-- BEGIN switch_description -->
              <br />
              {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
              <!-- END switch_description -->
              <br />
              {topics_list_box.row.GOTO_PAGE_NEW}
              <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
              <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost">

                    <!-- BEGIN avatar -->
                    <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

              <div stac="{topics_list_box.row.REPLIES} Respostas" class="numerodasrespostas"><div class="popularidade"><div stac="0" class="barp" style="width: 3%;"><span>{topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn>
              {topics_list_box.row.LAST_POST_IMG}<br style="clear:left;" />{topics_list_box.row.LAST_POST_TIME}</div></div></div>

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </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>
  <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Até mais.
Fraise

Vixi, ainda não deu certo, alem de aparecer a barra bugada, não tem as estrelas.

Olá!

Para as estrelas, por gentileza, crie um novo tópico.
Quanto à sua questão atual, poderia deixar o código ativo em seu fórum?

Até mais.

@fraise o codigo se encontra ativo.

Sobre criar outro tópico achei não ser necessario ja que no outro tópico que ajudou o amigo com esta questão foi criado tudo junto, e em um unico tópico.

Algum amigo poderia me ajudar?

Saudações!

Esta ativo também onde mostra este erro?

Ative tudo e depois mande um link aqui para mim ver o problema.
Até mais.
Sennior

Me fale a hora que vai verificar que deixo ativo para você.

Sennior escreveu:Saudações!

Esta ativo também onde mostra este erro?

Ative tudo e depois mande um link aqui para mim ver o problema.
Até mais.
Sennior

O codigo esta ativo e o link para visualizar o efeito sem resultado obtido é este http://www.universodoscanarios.com/f1-nossas-regras

Poderia me ajudar?

Alguém?

Seria possível algum membro ou staff me ajudar com esta duvida????

Bem @FRAISE  o código bugado ficou ativo até agora, vou voltar o correto ja que não teve uma solução para minha duvida.

Se tiver algum usuário disposto ajudar estou acompanhando o tópico.

Depois de cansáveis 3 horas... Finalmente ficou uma delícia "carah". kkkkkk

Aqui está o seu template:

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">
      <div class="inner"><span class="corners-top"><span></span></span>
      <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"></dd>
               <dd class="views"></dd>
               <dd class="lastpost"><span>{topics_list_box.row.L_LASTPOST}</span></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>
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm" style="padding-left:0;">
                  <!-- 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" style="padding-left:45px;"></dd>
               <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
               <dd class="views"></dd>
               <dd class="lastpost"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></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="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
               <!-- BEGIN single_selection -->
                  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
               <!-- END single_selection -->
               {topics_list_box.row.NEWEST_POST_IMG}
               {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
               {topics_list_box.row.TOPIC_TYPE}
               <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
               <!-- BEGIN switch_description -->
               <br />
               {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
               <!-- END switch_description -->
               <br />
               {topics_list_box.row.GOTO_PAGE_NEW}
               <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
               <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="views"><div class="star activity" stac="{topics_list_box.row.VIEWS}"></div></dd>
            <dd class="posts">
            <!-- BEGIN avatar -->
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
            </dd>
            <dd class="lastpost">
            {topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR}
            <div stac="{topics_list_box.row.REPLIES} {L_REPLIES}" class="numerodasrespostas"><div class="popularidade">
            <div stac="0" class="barp" style="width: {topics_list_box.row.REPLIES}%;">{topics_list_box.row.LAST_POST_IMG}</div></div>
            </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>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

E troque o CSS por:

Código:

.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,
.numerodasrespostas:hover::after,
.numerodasrespostas:hover::before {
opacity: 1;
}
.numerodasrespostas {
position: absolute;
margin-top: 9px;
height: 6px;
width: 260px;
}
.numerodasrespostas:before {
display: block;
content: " ";
height: 0;
position: relative;
width: 0;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-top: 5px solid #18B0EB;
bottom: 5px;
left: 31px;
}
.numerodasrespostas:after {
content: attr(stac);
background: #18B0EB;
width: 150px;
display: block;
border-radius: 2px;
position: relative;
bottom: 45px;
color: #FFF;
padding: 3px 0;
left: 6px;
text-align: center;
font: bold 12px helvetica;
text-shadow: 0 1px 0 #1297CA;
}
.numerodasrespostas:before, .numerodasrespostas:after {
opacity: 0;
-webkit-transition: 0.5s;
-moz-transition-duration: 0.5s;
-htm-transition-duration: 0.5s;
}
.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[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: #06A3FF;
}

Eu achei que poderia lhe agradar, então, eu tirei a librdade e coloquei duas coisas novas que no template do tópico de referência que nos deu, não tem. Toda vez que alguém responder ao tópico, a barrinha azul vai aumentar sozinha. E o avatar do último que postou no tópico vai aparecer, como de costume.

Uma pequena prévia de como ficou em meus testes:

Se não quiser o avatar, basta deletar o dd.post ou, apenas ir no template e tirar o lastpost.

Atenciosamente,
Shek

Olá Shek, boa tarde.

Imagino bem o trabalho e sei o quanto é dedicado e se empenha a ajudar.

Bem o codigo tem alguns bug veja como ficou em meu fórum.

Mas... Eu acabo de acessar esse fórum http://www.universodoscanarios.com/f25-projetos-viveiros-gaiolas-etc e não vejo o problema que mostrou.


Você tem a URL da página que contém este problema?

Então Shek é como disse retirei este codigo da minha CSS

Código:

/*** Imagem envolta quantidade topicos mensagems nos fórum ***/
li.row dd.topics, li.row dd.posts, li.row dd.views {
background: url(http://i.imgur.com/640EJpR.png) no-repeat left top;
height: 36px;
font-size: 16px;
font-weight: bold;
color: #183853;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
padding: 6px 0 0 7px !important;
text-align: center!important;
width: 64px;
}
ul.topiclist dfn {
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #0658b0;
Tentativa de owner!!! block;
}
/*** Imagem envolta quantidade tópicos mensagens nos fórum - fim ***/

O problema é que não sei como as estrelas são computadas se por acesso(automático) ou manual sendo o membro que vai clicar sobre ela para avaliar? Outra coisa se for automático tem como aumentar pois praticamente todos tópicos estão 5 estrelas.

As estrelas são definidas automaticamente (pela quantidade de visualizações). Você pode personalizá-las modificando o seguinte CSS:

Código:

.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");
}

Outra maneira de executar este procedimento, é com esta dica: https://ajuda.forumeiros.com/t61142-

Até mais!

Obrigado pela paciência e colaboração, vou optar por personalizar minha CSS nos valores de visualização.


Fiquei satisfeito com a colaboração.

@Fraise e @Sennior agradeço a vocês por ter iniciado na tentativa de ajudar.

Abraço.

*podem fechar o tópico.