[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
[Tutorial] Categoria Retrátil
Partes do código: Daemon
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] 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 > [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
