Visualização dos Topicos em forma de balão + barra

Detalhes da questão

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

Descrição

Olá,gostaria desse que tivesse esse estilo de amostra de Topicos



com essa barra e ao colocar o mouse por cima,aparecesse a quantia no balão

vi isto nesse fórum: http://www.bplaystories.com/forum

meu topic_list_box:

Código:

<style>
    .star.activity {
        height: 12px;
        width: 73px;
        background: url("http://i.imgur.com/dm5QnCN.png");
        right: 10px;
        background-repeat: no-repeat;
        bottom: 15px;
        background-position: left center;
    }
   
    .star[stac="0"] {
        background: url("http://i.imgur.com/ViFyMEG.png");
    }
   
    .star[stac="1"],
    .star[stac="2"],
    .star[stac="3"],
    .star[stac="4"] {
        background: url("http://i.imgur.com/9reqafN.png");
    }
   
    .star[stac="5"],
    .star[stac="6"],
    .star[stac="7"],
    .star[stac="8"],
    .star[stac="9"],
    .star[stac="10"] {
        background: url("http://i.imgur.com/XpiY9iH.png");
    }
   
    .star[stac="11"],
    .star[stac="12"],
    .star[stac="13"],
    .star[stac="14"],
    .star[stac="15"] {
        background: url("http://i.imgur.com/pV3CoZR.png");
    }
   
    .star[stac="16"],
    .star[stac="17"],
    .star[stac="18"],
    .star[stac="19"],
    .star[stac="20"] {
        background: url("http://i.imgur.com/Mbzg4bC.png");
    }
   
    .star[stac="21"],
    .star[stac="22"],
    .star[stac="23"],
    .star[stac="24"],
    .star[stac="25"] {
        background: url("http://i.imgur.com/CbFTPnM.png");
    }
   
    .star[stac="26"],
    .star[stac="27"],
    .star[stac="28"],
    .star[stac="29"],
    .star[stac="30"] {
        background: url("http://i.imgur.com/qiMvzrL.png");
    }
   
    .star[stac="31"],
    .star[stac="32"],
    .star[stac="33"],
    .star[stac="34"],
    .star[stac="35"] {
        background: url("http://i.imgur.com/ryA6LNr.png");
    }
   
    .star[stac="36"],
    .star[stac="37"],
    .star[stac="38"],
    .star[stac="39"],
    .star[stac="40"] {
        background: url("http://i.imgur.com/APIhQSw.png");
    }
   
    .star[stac="41"],
    .star[stac="42"],
    .star[stac="43"],
    .star[stac="44"],
    .star[stac="45"] {
        background: url("http://i.imgur.com/TmeZdLD.png");
    }
   
    .star[stac="46"],
    .star[stac="47"],
    .star[stac="48"],
    .star[stac="49"],
    .star[stac="50"] {
        background: url("http://i.imgur.com/Q2JgrGS.png");
    }
   
    .star[stac="51"],
    .star[stac="52"],
    .star[stac="53"],
    .star[stac="54"],
    .star[stac="55"] {
        background: url("http://i.imgur.com/mJH6CcZ.png");
    }
   
    .star[stac="56"],
    .star[stac="57"],
    .star[stac="58"],
    .star[stac="59"],
    .star[stac="60"] {
        background: url("http://i.imgur.com/MuPtV3m.png");
    }
   
    .star[stac="61"],
    .star[stac="62"],
    .star[stac="63"],
    .star[stac="64"],
    .star[stac="65"] {
        background: url("http://i.imgur.com/ROXGqTE.png");
    }
   
    .star[stac="66"],
    .star[stac="67"],
    .star[stac="68"],
    .star[stac="69"],
    .star[stac="70"] {
        background: url("http://i.imgur.com/iRph5iv.png");
    }
   
    .star[stac="71"],
    .star[stac="72"],
    .star[stac="73"],
    .star[stac="74"],
    .star[stac="75"] {
        background: url("http://i.imgur.com/hYqLbmF.png");
    }
   
    .star[stac="76"],
    .star[stac="77"],
    .star[stac="78"],
    .star[stac="79"],
    .star[stac="80"] {
        background: url("http://i.imgur.com/3LSTxfB.png");
    }
   
    .star[stac="81"],
    .star[stac="82"],
    .star[stac="83"],
    .star[stac="84"],
    .star[stac="85"] {
        background: url("http://i.imgur.com/2hvADNM.png");
    }
   
    .star[stac="86"],
    .star[stac="87"],
    .star[stac="88"],
    .star[stac="89"],
    .star[stac="90"] {
        background: url("http://i.imgur.com/occYLvS.png");
    }
   
    .star[stac="91"],
    .star[stac="92"],
    .star[stac="93"],
    .star[stac="94"],
    .star[stac="95"] {
        background: url("http://i.imgur.com/ziRBtQ8.png");
    }
   
    .star[stac="96"],
    .star[stac="97"],
    .star[stac="98"],
    .star[stac="99"],
    .star[stac="100"] {
        background: url("http://i.imgur.com/dm5QnCN.png");
    }
   
    .star.activity::after {
        content: attr(stac);
        background: #18B0EB;
        width: 61px;
        display: block;
        border-radius: 2px;
        position: relative;
        bottom: 30px;
        color: #FFF;
        padding: 3px 0;
        left: 6px;
        text-align: center;
        font: bold 12px helvetica;
        text-shadow: 0 1px 0 #1297CA;
    }
   
    .star.activity::before {
        display: block;
        content: " ";
        height: 0;
        position: relative;
        width: 0;
        border-left: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-top: 5px solid #18B0EB;
        bottom: 5px;
        left: 31px;
    }
   
    .star.activity::before,
    .star.activity::after {
        opacity: 0;
        -webkit-transition: 0.5s;
        -moz-transition-duration: 0.5s;
        -htm-transition-duration: 0.5s;
    }
   
    .star.activity:hover::after,
    .star.activity:hover::before {
        opacity: 1;
    }
</style>
<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
<!-- BEGIN multi_selection -->
<script type="text/javascript">
    function check_uncheck_main_ {
        topics_list_box.row.header_table.BOX_ID
    }() {
        var all_checked = true;
        for (i = 0;
            (i < document. {
                topics_list_box.FORMNAME
            }.elements.length) && all_checked; i++) {
            if (document. {
                    topics_list_box.FORMNAME
                }.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
                all_checked = document. {
                    topics_list_box.FORMNAME
                }.elements[i].checked;
            }
        }
        document. {
            topics_list_box.FORMNAME
        }.all_mark_ {
            topics_list_box.row.header_table.BOX_ID
        }.checked = all_checked;
    }

    function check_uncheck_all_ {
        topics_list_box.row.header_table.BOX_ID
    }() {
        for (i = 0; i < document. {
                topics_list_box.FORMNAME
            }.length; i++) {
            if (document. {
                    topics_list_box.FORMNAME
                }.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
                document. {
                    topics_list_box.FORMNAME
                }.elements[i].checked = document. {
                    topics_list_box.FORMNAME
                }.all_mark_ {
                    topics_list_box.row.header_table.BOX_ID
                }.checked;
            }
        }
    }
</script>
<!-- END multi_selection -->

<div class="main-head">
    <!-- BEGIN multi_selection -->
    <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
    <!-- END multi_selection -->
    <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
</div>
<div class="main-content">
    <table cellspacing="0" class="table">
        <thead>
            <tr>
                <th class="tcl">{L_TOPICS}</th>
                <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
                <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
            </tr>
        </thead>
        <tbody class="statused">
            <!-- END header_table -->

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

            <!-- BEGIN topic -->
            <!-- BEGIN table_sticky -->
        </tbody>
    </table>
</div>

<div class="main-head">
    <!-- BEGIN multi_selection -->
    <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
    <!-- END multi_selection -->
    <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
</div>
<div class="main-content">
    <table cellspacing="0" class="table">
        <thead>
            <tr>
                <th class="tcl">{L_TOPICS}</th>
                <th class="tc3">{topics_list_box.row.topic.table_sticky.L_VIEWS}</th>
                <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
            </tr>
        </thead>
        <tbody class="statused">
            <!-- END table_sticky -->
            <tr>
                <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                    <span class="status">
                          <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
                        </span>
                    <!-- BEGIN single_selection -->
                    <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
                    <!-- END single_selection -->
                    {topics_list_box.row.ICON}&nbsp; {topics_list_box.row.NEWEST_POST_IMG} {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp; {topics_list_box.row.TOPIC_TYPE}
                    <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>&nbsp; {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}&nbsp; {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
                    <!-- BEGIN switch_description -->
                    <br /> &nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                    <!-- END switch_description -->
                </td>
                <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                    <div class="star activity" stac="{topics_list_box.row.VIEWS}"></div>
                </td>
                <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                    <!-- BEGIN avatar -->
                    <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <!-- END avatar -->

                    {topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
                </td>
                <!-- BEGIN multi_selection -->
                <td>
                    <input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
                </td>
                <!-- END multi_selection -->
            </tr>
            <!-- END topic -->
            <!-- BEGIN no_topics -->
            <tr>
                <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
            </tr>
            <!-- END no_topics -->

            <!-- BEGIN bottom -->
        </tbody>
    </table>
</div>
<div class="main-foot clearfix">
    <!-- BEGIN multi_selection -->
    <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
    <!-- END multi_selection -->
    <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
    <p class="options">
        <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
    </p>
</div>
<!-- END bottom -->
<!-- BEGIN spacer -->
<br />
<!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

@UP

Saudações,

Mas exite aqui um tópico do senhor já resolvido:
https://ajuda.forumeiros.com/t101478-

Ele não ajuda em nada?
Até mais.
Sennior

sim, esqueci dele , foi mal,pode fechar o topico.