Você está na página 1de 5

COMO FAZER TEMPLATE

PERSONALIZADO EM JOOMLA?
Rate this item

1
2
3
4
5
(16 votes)

[Atualizado 23/07/2014]
Ol amigos, criar um template Joomla uma tarefa relativamente simples, basta saber
estruturar um site em XHTML + CSS normal e conhecer alguns cdigos da estrutura do
Joomla, mais uns macetes bsicos.
Primeiro Passo
1. Vamos fazer o download do template EM BRANCO chamado Blank
Template ou Blank Template + Bootstrap;
2. Ao fazer o download teremos toda a estrutura de arquivos necessria para fazer
seu prprio template;
Personalizando o back-end do Template
Joomla
Agora que fizemos o download da nossa base para o desenvolvimento do nosso template,
vamos personaliz-lo.
Abra o arquivo templateDetails.xml que est dentro da pasta do Blank Template e vamos
editar as informaes usando um editor HTML.
1. <name> Nome do Template.
2. <creationDate> Data de criao do template.
3. <author> Autor.
4. <copyright> Direitos do template.
5. <authorEmail> Email de contato.
6. <authorUrl> Site onde est sendo usado.
7. <version> Pode dar um nmero para verso do template.
8. <description> So os dados que descrevem o template no painel, coloque em h1 o
nome do template e edite o html com mais informaes.
9. <files> So as pastas utilizadas pelo template, no modifique caso no saiba o que
est fazendo.
10. <languages> So as chamadas dos arquivos de traduo do template, no precisa
mexer se no quiser, mas pode personalizar.
11. <positions> Muito importante, aqui iremos informar o nome das posies do
template para aparecer quando ativarmos algum mdulo.
12. <config> No modifique, aqui so as configuraes do template para integrar com
bibliotecas CSS como o Bootstrap.
Thumbnail do template
Na pasta do template tem 2
arquivos: template_preview.png e template_thumbnail.png edite essas imagens no seu
editor de imagem preferido para ter uma miniatura que represente o site no painel do
Joomla. Assim quando passar o mouse em cima do nome do template ter essa imagem
exibindo.
Favicon do template
Dentro da pasta do template tem o arquivo favicon.ico, voc pode criar um cone
personalizado para ser o cone do seu site no navegador.
Se no sabe o que Favicon, clique aqui que falo mais a respeito.
Instalando o template no Joomla para
comear a modificar o front-end
Depois de fazer essas personalizaes, salve tudo bvio para no perder, copie a pasta do
template (se quiser renomeie para o nome que quiser, mas no esquea de informar no
item 1 do XML.
Agora v at sua instalao Joomla, na pasta templates e cole o seu template.
Exemplo: /www/templates/MEUTEMPLATE
Ativando o template no painel
1. Agora entre no painel administrativo do seu Joomla
(exemplo: www.meusite.com/administrator)
2. V no menu Extenses > Gerenciar extenses;
3. Clique em Descobrir;
4. E depois no boto Descobrir;
5. Vai aparecer na lista o seu template com o nome e dados personalizados;
6. Selecione o template e depois clique em INSTALAR.
Vai aparecer mensagem de instalado com sucesso, agora vamos editar o visual do
template!
Personalizando o visual front-end do
template Joomla
1. Abra o arquivo index.php da pasta do seu template que est na sua instalao
Joomla;
2. Note que basta voc editar o contedo HTML dentro do <body> para chamar os
mdulos do Joomla;
3. Na pasta CSS tem um arquivo chamado template.css que onde voc edita o
estilo do seu HTML;
Cdigos para integrao do seu template Joomla com extenses
instaladas no painel:
1. <jdoc:include type=head /> carregar dinamicamente o ttulo da
pgina, scripts, tags meta entre outros.
2. <jdoc:include type=modules name=nav /> carregar o mdulo da posio
"nav"
3. <jdoc:include type=component /> carregar o contedo dos artigos
4. As declaraes (jdoc:include) do tipo mdulos (type=modules) podem ter
qualquer nome (name). No caso, eles so relacionados com a posio real da
declarao. Evite acentos, maisculas e espaos.
Sabendo esses cdigos bsicos, basta por um nome para cada posio no seu template e
por o cdigo pra carregar nele um mdulo, exemplo:
< div class="topo" > <jdoc:include type=modules name=topo /> </ div>
Nesse caso nessa div vai carregar o mdulo instalado e configurado para exibir na posio
topo.
Usando a biblioteca CSS do Bootstrap no
meu template Joomla
IMPORTANTE! Para ter essa opo voc tem que ter usado o Blank Template +
Bootstrap, se usou apenas o Blank Template vazio ele no vem mais com vrias opes
de frameworks integrados. (Atualizado 23/07/2014)
Olha que legal, se voc chegou at aqui vai ter uma bela surpresa, pois esse template que
usamos como base faz integrao automtica com o Boostrap e outras bibliotecas CSS e
JS bastando ativarmos para utiliz-las.
----- A partir da verso 3.1.0 do Blank Template essa parte no existe mais -----
Acesse seu painel, e v em gerenciar templates e localiza por seu template. Feito isso
clique para editar.
Veja que o template tem as opes para voc selecionar e usar, bastando ticar a opo e
salvar para o template carregar no HEAD do seu template os arquivos.
Opes disponveis:
Modernizr
Mtodos CSS de minificao
Less.js
Foundation (Made by ZURB)
Bootstrap (incl. jQuery)
Opes de fontes e mais umas funes.
----- Pule a parte acima se est usando Blank Template 3.1.0 ou superior -----
Bom, ento ative o template.
Volte ao index.php do template, no espao do corpo do site (body) voc vai colar o grid
utilizado pelo Bootstrap, acesse:http://getbootstrap.com/css/#grid para pegar os cdigos
HTML e definir seu grid.
Copie e cole dentro do <body>, feito isso voc ter uma estrutura do Bootstrap rodando,
basta personalizar colocando na sidebar por exemplo uma chamada de um mdulo etc.
E a, gostou?
Com certeza tem muita informao valiosa neste artigo, espero mesmo que tenha te
ajudado e gostaria que comentasse abaixo a respeito!
Grande Abs!