O template é uma das mais importantes peças do site. Este é que providencia a aparência, o design. Este motiva novos visitantes a ficar no seu site e explorá-lo. Visitantes regulares e usuários apreciam voltar em um site com um bonito e útil design.Pense em outros produtos, por exemplo. Um carro preciso de um bom motor e pneus, mas a mais importante razão para comprar um é normalmente o design. Ainda que o design não seja a principal razão, essa é normalmente a razão para se possuir algo e pode fazer com que um comprador tenha mais razões palpáveis para isso. Se o design é bem feito, as pessoas esperam que o resto também seja. (Figura 1, Figura 2)

Figura 1: Carro com adesivos  (Richardmasoner)

Figura 2: Carro vermelho  (FotoSleuth)

Ambos os carros foram feitos para um diferente público alvo. Eles são um exemplo de diferentes abordagens no design.

Web design é um pouco como artesanato. Possuir habilidades como HTML, CSS, JavaScript, PHP, edição de imagem e muitos outros é imperativo. Joomla é apenas mais uma ferramento na sua barra.

Web design é ainda uma profissão nova.Um web designer normalmente tem que lidar com banda estreita, navegadores incompatíveis, editores de conteúdo inexperientes e outras pessoas envolvidas no processo de criar um bom site. A criação de um site Joomla é normalmente um processo, em que cada envolvido aprende muito. Bom web design é trabalho duro. :-)

Joomla e templates

Joomla é conhecido por sua qualidade e simplicidade. No Joomla, uma simples página é gerada pela saída em html de um componente, vários módulos e o template. Cada página é acessível via um único URL. Tome a página principal como exemplo. O componente de conteúdo produz o HTML de saída para os artigos no meio (Figura 3). Os blocos próximo aos artigos são módulos diferentes. Você pode combinar o HTML de saída de um componente com o HTML de saíde de vários módulos. Módulos podem ser reusados em outras páginas.

Figura 3: Página inicial do Joomla

Posições

Você tem que saber, é claro, até que ponto você pode atribuir um módulo. Por essa razão, cada template providencia as chamadas posições. Para poder ver essas posições, você tem que habilitar a Pré-visualização das Posições do Módulo (Extensões -> Administrar templates -> Opções). Depois disso, você pode acessar o site apenas usando o parâmetro tp=1(http://localhost/index.php?tp=1). Você verá a posição dos módulos com ênfase e seus nomes (Figura 4). Em Extensões -> Administrar Módulos, você pode atribuir uma dessas posições a um módulo. Se você precisar de um módulo em diferentes posições, você pode copiá-lo.

Desde o Joomla 2.5 existe uma maneira muito fácil que foi adicionada ao backend. Você verá ele clicando no ícone, que agora mudou, ao lado do nome do template em Extensões -> Administrar templates (Figura 5)

Figura 4: Posições do módulo

Figura 5: Ícone da pré-visualização

Templates padrão

A instalação padrão do Joomla vem com 3 templates para o site e 2 templates para a área administrativa. Você pode ver uma visualização prévia em Extensões -> Administrar templates -> aba Templates (Figura 6)

Figura 6: Templates do site

O template Atomic é um exemplo de como um template básico pode ser. No capítulo Criar um novo template usando Atomic, nós veremos esse template como a base para criar o nosso próprio template. O Beez5 é a versão html 5 do Beez2. Também para o Administrador, outro template está disponível. (Figura 7)

Figura 7: Templates para a área administrativa

Estilos

Estilos são uma novidade desde o Joomla 1.6. Eles oferecem a possibilidade de criar e usar diferentes versões de um template. Um template tema no mínimo um estilo. Neste estilo, configurações podem ser feitas dependendo do template, como uma mudança de cores ou subir o logo do cabeçalho.Você pode configurar um estilo padrão para o seu site em Extensões -> Administrar templates -> Estilos. Você pode filtrar entre dois estilos,Site e Administrador, escolhendo a localização. O template padrão é o Beez2 que vem com 2 estilos predefinidos: padrão e Parks Site.

Você pode criar estilos adicionais copiando eles. Cada estilo pode ser associado a um item de menu. Se você gostar de um background verde no seu site quando as pessoas clicarem no item A do menu, por exemplo, e um background azul quando eles clicarem no item B do menu, você pode associar os estilos correspondentes. (Figura 8)

Figura 8: Associe um estilo a um item de menu

Você achará mais sobre templates no capítulo Trabalhando com templates.