Colocar este efeito na aba das categorias

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
https://i.servimg.com/u/f44/17/14/15/45/collap10.png
https://i.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:
https://i.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

Olá!

Aceda à:
Painel Módulos HTML e JAVASCRIPT Gestão das páginas HTML 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 Geral 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?

Não resultou

Olá!

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

Até mais!

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:
https://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 seja educado!

Até mais!

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}



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

seender, não funcionou =/

Olá!

Você publicou o template?

Até mais!

Sim, mesmo asism nao resultou.

Olá!

Esses Icones e para Minimizar as Categoria ne ???

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:
https://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://2img.net/i/fa/m/tabs_more1.gif);cursor:pointer;height:9px;position:absolute;right:10px;top:6px;width:9px}
    .contract{background:url(http://2img.net/i/fa/m/tabs_less1.gif)}

Até mais.

@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.

Olá!

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

Podem dar com resolvido no tópico.