Adicionar estrelas nos tópicos

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::     <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>  <div class="main-head">  <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" />  <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">   <strong>{topics_list_box.row.L_TITLE}</strong>    </tbody> </table> </div> <div class="main-head">  <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" / >  <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">  <tr> <td class="tcl tdtopics  sticky-separator "> <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>  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />   {topics_list_box.row.ICON}  {topics_list_box.row.NEWEST_POST_IMG} {topics_list_box.row.PARTICIPATE_POST_IMG}  {topics_list_box.row.TOPIC_TYPE}  <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>  {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}  {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}  <br />  {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}  </td> <td class="tc2  sticky-separator "> <div class="star activity" stac="{topics_list_box.row.VIEWS}"></div></td> <td class="tcr  sticky-separator ">  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>  {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>  <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>  </tr>   <tr> <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td> </tr>   </tbody> </table> </div> <div class="main-foot clearfix">  <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" />  <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p> <p class="options"> <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a> {S_WATCH_FORUM} <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>  <br />

topic_list_box do meu fórum:

Código::     <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>  <div class="forumbg announcement"> <ul class="topiclist topics"> <li class="header"> <dl class="icon"> <dt>  <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" />  {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">   <strong>{topics_list_box.row.L_TITLE}</strong>    </ul> </div> <div class="forumbg"> <ul class="topiclist topics"> <li class="header"> <dl class="icon">  <dd class="dterm">  <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" />  {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">  <li class="row {topics_list_box.row.ROW_ALT_CLASS}" style="margin-top:5px;" > <dl class="icon" style=" margin-left: -30px; padding-top: 10px; padding-bottom: 10px; "> <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />  <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>  <span style=" font-size: 14px; "class="topic-description">       {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} </span>  {topics_list_box.row.GOTO_PAGE_NEW}  {topics_list_box.row.TOPIC_NAV_TREE_NEW}  <br/><br/> <div id="topicInfo"> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> {topics_list_box.row.VIEWS}<span id="viewsWord"> Visualizações   </span></span> <span class="posts"><i class="fa fa-comments" aria-hidden="true"></i> {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">                                                            </dd> <dd class="lastpost">  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>  <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>  <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} />  </dl> </li>   <li class="row row1"> <dl> <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt> </dl> </li>   </ul> </div>  <br />

por Luiz 19.10.17 23:39

Essas estrelas representam o quê?

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?

por Luiz 19.10.17 23:46

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

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.

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?

por APOllO 20.10.17 0:00

Vai ficar bonitinho Feliz

Pode ser 100 depois mudamos isso.

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

por APOllO 21.10.17 16:43

É esse:

Código::     <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>  <div class="forumbg announcement"> <ul class="topiclist topics"> <li class="header"> <dl class="icon"> <dt>  <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" />  {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">   <strong>{topics_list_box.row.L_TITLE}</strong>    </ul> </div> <div class="forumbg"> <ul class="topiclist topics"> <li class="header"> <dl class="icon">  <dd class="dterm">  <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" />  {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">  <li class="row {topics_list_box.row.ROW_ALT_CLASS}" style="margin-top:5px;" > <dl class="icon" style=" margin-left: -30px; padding-top: 10px; padding-bottom: 10px; "> <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />  <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>  <span style=" font-size: 14px; "class="topic-description">       {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} </span>  {topics_list_box.row.GOTO_PAGE_NEW}  {topics_list_box.row.TOPIC_NAV_TREE_NEW}  <br/><br/> <div id="topicInfo"> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> {topics_list_box.row.VIEWS}<span id="viewsWord"> Visualizações   </span></span> <span class="posts"><i class="fa fa-comments" aria-hidden="true"></i> {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">                                                            </dd> <dd class="lastpost">  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>  <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>  <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} />  </dl> </li>   <li class="row row1"> <dl> <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt> </dl> </li>   </ul> </div>  <br />

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?

por Luiz 21.10.17 17:28

Troque por este para que possamos continuar:

Código::     <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>  <div class="forumbg announcement"> <ul class="topiclist topics"> <li class="header"> <dl class="icon"> <dt>  <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" />  {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">   <strong>{topics_list_box.row.L_TITLE}</strong>    </ul> </div> <div class="forumbg"> <ul class="topiclist topics"> <li class="header"> <dl class="icon">  <dd class="dterm">  <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" />  {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">  <li class="row {topics_list_box.row.ROW_ALT_CLASS}" style="margin-top:5px;" > <dl class="icon" style=" margin-left: -30px; padding-top: 10px; padding-bottom: 10px; "> <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />  <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>  <span style=" font-size: 14px; "class="topic-description">       {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} </span>  {topics_list_box.row.GOTO_PAGE_NEW}  {topics_list_box.row.TOPIC_NAV_TREE_NEW}  <br/><br/> <div id="topicInfo"> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> <span class="topics-list-views">{topics_list_box.row.VIEWS}</span><span id="viewsWord"> Visualizações   </span></span> <span class="posts"><i class="fa fa-comments" aria-hidden="true"></i> {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">                                                            </dd> <dd class="lastpost">  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>  <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>  <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} />  </dl> </li>   <li class="row row1"> <dl> <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt> </dl> </li>   </ul> </div>  <br />

por APOllO 21.10.17 17:44

Pronto!

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

por APOllO 21.10.17 21:19

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

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.

por APOllO 21.10.17 21:27

Ainda não apareceu nada. Não

por Luiz 21.10.17 21:30

Tente remover o JS e trocar o template por este:

Código::     <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>  <div class="forumbg announcement"> <ul class="topiclist topics"> <li class="header"> <dl class="icon"> <dt>  <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" />  {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">   <strong>{topics_list_box.row.L_TITLE}</strong>    </ul> </div> <div class="forumbg"> <ul class="topiclist topics"> <li class="header"> <dl class="icon">  <dd class="dterm">  <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" />  {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">  <li class="row {topics_list_box.row.ROW_ALT_CLASS}" style="margin-top:5px;" > <dl class="icon" style=" margin-left: -30px; padding-top: 10px; padding-bottom: 10px; "> <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />  <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>  <span style=" font-size: 14px; "class="topic-description">       {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} </span>  {topics_list_box.row.GOTO_PAGE_NEW}  {topics_list_box.row.TOPIC_NAV_TREE_NEW}  <br/><br/> <div id="topicInfo"> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> <span class="topics-list-views">{topics_list_box.row.VIEWS}</span><span id="viewsWord"> Visualizações   </span></span> <span class="posts"><i class="fa fa-comments" aria-hidden="true"></i> {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">                                                            </dd> <dd class="lastpost">  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>  <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>  <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} />  </dl> </li>   <li class="row row1"> <dl> <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt> </dl> </li>   </ul> </div>  <br />  <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>

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

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" ;-;

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.

Adicionar estrelas nos tópicos