Temos por princípio disponibilizar gratuitamente em forma de artigos, os conteúdos que são disponibilizados em forma de vídeo-aulas, para nossos alunos. Lembre-se: "Você não precisa fazer nosso curso para aprender Joomla. Aliás, você não precisa fazer curso algum, pois está tudo aqui de graça para você. Este Portal foi feito para você!"Neste artigo iremos começar a customizar o template ja purity de forma a deixá-lo totalmente acessível e o resultado final estará disponível em um pacote zipado, para os alunos do curso de joomla nas modalidades presencial, vídeo-curso e "in company".
1) Ambientação - partimos do princípio que precisamos de um template acessível para nosso projeto, no caso o Joomla Brasília. Qual o objetivo? Permitir que uma importante camada da sociedade passe a interagir com nosso portal, disponibilizar o portal na tecnologia "mobile" e automaticamente melhorar nossa indexação no google.
2) A escolha do template - poderíamos começar do zero a construção do template, porém, um dos princípios da orientação a objeto é o reaproveitamento de código. Por isso, nós iremos utilizar o JA PURITY que é o melhor template que existe em minha opinião e o melhor, distribuído gratuitamente e sob licença GNU/GPL com a distribuição do Joomla.
3) Mudando o nome do template - a primeira customização será no nome do template. Iremos mudar de ja_purity para acessivel. Como? Simplesmente renomeando o diretório (você pode escolher o nome que quiser).
(*)imagem template renomeado
4) Editando o xml - agora iremos editar o arquivo de manifesto TemplateDetail.xml que está na raiz do diretório templates/ja_purity. As alterações serão referentes as informações de autoria e mudança do diretório para parametrização no backend.
(*)imagem mudando o cabeçalho do xml
(*)imagem mudando os diretórios de parametrização
5) Configuração do template - o template possui vários parâmetros de configuração que são definidos no backend. Optei por utilizar o estilo BLUE como tema do cabeçalho e para os elementos primários do template.
(*) imagem configuração do template
6) Customizando a index.php - vamos colocar a mão na massa e inserir no arquivo index.php, dentro da tag <head>script aqui </head> as chamadas aos scripts em javascript, responsáveis pela troca de estilo e atualização automática do navegador. Para baixar os scripts você pode clicar aqui .
(*) imagem inserindo a chamada aos scripts
6) Editando a folha de estilos principal - a folha de estilos principal, é a template.css. Nós iremos editá-la de forma a criar novos seletores para estilar as novas DIVS que serão criadas no template, a partir da área destinada a carregar o component, a saber:
DIV SLIDE-SHOW - para abrigar os depoimentos e material de divulgação do curso
DIV SLIDE - para abrigar depoimentos de ex-alunos
(*) imagem criando novos seletores
DIV TABS - para abrigar material de divulgação do curso
Div TUTORIAIS - para abrigar os tutoriais categorizados na Home Page através de um aninhamento de outras DIVS filhas
(*) imagem criando novos seletores
(**) perceba o css hacks utilizado para o IE 7.0 representado pelo *margin-top:-20px; esta instrução será interpretada apenas pelo IE 7.0
(*) imagem DIVS filhas
Criamos também a classe estilo-choose para abrigar as imagens responsáveis pela chamada ao script que irá trocar as folhas de estilos. Neste ponto vale frisar que não é necessário instalar novos templates, nem tão pouco associar templates para se fazer a troca de estilos, basta utilizar javascript.
(*)imagem criando a nova classe
este é o resultado no frontend.
(*) imagem nova div no frontend do template
7) Editando o estilo do cabeçalho - antes de começarmos a editar o estilo do topo do template precisamos nos ambientar.
Meu objetivo é tornar o Joomla Brasília acessível, mas não quero mudar muito a estrutura de navegação tendo em vista que você está acostumado(a) com a atual. A saída foi deixar o novo template parecido com a estrutura do atual, explorando ao máximo a força da customização. Por isso, alterei a logomarca e "brinquei" um pouco com o slogan passando uma mensagem sublimar. Aumentando a largura para 150px em substituição aos 80 px originais, preparo também o ambiente para a utilização do ocaso que será a mudança da imagem do topo, de acordo com a posição do sol.
(*) imagem editando a div do cabeçalho
(*) imagem aumentando o tamanho da logomarca
(*) imagem aumentando o tamanho da imagem de fundo (randômica)
8) Resultado final - para finalizar, podemos ver o resultado no frontend do nosso website de teste.
(*) imagem resultado final da customização no frontend
Uma vez que o website foi completamente testado, no ambiente de teste, você vai precisar implantá-lo em um ou mais servidores de produção. A transição do servidor de teste (esteja ele local ou não)é uma tarefa que exige uma atenção especial e basicamente é composta de ações a serem tomadas em ordem cronológica para que de tudo certo. 
