Colocar este efeito na aba das categorias

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

Resolvido Colocar este efeito na aba das categorias

Mensagem por owner em 03/01/12, 10:42 am

Qual é minha questão:
Gostaria de colocar este efeito da imagem abaixo em meu fórum, para facilitar a visualização dele.

Caso precise de do link das imagens ai esta
http://i44.servimg.com/u/f44/17/14/15/45/collap10.png
http://i44.servimg.com/u/f44/17/14/15/45/collap11.png

Queria que ficasse exatamente igual a imagem abaixo.

Medidas que eu tomei para corrigir o problema:
Nenhuma

Imagens do meu problema:
http://i44.servimg.com/u/f44/17/14/15/45/imagem11.jpg

Endereço do meu fórum:
http://skcheats.forumais.com

Versão do meu fórum:
PUNBB
avatar

owner
Nível 9

Inscrito dia : 01/01/2012
Mensagens : 164
Pontos Ativos : 256

Ver perfil do usuário

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por MateusV. em 03/01/12, 11:00 am

Olá!

Aceda à:
Painel Seta Módulos Seta HTML e JAVASCRIPT Seta Gestão das páginas HTML :seta2: Crie uma nova página HTML e em seu conteúdo adicione este código:
Código:
    function EsconderCategoriaFeitoPorSupero(cid,iflag){var cat=document.getElementById(cid);var button=document.getElementById('b'+cid);if(cat.style.display=='none'){cat.style.display='block';button.className='contract';my_setcookie('_'+cid,'',true)}else{cat.style.display='none';button.className='expand';my_setcookie('_'+cid,'1',true)}}$(function(){x=$('ul.topiclist li.header').get();for(i=0;i<x.length;i++){x[i].style.position='relative';var cid='c'+String(i+1);x[i].parentNode.nextSibling.setAttribute('id',cid);x[i].parentNode.nextSibling.style.display='block';var y='<div id="b'+cid+'" class="contract" onclick="EsconderCategoriaFeitoPorSupero(''+cid+'');"></div>';x[i].innerHTML=x[i].innerHTML+y}cookies=document·cookie.split('; ');for(i in cookies){if(cookies[i].charAt(0)=='_'){cookie=cookies[i].split('=');if(cookie[1]=='1'){cid=cookie[0].substring(1);if(document.getElementById(cid)){EsconderCategoriaFeitoPorSupero(cid,'x')}}}}});

Salve a página e em seguida aceda à:
Painel Seta Geral Seta Fórum
Lá terá o campo "Descrição do fórum", neste campo utilize este código abaixo:
<script src=Endereço-da-página-html></script>

Modifique o local de vermelho pelo link da página que criou contendo o código que lhe foi indicado.

Resolve?
Pesquisando/Em dúvid
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por owner em 03/01/12, 11:11 am

Não resultou Chorando ou muito tr
avatar

owner
Nível 9

Inscrito dia : 01/01/2012
Mensagens : 164
Pontos Ativos : 256

Ver perfil do usuário

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por Dury em 03/01/12, 11:55 am

Olá!

Leia o conteúdo deste tópico: http://ajuda.forumeiros.com/t47513-#316283

Até mais!
Piscada
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por Thor em 03/01/12, 11:55 am

Olá,

Painel de controle ->> Módulos ->> HTML e Javascripts ->> Gestão dos códigos Javascripts ->>
Crie um novo Javascript, e em "investimento" marque a opção "Todas as páginas". Colque o código abaixo no campo código javascript:

Código:
function EsconderCategoriaFeitoPorSupero(cid,iflag){var cat=document.getElementById(cid);var button=document.getElementById('b'+cid);if(cat.style.display=='none'){cat.style.display='block';button.className='contract';my_setcookie('_'+cid,'',true)}else{cat.style.display='none';button.className='expand';my_setcookie('_'+cid,'1',true)}}$(function(){x=$('ul.topiclist li.header').get();for(i=0;i<x.length;i++){x[i].style.position='relative';var cid='c'+String(i+1);x[i].parentNode.nextSibling.setAttribute('id',cid);x[i].parentNode.nextSibling.style.display='block';var y='<div id="b'+cid+'" class="contract" onclick="EsconderCategoriaFeitoPorSupero(\''+cid+'\');"></div>';x[i].innerHTML=x[i].innerHTML+y}cookies=document·cookie.split('; ');for(i in cookies){if(cookies[i].charAt(0)=='_'){cookie=cookies[i].split('=');if(cookie[1]=='1'){cid=cookie[0].substring(1);if(document.getElementById(cid)){EsconderCategoriaFeitoPorSupero(cid,'x')}}}}});

Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>
Coloque o seguinte CSS na folha de estilo:

Código:
.contract,.expand{background:url(http://i44.servimg.com/u/f44/17/14/15/45/collap10.png);cursor:pointer;height:9px;position:absolute;right:10px;top:6px;width:9px}.contract{background:url(http://i44.servimg.com/u/f44/17/14/15/45/collap11.png)}

Obs.: Caso o código .js não funcione, pegue-o diretamente desta página:
Seta http://ajuda.forumeiros.com/12944.js

" Habilitar o gerenciamento dos códigos JavaScript :
(X) Sim () Não

Painel de Controle ->> Módulos ->> Aba " HTML & JAVASCRIPT ->> Gestão dos Códigos JavaScript

Resulto(a)?Não esqueça de agradecer com um Obrigado seja educado!

Até mais!
avatar

Thor
Usuário destaque

Masculino
Inscrito dia : 16/11/2011
Mensagens : 627
Pontos Ativos : 932

Ver perfil do usuário http://www.techarte.co.cc/forum

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por owner em 03/01/12, 12:12 pm

Segui todos os passos desse e do outro fórum.

Mas não resultou.

Talvez seja meu CSS, olhem ae :

Código:
body {
    background-color: #CCCCCC;
    color: #5A5A5A;
    font-family: tahoma,helvetica,arial,sans-serif;
    font-size: 13px;
    padding-bottom: 15px;
    margin-top: 15px;
}

.pun {
    background-color: #fff;
    width: 980px;
    -moz-border-radius: 5px;
}

#pun_out {
    background:url("http://i43.servimg.com/u/f43/14/53/79/27/matti10.png") repeat;background:rgba(0,0,0,0.18);
    border:1px solid #0b2337;
    border:1px solid rgba(0,0,0,0.35);
    -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    padding:8px;
    position:relative;
    width: 990px;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#pun-intro {
    background-color: #FFFFFF;
    background-image: url("http://i43.servimg.com/u/f43/14/53/79/27/backgr10.png");
    background-repeat: repeat-x;
    padding: 1.5em 1em 1em 1em;
    border-bottom: 0px solid #29a52c;
    text-align: left;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.75) inset;
    margin-bottom: 10px;
    border: 1px solid #294927;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 85px;
}

.main .main-head {
    background-color: #1C6916;
    background-image: url("http://i43.servimg.com/u/f43/14/53/79/27/bg-top10.png");
    background-position: 50% 50%;
    background-repeat: repeat-x;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(255, 255, 255, 0.2) inset;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold !important;
    margin-top: 15px;
    padding-bottom: 13px;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 13px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
}

.pun .main-content {
    background-color: #FBFBFB;
    border: 1px solid #b9cdba;
}

.pun table.table td {
    background: #edfde6 url(http://i43.servimg.com/u/f43/14/53/79/27/altbg10.gif) repeat-x top left;
    border-top: 1px solid #b9cdba;
    border-right: 0px solid #000;
    border-left: 0px solid #000;
    line-height: 130%;
    padding-bottom: 0.7em;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.6em;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
    background: #edfde6 url(http://i43.servimg.com/u/f43/14/53/79/27/altbg10.gif) repeat-x top left;
    border-top: 1px solid #b9cdba;
}

.pun table.table th {
    background: #d9d9d9 url(http://i43.servimg.com/u/f43/14/53/79/27/gradie10.png) repeat-x 0 50%;
    color: #333333;
    padding-bottom: 0.5em;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.5em;
}

#pun-logo {
    margin-left: -13px;
    margin-top: -22px;
}

#pun-logo:hover { opacity: 0.8; }

.for_topics {
    width: 74px;
    height: 33px;
    background: url("http://i49.servimg.com/u/f49/14/89/34/10/fp10fu10.png") no-repeat left top;
    text-align: center;
    font-size: 12px;
    font-weight: bold;   
    line-height: normal;
    color: #3e3b0e;
    padding-top: 3px;
    margin-left: 13px;
}

.for_topics span {
    display: block;
    color: #898510;
    font-size: 10px;
}

.for_posts {
    width: 74px;
    height: 33px;
    background: url("http://i49.servimg.com/u/f49/14/89/34/10/fp10fu10.png") no-repeat left top;
    text-align: center;
    font-size: 12px;
    font-weight: bold;   
    line-height: normal;
    color: #3c3e0e;
    padding-top: 3px;
    margin-left: 13px;
}

.for_posts span {
    display: block;
    color: #898510;
    font-size: 10px;
}

.page-title h2, .page-title span {
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: bold;
}

.pun .paged-head, .pun .paged-foot {
    border: 0px solid !important;
    background-color: !important;
    padding: 0.6em 1.3em 0.3em 1.3em;

}

.pun .frm-form {
   background: !important;
   border: none;

}

#pun-head #pun-navlinks {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    background-color: #305432;
    background-image: url("http://i49.servimg.com/u/f49/14/89/34/10/pun-na10.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    border: 1px solid #21311e;
    height: 28px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#pun-navlinks ul {
    text-align: center;
}
#pun-navlinks li {
    display: inline;
    font-size: 15px;
    line-height: 30px;
}
#pun-navlinks li a {
    margin-left: -8px;
    margin-right: -8px;
    color: #fff;
    font-family: tahoma,helvetica,arial,sans-serif
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
    padding-top: 12px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 10px;
}
#pun-navlinks a, #pun-navlinks a:visited {
    text-decoration: none;
}
#pun-navlinks a:active, #pun-navlinks a:focus, #pun-navlinks a:hover {
    text-decoration: none;
    color: #fff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
    padding-top: 12px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.2);
}

.main .main-foot{
    background-color: #fff;
    color: #666;
    font-weight: 400;
    padding-bottom: 0.7em;
    padding-left: 1.3em;
    padding-right: 1.3em;
    padding-top: 0.7em;
}

.pun a:link { color: #106389;text-decoration: none;}
.pun a:visited { color: #106389;}
.pun a:hover { color: #2696bb; text-decoration: none;}
.pun a:active { color: #990000;}

#pun-title {
    display: none;
}

.pun .post {
    border: 1px solid #cbeacb;
    margin: 10px;
    background: #FDFEFF;
}

.postfoot {
    border-top: 1px solid #cbeacb;
    clear: both;
    margin-left: -17em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    text-align: right;
    background: #F4FAFF;
}

.pun .postmain {
    background-color: #FDFEFF;
    border-left: 1px solid #cceacb;
    margin-left: 17em;
}
.pun .posthead {
    background-color: #F4FAFF;
    border-bottom: 1px solid #cceacb;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1.3em;
    padding-top: 0.5em;
}

.entry-content {
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-size: 13px;
}

.user-contact a {
    background-color: #325a2e;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #FFFFFF;
    display: inline-block;
    padding: 3px;
    box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
    -webkit-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
    -moz-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
    -khtml-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
}

.codebox {
    background-color: #E4EAF2;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 1em;
    border: 1px solid #83b284;
    border-left: 4px solid #83b284;
}
.codebox dt {
    border-bottom: 1px solid #86b283;
    padding-bottom: 0.25em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-top: 0.25em;
    font-weight: bold;
    color: #89b283;
}
.codebox dd {
    background-color: #fff;
    color: #497a43;
    margin-bottom: 1px;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 1px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
}

.postmain blockquote {
    background-color: #FFFFFF;
    border: 1px solid #57974e;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    border-radius: 3px; -webkit-border-radius:  3px; -moz-border-radius:  3px; -khtml-border-radius:  3px;
}

#pun-about {
    background-color: #F4F4F4;
    border: 1px solid #DDDDDD;
    line-height: 150%;
    padding-bottom: 0.6em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.6em;
    text-align: right;

}
#pun-about ul {
    list-style-type: none;
}
#pun-about ul li {
    display: inline;
}
#pun-about ul li a {
    font-weight: normal;
    text-decoration: none;
}
#pun-about #qjump {
    display: none;
}

#pun-visit, .main-box {
    background-color: #F4F4F4;
    border: 1px solid #bacdb9;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0.6em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.6em;

}
a[href="/u1"] {
text-shadow: 0px 0px 5px #CC0000;
}
a[href="/u563"] {
background-image: url(http://i46.servimg.com/u/f46/16/56/73/62/21ee1p10.gif);
background-repeat: no-repeat;
background-position: center;
}

.module .main-content {
    padding-bottom: 1em;
    padding-left: 3px;
    padding-right: 1em;
    padding-top: 1em;
}

#pun-visit {display: none !important;}

#text_editor_controls #text_edit a[href="javascript:bbstyle(-1)"]{display:none}

#main-content table.table tbody.statused tr{background:#EDFDE6 url(http://i43.servimg.com/u/f43/14/53/79/27/altbg10.gif) repeat-x top left;border-top:1px solid #B9CDBA}#main-content table.table tbody.statused tr td.tc2::after{content:'tópicos';display:block}#main-content table.table tbody.statused tr td.tc3::after{content:'mensagens';display:block}#main-content table.table tbody.statused tr td.tc2::after,#main-content table.table tbody.statused tr td.tc3::after{color:#898510;display:block;empty-cells:show;font-family:tahoma,helvetica,arial,sans-serif;font-size:10px;font-weight:bold}#main-content table.table tbody.statused tr td.tc2,#main-content table.table tbody.statused tr td.tc3{background-attachment:scroll;background-clip:border-box;background-color:transparent;background-image:url(http://dl.dropbox.com/u/54612298/Bleach/botao.png);background-origin:padding-box;background-repeat:no-repeat;background-position:center center;font-weight:bold}

.pun .user .user-info {
text-align: center;
}

.postbody .user{text-align:center}

avatar

owner
Nível 9

Inscrito dia : 01/01/2012
Mensagens : 164
Pontos Ativos : 256

Ver perfil do usuário

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por seender em 04/01/12, 03:42 am

Olá!

Aceda à:
Painel...-> Visualização -> Templates / Geral e lá terá:

  • Clique para editar o template index_box
    Encontrar:
    Código:
    <div class="main">
    <!-- BEGIN catrow -->
      <!-- BEGIN tablehead -->
          <div class="main-head">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
          </div>
          <div class="main-content">

    Substituir por:
    Código:
    <div class="main"><script type="text/javascript">var num= 0; var curc;</script>
    <!-- BEGIN catrow -->
      <!-- BEGIN tablehead -->
          <div class="main-head" onClick=" if(this.nextSibling.style.display=='none') {my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';} else {my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }"  style="cursor:pointer;">
            <div class="page-title" id="cret">{catrow.tablehead.L_FORUM}</div><script type="text/javascript">curc= document.getElementById('cret'); curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
          </div>
          <div class="main-content">
            <script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>


É preciso que tenha noção sobre a edição dos templates, que serão necessárias para a continuação deste tutorial. Para isso, veja:
Modificar os templates do fórum

Melhores cumprimentos,
seender
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por owner em 04/01/12, 02:03 pm

seender, não funcionou =/
avatar

owner
Nível 9

Inscrito dia : 01/01/2012
Mensagens : 164
Pontos Ativos : 256

Ver perfil do usuário

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por seender em 04/01/12, 02:56 pm

Olá!

Você publicou o template?

Até mais!
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por owner em 04/01/12, 06:05 pm

Sim, mesmo asism nao resultou.
avatar

owner
Nível 9

Inscrito dia : 01/01/2012
Mensagens : 164
Pontos Ativos : 256

Ver perfil do usuário

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por KenShin em 04/01/12, 06:29 pm

Olá!

Esses Icones e para Minimizar as Categoria ne ???
avatar

KenShin
Usuário avançado

Masculino
Inscrito dia : 01/11/2011
Mensagens : 309
Pontos Ativos : 492

Ver perfil do usuário http://gccaos.forumais.com/

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por Dury em 04/01/12, 08:12 pm

Olá,

Aceda em:
Painel de Controle -> Módulos -> HTML & JAVASCRIPT -> Gestão das páginas Javascript
Marque o investimento em todas as páginas.
E no código, coloque o seguinte código que se encontra no link abaixo. Deves pegá-lo lá na fonte:
Admineiros http://ajuda.forumeiros.com/12595.js

Depois aceda em:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores / Folha de estilo CSS

E adicione o seguinte código CSS:
Código:
    .contract,.expand{background:url(http://illiweb.com/fa/m/tabs_more1.gif);cursor:pointer;height:9px;position:absolute;right:10px;top:6px;width:9px}
    .contract{background:url(http://illiweb.com/fa/m/tabs_less1.gif)}

Até mais.
Piscada
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por owner em 04/01/12, 09:12 pm

@EvilCheats

Sim, botão Expandir e Minimizar as categorias.

@Jeffrey

Foi oque o nosso amigo Mr.King passou nas mensagens anteriores, mas não resolveu.
avatar

owner
Nível 9

Inscrito dia : 01/01/2012
Mensagens : 164
Pontos Ativos : 256

Ver perfil do usuário

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por KenShin em 05/01/12, 12:37 am

Olá!

Essas coisas sempre vem na propria Skin tente contata o criado da Skin
avatar

KenShin
Usuário avançado

Masculino
Inscrito dia : 01/11/2011
Mensagens : 309
Pontos Ativos : 492

Ver perfil do usuário http://gccaos.forumais.com/

Resolvido Re: Colocar este efeito na aba das categorias

Mensagem por owner em 06/01/12, 07:43 am

Podem dar com resolvido no tópico.

avatar

owner
Nível 9

Inscrito dia : 01/01/2012
Mensagens : 164
Pontos Ativos : 256

Ver perfil do usuário

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

- Tópicos similares

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