Ocultar widgets instantaneamente sem script!

Saudações, PunBBeiros!

Vejo que muitos pedem uma forma de ocultar widgets, seja dos tópicos, índice, subfóruns, etc. Creio que a primeira alternativa de vocês é o javascript. É funcional, com certeza, porém acredito que vocês já devem ter notado que há um delay para que essa função seja executada e é perceptível principalmente para os que têm internet mais lenta.

Hoje venho mostrar a vocês uma forma praticamente instantânea para ocultar os widgets, usando CSS nos templates!

Mas, por que o CSS é mais rápido que um javascript?
Por diversos fatores. Os navegadores carregam o primeiramente o CSS por ser muito mais leve, pois se trata de texto; e o javascript precisa executar a função. Além do mais, quanto mais scripts você tiver em seu fórum, mais lento ele será.

Outro fator interessante, é que a maioria dos navegadores vêm com a função padrão de armazenamento em cache, ou seja, eles armazenam a informação dos sites, como: imagens, layout e CSS. Percebem agora?

Façam o teste vocês mesmos, vejam a diferença ao usar o CSS ao invés do javascript.

Agora vamos ao tutorial!

O código é simples e pequeno.

Para ocultar os widgets da direita, adicione (mais à frente veremos onde poderão ser aplicados):

Código:

<style>
#right {
display: none !important;
width: 0px !important;
}
#content {
margin-right: 0px !important;
}
</style>


Para ocultar os widgets da esquerda:

Código:

<style>
#left {
display: none !important;
width: 0px !important;
}
#content {
margin-left: 0px !important;
}
</style>


Caso o seu fórum tenha widgets nos dois lados, o código será esse:

Código:

<style>
#right, #left {
display: none !important;
width: 0px !important;
}
#content {
margin-right: 0px !important;
margin-left: 0px !important;
}
</style>


Agora veremos onde eles poderão ser aplicados.

• Para ocultar nos tópicos: adicionar o código no template viewtopic_body
  
• Para ocultar no índice: adicionar o código no template index_body
  
• Para ocultar nos subfóruns: adicionar o código no template index_box
  

O código deve ser adicionado no início do template!

Espero que tenham gostado! Até o próximo tutorial!

Ah, se gostou, dá um like!

Lembrando que todos os tutorias que posto aqui são inéditos! Recuse imitações! rs

Excelente, apesar de que eu ainda não testei, mas faz todo sentido sim e como eu já afirmei antes: Quanto menos JavaScript, melhor!!!

Obrigado,

JS

Vamos que vamos! Aos poucos (ou até onde você permitir kkkk) vou enchendo aqui de tutoriais.

Uma pequena adição ao tópico...

Melhores lugares para ocultar os widgets:


JS

Isso mesmo! Percebo que você aplicou o CSS. O efeito aqui foi imediato!

Mais um detalhe: Se fores colocar um <style> fora da tag <header>, tem que adicionar o comentário do HTML que é o par
<!-- e --> pois evita erros e o interpretador HTML ignora o CSS, isso é importante!

Exemplo:

Código:


<style>
<!--
/**
* Fast hide widgets without JavaScript!
* Made by: Legolas at www.jscript.forumeiros.com
* Link: http://jscript.forumeiros.com/t199-ocultar-widgets-instantaneamente-sem-script
*/
#right {
    display: none !important;
    width: 0px !important;
}
#content {
    margin-right: 0px !important;
}
-->
</style>


JS

É verdade, bem lembrado!!!

Uma forma de se fazer isso deixando os widgets visíveis somente no início do fórum é indo em visualização > página inicial > geral:

Código:

<style>
#right, #left {
    display: block;
}
#content {
    margin-right: 280px !important;
}
</style>

E depois ir na folha de css e adicionar:

Código:

#right, #left {
    display: none;
}
#content {
    margin-right: 0px !important;
}

!

very nice

Muito bom, estava a procura deste efeito.