COMO FAZER TEMPLATE PERSONALIZADO EM JOOMLA?Rate this item 1 2 3 4 5(16 votes)

[Atualizado 23/07/2014]Ol amigos, criar umtemplate 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 Passo1. Vamos fazer o download do template EM BRANCO chamadoBlank TemplateouBlank 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 JoomlaAgora que fizemos o download da nossa base para o desenvolvimento do nosso template, vamos personaliz-lo.Abra o arquivotemplateDetails.xmlque est dentro da pasta do Blank Template e vamos editar as informaes usando um editor HTML.1. Nome do Template.2. Data de criao do template.3. Autor.4. Direitos do template.5. Email de contato.6. Site onde est sendo usado.7. Pode dar um nmero para verso do template.8. So os dados que descrevem o template no painel, coloque em h1 o nome do template e edite o html com mais informaes.9. So as pastas utilizadas pelo template, no modifique caso no saiba o que est fazendo.10. So as chamadas dos arquivos de traduo do template, no precisa mexer se no quiser, mas pode personalizar.11. Muito importante, aqui iremos informar o nome das posies do template para aparecer quando ativarmos algum mdulo.12. No modifique, aqui so as configuraes do template para integrar com bibliotecas CSS como o Bootstrap.Thumbnail do templateNa pasta do template tem 2 arquivos:template_preview.pngetemplate_thumbnail.pngedite 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 templateDentro 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 aquique falo mais a respeito.Instalando o template no Joomla para comear a modificar o front-endDepois 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/MEUTEMPLATEAtivando o template no painel1. 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 Joomla1. 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 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. carregar dinamicamente ottulo da pgina,scripts,tags metaentre outros.2. carregar o mdulo da posio "nav"3. carregar o contedo dos artigos4. 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" >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 JoomlaIMPORTANTE!Para ter essa opo voc tem que ter usado oBlank 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/#gridpara pegar os cdigos HTML e definir seu grid.Copie e cole dentro do , 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!