Noções básicas de temas

Introdução

No Joomla!, um tema é um conjunto de ficheiros que, em conjunto, definem a aparência do sítio. O Joomla fornece dois temas: Atum é o tema de administração utilizado para a gestão do sítio; e Cassiopeia é o tema do sítio utilizado para os visitantes. Muitos outros temas de sítio estão disponíveis junto de fornecedores independentes, gratuitamente ou por um custo modesto. De facto, existe toda uma indústria baseada no fornecimento de temas especializados para sítios.

Um tema de sítio típico contém ficheiros PHP para dispor o conteúdo e ficheiros CSS para estilizar o conteúdo. Frequentemente existem ficheiros adicionais, como imagens utilizadas na disposição e ficheiros JavaScript utilizados para interagir com funcionalidades do sítio, como hiperligações e botões. A captura de ecrã seguinte mostra as pastas e ficheiros do tema Cassiopeia numa instalação nova do Joomla:

Note que os ficheiros php estão na pasta /templates do sítio e os ficheiros de media estão na pasta /media do sítio.

Posições do tema

O tema do sítio define as posições do conteúdo principal, por exemplo um artigo individual ou uma disposição de blogue de artigos em destaque, e quaisquer módulos a exibir acima, abaixo, à esquerda ou à direita do conteúdo principal. A ilustração seguinte mostra as posições disponíveis no Cassiopeia:

Pode também ver as posições do tema em qualquer tema, definindo Pré-visualizar posições de módulo como Autorizado no formulário Tema — Opções e acrescentando depois ?tp=1 ao url. Se já existir uma cadeia de consulta acrescentada ao url, acrescente antes &tp=1.

Estilização pelo utilizador

O Cassiopeia tem algumas opções que pode alterar para modificar a aparência do sítio (existe um artigo separado sobre a Personalização do Cassiopeia). Isso pode não ser suficiente para os seus propósitos. Pode fazer as suas próprias alterações à aparência com uma folha de estilos user.css. Tem de a criar você próprio no formulário Temas — Personalizar. Basta selecionar Novo ficheiro e introduzir Nome do ficheiro: user, selecionar Tipo de ficheiro: .css, e selecionar css na lista de pastas. Depois selecione o ficheiro user.css recém-criado no formulário Editar e introduza alguns estilos, por exemplo, para tornar os títulos verde-escuro:

    h1, h2, h3, h4, h5, h6 {
      color: darkgreen;
    }

Sobreposições de tema

Além da disposição geral definida pelo tema do sítio, cada componente ou módulo tem um tema para definir a sua aparência dentro da disposição geral. Esses temas estão localizados numa pasta tmpl dentro do componente ou módulo. Alguns plugins também têm temas. E existem disposições que podem ser chamadas a partir de qualquer tipo de extensão.

Por vezes, um destes temas de extensão não é exatamente do seu agrado. Nesse caso, pode criar uma sobreposição de tema. Trata-se de uma cópia do código utilizado para gerar a disposição da extensão, para que a altere conforme os seus próprios propósitos. A captura de ecrã seguinte mostra o formulário Tema — Personalizar — Criar sobreposições:

O Cassiopeia já tem algumas sobreposições instaladas. Isso pode parecer um problema. Se alterar algum dos ficheiros predefinidos do Cassiopeia, as suas alterações serão substituídas (e, portanto, perdidas) na próxima atualização do Joomla. A solução são os temas-filho.

Esquemas alternativos

Um tema, ou uma sobreposição de tema, define a aparência de uma extensão num ficheiro específico, como o default.php. Em alguns casos, poderá querer escolher entre o esquema predefinido e um esquema alternativo. Por exemplo, um menu numa posição superior normalmente necessita de um esquema diferente do mesmo menu numa posição lateral. Num módulo de menu existe um parâmetro Esquema no separador Avançado do formulário de edição do módulo que lhe permite selecionar entre os esquemas alternativos disponíveis. Existe um tutorial separado sobre Esquemas alternativos de tema.

Temas-filho

Um tema-filho utiliza os ficheiros do seu tema hospedeiro, exceto quaisquer ficheiros que existam no tema-filho. Por exemplo, poderia ter ficheiros user.css diferentes no hospedeiro e no filho, de modo a que páginas diferentes pudessem ter esquemas de cores diferentes. Ou poderia copiar o ficheiro index.php do hospedeiro para o filho e alterar o filho para produzir um esquema diferente do hospedeiro. Existe um tutorial separado sobre temas-filho.