Noções básicas de temas

Introdução

No Joomla! um tema é um conjunto de arquivos que juntos definem a aparência do site. O Joomla fornece dois temas: Atum é o tema Administrativo usado para a gestão do site; e Cassiopeia é o tema do Site usado para os visitantes do site. Muitos outros temas de site estão disponíveis em fornecedores independentes, gratuitos ou por um valor modesto. De fato, existe uma indústria inteira baseada no fornecimento de temas especializados para sites.

Um tema de site típico contém arquivos PHP para dispor o conteúdo e arquivos CSS para estilizar o conteúdo. Frequentemente há arquivos adicionais, como imagens usadas na disposição e arquivos JavaScript usados para interagir com recursos do site, como links e botões. A captura de tela a seguir mostra as pastas e arquivos do tema Cassiopeia em uma nova instalação do Joomla:

Observe que os arquivos php estão na pasta /templates do site e os arquivos de mídia estão na pasta /media do site.

Posições do tema

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

Além disso, você pode ver as posições do tema em qualquer tema definindo Visualizar posições de módulos como Ativado no formulário Tema: Opções e, em seguida, adicionando ?tp=1 à url. Se já houver uma string de consulta anexada à url, adicione &tp=1 no lugar.

Estilização pelo usuário

O Cassiopeia possui algumas opções que você pode alterar para modificar a aparência do site (há um artigo separado sobre Personalização do Cassiopeia). Isso pode não ser suficiente para seus propósitos. Você pode fazer suas próprias alterações na aparência com uma folha de estilo user.css. Você precisa criá-la por conta própria no formulário Temas: Personalizar. Basta selecionar Novo arquivo e inserir Nome do arquivo: user, selecionar Tipo de arquivo: .css, e selecionar css na lista de pastas. Em seguida, selecione o arquivo user.css recém-criado no formulário Editar e insira alguns estilos, por exemplo, para deixar os títulos verde-escuro:

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

Substituições de tema

Além da disposição geral definida pelo tema do site, cada componente ou módulo possui um tema para definir sua aparência dentro da disposição geral. Esses temas estão localizados em uma pasta tmpl dentro do componente ou módulo. Alguns plugins também possuem temas. E existem disposições que podem ser chamadas de qualquer tipo de extensão.

Às vezes, um desses temas de extensão não é exatamente do seu agrado. Nesse caso, você pode criar uma substituição de tema. Esta é uma cópia do código usado para gerar a disposição da extensão para você alterar de acordo com seus próprios propósitos. A captura de tela a seguir mostra o formulário Tema: Personalizar Criar Substituições:

O Cassiopeia já possui algumas substituições instaladas. Isso pode parecer um problema. Se você alterar qualquer um dos arquivos padrão do Cassiopeia, suas alterações serão sobrescritas (e, portanto, perdidas) na próxima atualização do Joomla. A solução são os temas filhos.

Disposições alternativas

Um tema, ou uma substituição de tema, define a aparência de uma extensão em um arquivo específico, como default.php. Em alguns casos, você pode querer escolher entre a disposição padrão e uma disposição alternativa. Por exemplo, um menu em uma posição superior geralmente precisa de uma disposição diferente do mesmo menu em uma posição lateral. Em um módulo de menu, há um parâmetro de Disposição (layout) na aba Avançado do formulário de edição do módulo que permite selecionar entre as disposições alternativas disponíveis. Há um tutorial separado sobre Disposições Alternativas de Tema.

Temas filhos

Um tema filho usa os arquivos do seu tema pai, exceto os arquivos que estão presentes no tema filho. Por exemplo, você poderia ter arquivos user.css diferentes no pai e no filho, de modo que páginas diferentes pudessem ter esquemas de cores diferentes. Ou você poderia copiar o arquivo index.php do pai para o filho e alterar o filho para produzir uma disposição diferente da do pai. Há um tutorial separado sobre temas filhos.