É algo tão simples que este tutorial ficará aberto a todos!
1º - Adicionando JavaScript
Adicione na gestão de JavaScript com investimento no índice o código abaixo:
- Código:
$(function() {
if (document.getElementById('logout') == null) {
var sCategory = '4';
$('.main-content:eq(' + sCategory + ')').addClass('protect');
var sCSS = '<style>' +
'.protect:after {' +
'background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);' +
'bottom: 0px;' +
'content: "Somente membros";' +
'font-size: 30px;' +
'left: 0px;' +
'line-height: 240px;' +
'position: absolute;' +
'right: 0px;' +
'text-align: center;' +
'top: 0px;' +
'z-index: 10;' +
'}' +
'.protect {' +
'position: relative;' +
'}' +
'</style>';
document.head.insertAdjacentHTML('beforeEnd', sCSS);
}
});
Perceba que cada categoria é formada por um header (título) e o content (conteúdo) que no caso do código que passei acima a variável var sCategory está com o valor = '4'; que corresponde à categoria de tutoriais!!!
Se desejar outra categoria, basta contar qual é a posição (número) correspondente e colocar na variável acima mencionada.
Resultado:
Aqui no fórum nós não usamos JavaScript pois já foi definido um ID para a categoria que eu determinei, neste caso é apenas por CSS, veja:
- Código:
<!-- BEGIN switch_user_logged_out -->
<style type="text/css">
<!--
#category_3.main-content:after {
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);
bottom: 0px;
content: "Somente membros";
font-size: 30px;
left: 0px;
line-height: 310px;
position: absolute;
right: 0px;
text-align: center;
top: 0px;
z-index: 10;
}
#category_3.main-content {
position: relative;
}
-->
</style>
<!-- END switch_user_logged_out -->
Simples assim!
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Efeito: Categoria Protegida!