Os temas controlam a aparência de um site Joomla: a disposição (layout), as cores, as posições dos módulos e todos os demais elementos visuais são definidos pelo tema atribuído a ele. O Joomla vem com dois temas, o Atum para o administrador e o Cassiopeia para o site, e ambos podem ser personalizados ou substituídos.

Esta seção aborda o básico de como os temas funcionam, formas de personalizar o Cassiopeia e construir sobre ele com segurança, substituindo sua marca padrão, além de algumas dicas práticas para variar a aparência de um site de página para página.

Primeiros passos com temas

O que é um tema e como começar a moldar a aparência do Cassiopeia usando suas opções integradas.

  • Noções básicas de temas – O que é um tema Joomla, os dois temas com os quais todo site começa (Atum para o administrador, Cassiopeia para o site) e as opções de personalização abordadas no restante desta seção.
  • Personalização do Cassiopeia – Usando as opções de estilo integradas do Cassiopeia e um arquivo CSS personalizado para alterar a marca, as cores e a disposição (layout) sem editar diretamente o código do tema.

Personalizando temas

Formas de alterar a saída e a estrutura de um tema além de suas opções integradas, desde sobrescrever a forma como uma extensão é renderizada até construir um tema que sobrevive a atualizações.

  • Sobreposições de tema – Copiando e modificando os arquivos de saída de uma extensão para alterar sua marcação, usando uma sobreposição do módulo de acesso como exemplo prático.
  • Disposições (layouts) de tema – Criando disposições (layouts) alternativas para módulos, componentes, categorias e itens de menu, de modo que diferentes instâncias possam ter aparências diferentes.
  • Temas filhos – Construindo um tema que herda do Cassiopeia e sobrescreve apenas os arquivos que você altera, para que as atualizações do tema não sobrescrevam suas personalizações.
  • templateDetails.xml do Cassiopeia – O arquivo XML que define os metadados de um tema, as posições dos módulos, o suporte a idiomas e as opções configuráveis.

Marca e ícones

Substituindo os ícones e o logotipo padrão que acompanham o Joomla para combinar com a marca do seu site.

  • Favicons – Criando e instalando o pequeno ícone exibido nas abas do navegador, nos formatos SVG e ICO esperados pelo Joomla.
  • Logotipos SVG de tema – Projetando um logotipo vetorial personalizado no Inkscape e configurando o Joomla para usar um arquivo SVG como gráfico de marca do site.
  • Ícones padrão – Usando o conjunto de ícones Font Awesome integrado ao Cassiopeia e ao Atum, e encontrando o nome de um ícone na biblioteca completa.

Dicas de tema

Técnicas práticas para variar a aparência de um site de página para página, em vez de em todo o site.

  • Alternando temas – Definindo o estilo de tema padrão de um site e atribuindo um estilo diferente a páginas específicas por meio de itens de menu.
  • Página inicial com um estilo diferente – Dando à página inicial uma aparência própria usando atribuições de módulos, estilos personalizados, sobreposições ou um tema filho.
  • Estilos de módulos e menus – Adicionando classes CSS personalizadas a módulos ou itens de menu individuais e estilizando-os no arquivo user.css.