Detalhes

Categoria: Joomla

Atualização: Segunda, 02 Julho 2012 19:33

Autor: vovó Vicki

Acessos: 28903

O que são folhas de estilo (arquivos CSS)?

A melhor maneira de mostrar para que serve uma folha de estilo (ou arquivos CSS) é mostrando a diferença entre uma página SEM uma folha de estilo e a mesma página COM um folha de estilo. A página que você está vendo no seu monitor tem uma folha de estilo que define a cor do fundo, a cor do texto, o aspecto dos links e mais uma porção de particularidades. Se aplicarmos o nosso "template pelado" a esta mesma página, o resultado é o seguinte:

A diferença é tão gritante que dispensa explicações. Já deu para perceber que um modelo sem seu template.css (e eventualmente outros arquivos CSS adicionais) é tão elegante quanto um paquiderme em crise depressiva.

Para poder alterar as propriedades de elementos de uma página é preciso identificá-los com uma id ou class. Uma das formas mais práticas (veremos adiante que também é uma das formas mais vantajosas) é criar divisórias que tenham estes atributos. Por exemplo, no nosso arquivo index.php podemos colocar o cabeçalho numa divisória que contém o nome do site:

Agora podemos criar o estilo desta div. Queremos que o fundo seja preto e que as letras sejam brancas. Para obter este resultado, vamos editar o arquivo /templates/meuTemplate/css/template.css (ou criá-lo se ele ainda não existir) e adicionar o seguinte:

:info: No meio do código HTML, a linha 15 do arquivo index.php aciona o PHP com <?php e chama a função echo, que serve para colocar strings na tela. Indicamos como string o nome do site (sitename), que está no arquivo de configuração do Joomla (configuration.php). Para obter esta string acionamos o método getCfg da variável global do Joomla $mainframe. Esta variável global possui uma porção de métodos, entre eles o getCfg, que permite buscar valores definidos no arquivo configuration.php. Para indicar que o PHP termina depois desta chamada, usamos o marcador ?>.

Vamos salvar os arquivos index.php e template.css com as modificações feitas e chamar novamente esta página com o novo template. O resultado será:

Eu sei que a letra ainda está feia e muito pequena para um cabeçalho, mas vamos com calma, uma coisa depois da outra. O mais importante no momento é entender como uma página é gerada no Joomla.

Agora que já sabemos como podemos especificar áreas no nosso template usando divisórias, nada impede que coloquemos os módulos da esquerda no lado esquerdo da página, o componente com o texto do artigo no centro e os módulos da direita no lado direito da página. Isto significa que estaremos criando um template com três colunas - esquerda, central e direita. Também podemos criar um rodapé que, assim como o cabeçalho, ocupa toda a largura da página. Então, vamos lá! O arquivo index.php vai ficar assim:

Xiiiii... não aconteceu nada do que estávamos querendo. Nada de três colunas, nada de arrumação. O motivo é que não levamos em consideração o que as divisórias são na verdade.