Categoria retrátil

Qual é minha questão:
Eu queria uma ajuda para deixar meu fórum com as categorias igual á desse forum
http://styleofliferp.forumeiros.com/forum

Com aquele sistema de minimizar e como deixar aquela foto ali que tem tipo umas manchas,onde fica o icone de minimizar.

Endereço do meu fórum:
Não é necessário.

Versão do fórum:
PHPBB3

Dener, o botão minimizar nas categorias é uma exclusividade dos fóruns Invision. Vejo que você usa a PhpBB2, logo precisaria mudar a versão do seu fórum. Uma outra opção seria seguir este tutorial, que pode ser aplicado em todas as versões:

[TUTORIAL] Criar uma categoria retrátil

Em relação a "foto", ele apenas trocou a imagem de fundo das categorias por uma criada por ele mesmo.

Ajuda?

Esses códigos não funcionam,eu coloco o do java e depois o da folha css mais não aparece nada na página inicial para minimizar.
a versão é phpbb3

Olá,

Caso não tenha resultado por favor retire os outros códigos JavaScript que você possui em seu fórum pode estar em conflito, mais caso não aconteça efeito por favor tente utilizar este código JavaScript abaixo

Código:

<script type="text/javascript">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 ul.topiclist li').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')}}}}});</script>

Até

Olá querido,

O senhor leu atentamente está parte:

O código deve ser adicionado a uma página Javascript, em "Painel de controle >> Módulos >> HTML E JAVASCRIPT >> Gestão dos códigos JavaScript

Tem de selecionar a opção "em todas as páginas". Após adicionar este código, terá de acrescentar o seguinte trecho de código CSS em sua folha de estilos 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)}

Leu? Se não, por favor leia novamente com calma e faça as devidas edições para que o efeito seja efetuado com sucesso.

Até mais.

Saudações!

Vá em 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')}}}}});

Depois 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://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)}

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

Até mais amigo

Conseguir,obg á todos