Ronildo Costa // Joomla

Escrito por Ronildo Costa | Qui, 02 de Outubro de 2008 05:35

1 - Para que serve?

Pesquiusei para ver quais as definições sobre o assunto, não encontrei nada muito esclarecedor no docs.joomla.org

Ta bom, darei então minha opinião (humilde).
O "page class suffix" serve para você adicionar ou personalizar o class dos elementos de cada página, ou módulo ou menu ou seja, onde dá pra você colocar ele.

2 - Quando usar?

Deve-se usar quando necessitar um css específico para o local ou página que quer.

Dando um exemplo prática de como isso funciona. O local mais indicado para o nosso exemplo são os módulos, por que? Por que mudando apenas o suffix, podemos trocar todo o estilo do módulo, isso é o que todas as empresas que desenvolvem templates pagos para Joomla fazem.

Normalmente essa é uma saída de módulo, ou seja, o código gerado.
<div class="moduletable">
<h3>Título</h3>
conteúdo
</div>


Se adicionarmos um suffix -azul, o resultado final será.
<div class="moduletable-azul">
<h3>Título</h3>
conteúdo
</div>

Então já temos um classo diferente no div principal.

Uma outra forma legal e que muita gente desconhece funciona da seguinte forma. No exemplo citado acima, você terá que escrever um estilo para cada suffix que você fizer. Mas se você quer apenas mudar alguns detalhes, como um ícone, existe um jeito mais simples de se fazer as coisas.
Adicionando um suffix " azul", o resultado do html será este:

<div class="moduletable azul">
<h3>Título</h3>
conteúdo
</div>
E o que isso significa?
Que no css você pode declarar esse div de duas formas.
div.moduletable
div.azul
Ou seja, nesse caso o div passa a ter dois class. E onde que a gente ganha nisso?
Economizamos muitas linhas de css, vejam:
Fazemos a declaração principal:
div.moduletable{
width:00px;
height:00px;
}

agora por exemplo podemos fazer isso:
div.azul{
background:url('/blog/icone-azul.png') no-repeat 0 0;
}
div.verde{
background:url('/blog/icone-verde.png') no-repeat 0 0;
}

Percebem que tudo de comum para todos os divs, eu já fiz no div.moduletable, já o .azul e .verde tem mas suas particularidades.

É isso, espero ter ajudado a elucidar a questão do class suffix, isso que eu mostrei é só um exemplo, da pra fazer bem mais coisas, basta usar a criatividade.