Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Gaaratsu
 
Thiago
 
Koizumi Bia
 

Quem está conectado
199 usuários online :: 7 usuários cadastrados, Nenhum Invisível e 192 Visitantes :: 2 Motores de busca

Deimon_Phoenix, Gaaratsu, juleic1123, Lost154, MateusAnjosV, odelgado, Thiago

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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

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

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

Mensagem por Rafusqui_ em 29/09/15, 10:28 pm

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

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

Ver perfil do usuário https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

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

Mensagem por Rafusqui_ em 30/09/15, 10:14 pm

@UP
avatar

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

Ver perfil do usuário https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

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

Mensagem por Sennior em 01/10/15, 05:30 pm

Saudações,

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

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

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

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

Mensagem por Rafusqui_ em 01/10/15, 05:35 pm

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

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

Ver perfil do usuário https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

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

Mensagem por Sennior em 01/10/15, 05:35 pm

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

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum