Mensagem da pagina inicial

[Connor R.]

Qual é minha questão:
Gostaria de saber o código desta pagina inicial, observem:



Fórum em que vi o efeito:

http://www.narutorpgakatsuki.com/forum

Endereço do meu fórum:
http://somosmugiwara.forumeiros.com

Versão do fórum:
PHPBB3

[BrunoH.]

Olá!
Aceda a:

Painel de Controle Visualização Página inicial Geral

Em "Conteúdo da mensagem" coloque o código abaixo:

Código:

<div id="tabsn">
<ul id="tabselect">
<li class="tab1 active">Novidades</li>
<li class="tab2">Tutorias</li>
</ul><div id="tabcont"><div id="tab1" style="display: block;"><ul><li><a href="/t36697-avisogalera-que-fico-sem-grupo" class="linkt">[Aviso]Galera que fico sem grupo</a> - <span class="autor">Postado por <strong><a href="/u4"><span style="color:#001554"><strong>Katsura</strong></span></a></strong> - <a href="/t36697-avisogalera-que-fico-sem-grupo#comments">Comentários</a>: 9 - Visto: 122</span></li><li><a href="/t36118-promocao-de-ag-s" class="linkt">Promoção de AG's</a> - <span class="autor">Postado por <strong><a href="/u11313"><span style="color:#1ACF10"><strong>'Asho</strong></span></a></strong> - <a href="/t36118-promocao-de-ag-s#comments">Comentários</a>: 1 - Visto: 158</span></li><li><a href="/t36116-reuna-as-bolas-de-natal" class="linkt">Reúna as Bolas de Natal</a> - <span class="autor">Postado por <strong><a href="/u11313"><span style="color:#1ACF10"><strong>'Asho</strong></span></a></strong> - <a href="/t36116-reuna-as-bolas-de-natal#comments">Comentários</a>: 1 - Visto: 139</span></li><li><a href="/t36698-nrpga-nova-era-20" class="linkt">NRPGA Nova Era 2.0</a> - <span class="autor">Postado por <strong><a href="/u1"><span style="color:#001554"><strong>Shion</strong></span></a></strong> - <a href="/t36698-nrpga-nova-era-20#comments">Comentários</a>: 38 - Visto: 386</span></li><li><a href="/t36750-anuncio-feliz-natal-e-boas-festas-naruto-rpg-akatsuki" class="linkt">[ANUNCIO] Feliz Natal e Boas Festas Naruto RPG Akatsuki</a> - <span class="autor">Postado por <strong><a href="/u1"><span style="color:#001554"><strong>Shion</strong></span></a></strong> - <a href="/t36750-anuncio-feliz-natal-e-boas-festas-naruto-rpg-akatsuki#comments">Comentários</a>: 12 - Visto: 132</span></li><li><a href="/t36164-recrutamento-helpers" class="linkt">[Recrutamento] Helpers</a> - <span class="autor">Postado por <strong><a href="/u1"><span style="color:#001554"><strong>Shion</strong></span></a></strong> - <a href="/t36164-recrutamento-helpers#comments">Comentários</a>: 5 - Visto: 246</span></li><li><a href="/t36109-loteria-nrpga" class="linkt">Loteria NRPGA</a> - <span class="autor">Postado por <strong><a href="/u11313"><span style="color:#1ACF10"><strong>'Asho</strong></span></a></strong> - <a href="/t36109-loteria-nrpga#comments">Comentários</a>: 0 - Visto: 131</span></li></ul></div><div id="tab2" style="display: none;"><ul><li><a href="/t36697-avisogalera-que-fico-sem-grupo" class="linkt">[Aviso]Galera que fico sem grupo</a> - <span class="autor">Postado por <strong><a href="/u4"><span style="color:#001554"><strong>Katsura</strong></span></a></strong> - <a href="/t36697-avisogalera-que-fico-sem-grupo#comments">Comentários</a>: 9 - Visto: 122</span></li><li><a href="/t36118-promocao-de-ag-s" class="linkt">Promoção de AG's</a> - <span class="autor">Postado por <strong><a href="/u11313"><span style="color:#1ACF10"><strong>'Asho</strong></span></a></strong> - <a href="/t36118-promocao-de-ag-s#comments">Comentários</a>: 1 - Visto: 158</span></li><li><a href="/t36116-reuna-as-bolas-de-natal" class="linkt">Reúna as Bolas de Natal</a> - <span class="autor">Postado por <strong><a href="/u11313"><span style="color:#1ACF10"><strong>'Asho</strong></span></a></strong> - <a href="/t36116-reuna-as-bolas-de-natal#comments">Comentários</a>: 1 - Visto: 139</span></li><li><a href="/t36698-nrpga-nova-era-20" class="linkt">NRPGA Nova Era 2.0</a> - <span class="autor">Postado por <strong><a href="/u1"><span style="color:#001554"><strong>Shion</strong></span></a></strong> - <a href="/t36698-nrpga-nova-era-20#comments">Comentários</a>: 38 - Visto: 386</span></li><li><a href="/t36750-anuncio-feliz-natal-e-boas-festas-naruto-rpg-akatsuki" class="linkt">[ANUNCIO] Feliz Natal e Boas Festas Naruto RPG Akatsuki</a> - <span class="autor">Postado por <strong><a href="/u1"><span style="color:#001554"><strong>Shion</strong></span></a></strong> - <a href="/t36750-anuncio-feliz-natal-e-boas-festas-naruto-rpg-akatsuki#comments">Comentários</a>: 12 - Visto: 132</span></li><li><a href="/t36164-recrutamento-helpers" class="linkt">[Recrutamento] Helpers</a> - <span class="autor">Postado por <strong><a href="/u1"><span style="color:#001554"><strong>Shion</strong></span></a></strong> - <a href="/t36164-recrutamento-helpers#comments">Comentários</a>: 5 - Visto: 246</span></li><li><a href="/t36109-loteria-nrpga" class="linkt">Loteria NRPGA</a> - <span class="autor">Postado por <strong><a href="/u11313"><span style="color:#1ACF10"><strong>'Asho</strong></span></a></strong> - <a href="/t36109-loteria-nrpga#comments">Comentários</a>: 0 - Visto: 131</span></li></ul></div>
</div>
</div>

e Salve!

Até mais.

[Connor R.]

Ficou com com todas as informações Bruno, mas as abas não funcionam, deve faltar algum código CSS.....

[BrunoH.]

Olá!
Opa, desculpe por ter esquecido.
Aceda a Folha de Estilo CSS:

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Código:

Código:

#tabselect li.active, #tabselect li.active:hover {
margin-left: 0px;
margin-top: 0px!important;
border-right: none;
box-shadow: none;
width: 90px!important;
}
#tabselect li:hover {
width: 75px;
cursor: pointer;
margin-left: 16px;
}
#tabselect li.active {
background: #FDFDFD;
border: 1px solid #DDD;
width: 100px;
}
#tabselect li {
list-style: none;
width: 60px;
padding: 5px;
border-radius: 3px 0 0 3px;
background: #DDD;
z-index: 99999!important;
margin-left: 31px;
margin-bottom: 3px;
}
#tabselect {
margin-top: -0px;
z-index: 9999!important;
position: absolute;
}
#tabcont {
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
padding: 10px;
width: 600px;
word-break: break-word;
margin-left: 100px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
border: 1px solid #DDD;
z-index: 1;
box-shadow: 3px 3px 6px #C9C9C9;
-moz-box-shadow: 3px 3px 6px #C9C9C9;
-webkit-box-shadow: 3px 3px 6px #C9C9C9;
-ms-box-shadow: 3px 3px 6px #C9C9C9;
border-radius: 0px 10px 10px 10px;
-moz-border-radius: 0px 10px 10px 10px;
-webkit-border-radius: 0px 10px 10px 10px;
-ms-border-radius: 0px 10px 10px 10px;
min-height: 100px;
}
#tabsn {
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
font-size: 13px;
}

e Valide!

Até mais.

[Connor R.]

Ainda não funciona Bruno, observe:

http://rpgantigo.forumeiros.com/

A aba de tutoriais não quer pegar...

[BrunoH.]

Olá!

Acabo de verificar e o código que eu te passei não foi colocado em seu fórum. Mantenha o código ativo para que eu possa encontrar o erro.

Até mais.

[Connor R.]

Já ativei Bruno.

Mas algum que tem algum código javascript, pois o são atualizadas automaticamente.....

Ou seja, toda vez que tem um tópico novo na área aparece no painel de noticias...

[Connor R.]

UP, já se passaram 24 horas..........

[HermeS.]

Olá,

Substitua o código do CSS, por este:

Código:

#tabcont ul li {
    list-style: none;
}
#tabcont {
    font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
    padding: 10px;
    width: 600px;
    word-break: break-word;
    margin-left: 100px;
    background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
border:1px solid #DDD;
z-index:1;
box-shadow: 3px 3px 6px #C9C9C9;
-moz-box-shadow: 3px 3px 6px #C9C9C9;
-webkit-box-shadow: 3px 3px 6px #C9C9C9;
-ms-box-shadow: 3px 3px 6px #C9C9C9;
border-radius: 0px 10px 10px 10px;
-moz-border-radius: 0px 10px 10px 10px;
-webkit-border-radius: 0px 10px 10px 10px;
-ms-border-radius: 0px 10px 10px 10px;
min-height:100px;
}
#tabsn {
    font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
    font-size: 13px;
}
#tabselect li {
    list-style: none;
    width: 60px;
    padding: 5px;
    border-radius: 3px 0 0 3px;
    background: #DDD;     
    z-index:99999!important;   
margin-left: 31px;
margin-bottom: 3px;   
}
#tabselect {
margin-top: -0px;
/* margin-left: -40px; */
z-index: 9999!important;
position: absolute;
}
#tabselect li.active {
    background:#FDFDFD;
    border:1px solid #DDD;
    width:100px;
    }
#tabselect li.active,#tabselect li.active:hover {
    margin-left: 0px;
    margin-top: 0px!important;
    border-right: none;
    box-shadow: none;
    width:90px!important;
}

#tabselect li:hover{
   
    width:75px;cursor:pointer;
    margin-left: 16px;
}
#tabcont ul li {
padding: 5px;
border-bottom: 1px solid #DDD;
}

Até mais.

[Connor R.]

Ainda não resultou amigo, pois a aba de tutorias não funciona...

[seender]

Olá!

É preciso a utilização de códigos jQuery ao qual não oferecemos suporte aqui no fórum dos fóruns, mas podes ver um tutorial que dará o efeito parecido: Exibição de conteúdo por abas.

Até mais!

[Connor R.]

Humrum, não era o que eu queria. mas mesmo assim thank you man...