A versão Invision possui um tipo de categoria inovadora, que permite que
você contraia e descontraia quando desejar, o que torna a página mais
limpa e de fácil visualização. Este recurso agora passa a não ser mais
exclusivo desta versão, podendo ser utilizado em todas.
1º - Entender o funcionamento e o código que será usado:
Primeiramente
devemos compreender como funcionará! Quando você clicar no nome da
categoria, a mesma irá se contrair, ao carregar novamente, esta será
exibida. Caso não funcione quando colocar, isso acontece pois para que
funciona perfeitamente, terá de aceitar cookies em seu navegador.
Vamos ver o código que teremos de usar, este não precisa ser modificado:
2º - Adicionar o código:
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:
Painel de controle >> Visualização >> Imagens e cores >> Cores >> Folha de estilos CSS
1º - Compreender como funciona a edição de templates:
2º - Fazer as modificações nos templates:
Template index_box
Encontrar:
E substituir por:
Encontrar:
Substituir por:
1º - Compreender como funciona a edição de templates:
2º - Fazer as modificações nos templates:
Template index_box
Encontrar:
E substituir por:
você contraia e descontraia quando desejar, o que torna a página mais
limpa e de fácil visualização. Este recurso agora passa a não ser mais
exclusivo desta versão, podendo ser utilizado em todas.
--> Tutoriais e astúcias <--
Criar uma categoria retrátil
Criar uma categoria retrátil
![]() | Versão PhpBB 3 |
1º - Entender o funcionamento e o código que será usado:
Primeiramente
devemos compreender como funcionará! Quando você clicar no nome da
categoria, a mesma irá se contrair, ao carregar novamente, esta será
exibida. Caso não funcione quando colocar, isso acontece pois para que
funciona perfeitamente, terá de aceitar cookies em seu navegador.
Vamos ver o código que teremos de usar, este não precisa ser modificado:
- Código:
[list=1]
[*]<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 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')}}}}});</script>
[/list]
2º - Adicionar o código:
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:
[list=1]
[*].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)}
[/list]
Painel de controle >> Visualização >> Imagens e cores >> Cores >> Folha de estilos CSS
![]() | Versão PhpBB 2 |
1º - Compreender como funciona a edição de templates:
![]() | Para que possamos prosseguir om o tutorial, é 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 |
2º - Fazer as modificações nos templates:
Template index_box
Encontrar:
- Código:
[list=1]
[*]<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
[*] <tr>
[/list]
E substituir por:
- Código:
[list=1]
[*]<script type="text/javascript">var num= 0;</script>
[*]<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
[*] <tr id="currenttr" onClick="i= 0; e=this.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR') e[i].style.display=(e[i].style.display=='none')?'':'none'; retour=(my_getcookie(this.id)=='true')?'false':'true'; my_setcookie(this.id,retour, 1, 0);" style="cursor:pointer;">
[/list]
Encontrar:
- Código:
[list=1]
[*]<!-- BEGIN tablefoot -->
[*]</table>
[/list]
Substituir por:
- Código:
[list=1]
[*]<!-- BEGIN tablefoot -->
[*]</table><script type="text/javascript"> document.getElementById('currenttr').id='trfrm'+num; if(my_getcookie('trfrm'+num)=='true') { i= 0; e=document.getElementById('trfrm'+num).parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display='none'; } num++;</script>
[/list]
![]() | Versão PunBB |
1º - Compreender como funciona a edição de templates:
![]() | Para que possamos prosseguir com o tutorial, é 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 |
2º - Fazer as modificações nos templates:
Template index_box
Encontrar:
- Código:
[list=1]
[*]<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">
[/list]
E substituir por:
- Código:
[list=1]
[*]<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>
[/list]
©
Fórum dos Fóruns & Supero
Fórum dos Fóruns & Supero