[Tutorial] Categoria Retrátil (IPBoard 3.43)

**T-Lord**

Administrador

Mensagens : 9792
<b>Moedas</b>

Moedas : 234353
Reputação : 278

Categoria Retrátil

Tutorial para ter o mesmo efeito das categorias IPBoard 3.43

Créditos: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Partes do código: Daemon
Nota: Só testei na versão PunBB!
Se alguém mais achar que deve ter o nome nos créditos, fique à vontade!
Se usar e desejar dar créditos, não o faça a mim e sim à invisionpower!

--> Tutoriais, dicas e astúcias <--
Categoria Retrátil

1º - Adicionando o Código CSS
Aceda em:

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

Copie e cole código abaixo dentro de sua folha de estilo:

Código:: /* #region ----- Expand/Contrai Categorias ----- */ .main .main-head.collapsed { border-radius: 4px 4px 4px 4px; opacity: 0.2; } .main-head.collapsed:hover { opacity: 0.4; } .main-head .toggle { background: url("http://www.ipbforumskins.com/skindemo/public/style_images/master/cat_minimize.png") no-repeat scroll 0 0 transparent; display: block; height: 25px; outline: 0 none; text-indent: -3000em; visibility: hidden; width: 25px; } .main-head:hover .toggle { visibility: visible; } .main-head.collapsed .toggle { background-image: url("http://www.ipbforumskins.com/skindemo/public/style_images/master/cat_maximize.png"); } /* #endregion ----- Expand/Contrai Categorias ----- */

2º - Adicionando o Código JavaScript
Aceda em:

Painel de Controle
Módulos HTML & JAVASCRIPT Gestão dos códigos JavaScript

Título category_block block_wrap
Investimento No índice e Nos sub-fóruns

Copie e cole código abaixo no campo Código JavaScript * :

Código:: /* #region ----- Expand/Contrai Categorias ----- */ jQuery(document).ready(function(){ var Count_Toggle=0; jQuery('#main .main .main-head').each(function(){ jQuery(this).attr('id','category_' + Count_Toggle); jQuery(this).next().attr('id','category_' + Count_Toggle); jQuery(this).next().css('display',my_getcookie('cat-'+jQuery(this).next().attr('id'))); jQuery(this).prepend('[url=http://bestskins.forumeiros.com/#'+ Count_Toggle +']Maximizar/minimizar[/url]'); var Style=jQuery(this).next(); if(Style.css('display')=='none'){ jQuery(this).addClass('collapsed'); }else{ jQuery(this).removeClass('collapsed'); } jQuery(this).find('.toggle.right').click(function(){ var Style=jQuery(this).closest('.main-head').next(); if(Style.css('display')=='none'){ Style.slideToggle(); my_setcookie('cat-'+jQuery(this).closest('.main-head').next().attr('id'),'block',1,0); jQuery(this).parent().removeClass('collapsed'); }else{ Style.slideToggle(); my_setcookie('cat-'+jQuery(this).closest('.main-head').next().attr('id'),'none',1,0); jQuery(this).parent().addClass('collapsed'); } }); Count_Toggle++ }) }); /* #endregion ----- Expand/Contrai Categorias ----- */

3º - Resultado

[Tutorial] Categoria Retrátil (IPBoard 3.43) Catret10

1 [Tutorial] Categoria Retrátil (IPBoard 3.43) Sex 19 Abr 2013 - 18:16