Mini Curso de Template Joomla 2.5 grátis online

Nesse mini-curso iremos mostrar passo a passo como criar um Template Joomla customizado do zero.

Primeiramente vamos explicar melhor o que é um template Joomla.

O que é um template Joomla

Simplificando, um template Joomla é um tema que muda a "cara" de um site feito com o CMS Joomla.

Para ter esse novo "layout" no seu site é preciso ter um arquivo (geralmente .ZIP), com toda a estrutura dentro, e enviar para o CMS Joomla através do instalador de extensões no painel administrativo.

O que preciso saber?

Em sua essência, um template Joomla nada mais é do que uma página Web normal, montada com HTML, CSS, imagens, e as vezes, com alguns códigos javascripts, e no final, adicionada alguns códigos do Joomla em PHP. Existe alguns outros elementos que iremos ver logo em seguida, mas o seu corpo principal é feito dessa matéria.

Por isso, é essencial que você tenha o domínio de HTML e CSS para criar templates Joomla do zero, é sempre interessante montarmos o HTML e CSS da página enquanto visualizamos o resultado no navegador, assim não teremos muitas surpresas quando transformarmos em um PHP do template.

Quem não sabe HTML

Se você não tem domínio em montar um HTML com CSS, pode pegar algum template HTML pronto e fazer as modificações para transformar em template. Outra dica é usar frameworks de template Joomla, ele irá apresentar um HTML pronto e você só precisará dar o estilo de CSS.

Mas não fuja muito do HTML, ele é a base de tudo na internet, o seu conhecimento é ideal até mesmo para Editores e Redatores.

Quem não sabe CSS

Aprenda, sem CSS vocâ não conseguirá fazer modicações em templates Joomla, nem do zero, nem com frameworks e nem mesmo em templates prontos de Joomla.

Quem não sabe Javascript e PHP

Você sempre irá encontrar códigos de scripts e PHP em templates Joomla, por isso busque sempre aprimorar o seu conhecimento. Porém o conhecimento básico delas irá ser o suficiente para criar um template Joomla.

Estrutura de um template Joomla

Iremos agora dar uma "pincelada" sobre a estrutura de um template Joomla.

Arquivos e pastas do template Joomla

Em um template Joomla podemos ter diversos arquivos e pastas, a presença e ausência de algumas irá depender de cada template.

As principais pastas são:

1. CSS - Onde irá estar o seu arquivo de estilo principal do template, e também outros caso queira dividir em arquivos e adicionar CSS´s de plugins de jQuery por exemplo.
2. HTML - Pasta que irá conter todos os templates overrides. Esses arquivos irão servir para você "refazer" alguns layouts do Joomla, como componentes, módulos e até mesmo a paginação.
3. IMAGES - Imagens do template
4. JS - Arquivos javascript, adicione aqui o jQuery e/ou outros arquivos de plugins.
5. LANGUAGE - Arquivos de tradução de idiomas do template.

Os principais arquivos são:

1. favicon.ico - Icone de favoritos do seu template (que aparece nas abas do navegador).
2. index.php - Arquivo principal que será aberto com o HTML e códigos do template.
3. templateDetails.xml - Arquivo de configuração do template que contém dados do autor e de todos esses arquivos e pastas, além de outras configurações.

Agora que você já tem uma idéia de onde está pisando, vamos a prática!

Criando um template Joomla

Poderíamos aqui criar cada arquivo e pasta separadamente, um por um, mas como a estrutura básica é sempre a mesma, vale mais apena usar um modelo para agilizar o nosso trabalho.

Quem produz template Joomla geralmente dá um Ctrl + c e Ctrl + v em algum projeto feito anteriormente ou até mesmo já guarda um "template blank" para começar. Como estamos iniciando a produzir o primeiro template de muita gente, vou deixar uma dica aqui de um bom "template blank" para baixar.

Download do template Blank

Navegando no Google achei um ótimo template inical para começarmos o nosso projeto no site www.blank.vc.

Baixe o arquivo e extraia o pacote em seu computador, nesse momento está para a versão 1.1.7 para Joomla 2.5 .

Veja que a estrutura dele é bem semelhante a comentada anteriormente, possui apenas alguns arquivos extras cujos os próprios nomes já são bem específicos. Arquivos de imagens para aparecer em um dispositivo Apple, páginas customizadas para quando não houver um template escolhido, página de erro e offline e imagens de preview do seu template que pode ser modificado conforme desejar, preservando a resulação de cada imagem.

Personalizando o template Blank

A intenção desse mini-curso é de ensinar como criar um template Joomla personalizado básico, cabe a você leitor aprimorar os seus códigos de HTML e CSS para ter algo como deseja.

Vamos abrir o arquivo index.php.

<?php  
/*------------------------------------------------------------------------
# author    your name or company
# copyright Copyright © 2011 example.com. All rights reserved.
# @license  http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Website   http://www.example.com
-------------------------------------------------------------------------*/

defined( '_JEXEC' ) or die; 

// variables
$app = JFactory::getApplication();
$doc = JFactory::getDocument(); 
$params = &$app->getParams();
$pageclass = $params->get('pageclass_sfx');
$tpath = $this->baseurl.'/templates/'.$this->template;

$this->setGenerator(null);

// load sheets and scripts
$doc->addStyleSheet($tpath.'/css/template.css.php?v=1.0.0'); 
$doc->addScript($tpath.'/js/modernizr.js'); // <- this script must be in the head

// unset scripts in head and put them to the end of the page (before </body>) for better page loading
unset($doc->_scripts[$this->baseurl.'/media/system/js/core.js']);
unset($doc->_scripts[$this->baseurl.'/media/system/js/mootools-core.js']);
unset($doc->_scripts[$this->baseurl.'/media/system/js/caption.js']);
$scripts  = '<script src="'.$this->baseurl.'/media/system/js/core.js" type="text/javascript"></script>';
$scripts .= '<script src="'.$this->baseurl.'/media/system/js/mootools-core.js" type="text/javascript"></script>';
$scripts .= '<script src="'.$this->baseurl.'/media/system/js/caption.js" type="text/javascript"></script>';

?><!doctype html>
<!--[if IEMobile]><html class="iemobile" lang=""> <![endif]-->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang=""> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang=""> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang=""> <!--<![endif]-->

 <head>
 <jdoc:include type="head" />
 <meta name="viewport" content="width=device-width,  initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <!--  mobile viewport -->
 <link rel="stylesheet" media="only screen and (max-width: 768px)" href="/css/tablet.css" type="text/css" />
 <link rel="stylesheet" media="only screen and (min-width: 320px) and  (max-width: 480px)" href="/css/phone.css" type="text/css" />
 <!--[if IEMobile]><link rel="stylesheet" media="screen"  href="/css/phone.css" type="text/css" /><![endif]--> <!--  iemobile -->
 <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57.png"> <!-- iphone, ipod, android -->
 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png"> <!-- ipad -->
 <link rel="apple-touch-icon-precomposed" sizes="114x114"  href="/apple-touch-icon-114x114.png"> <!-- iphone retina -->
 <!--[if lte IE 8]>
 <style> 
 {behavior:url(/js/PIE.htc);}
 </style>
 <![endif]-->
 </head>
 
 <body class="">
 <div id="overall">
 <div id="header">
 <div class="inheader">
 
 </div>
 </div>
 <div id="main">
 <div class="inmain">
 
 </div>
 </div>
 <div id="footer">
 <div class="infooter">
 
 </div>
 </div>
 </div>
 <jdoc:include type="modules" name="debug" />
 
 </body>

</html>

Vamos comentar brevemente sobre esse arquivo.

O início temos os comentários, cujo você pode estar alterando com os seus créditos.

Logo em seguida são inicializado algumas variávels PHP, você poderá usar algumas delas para personalizar melhor o seu template. Um exemplo é usar o $path para o caminho completo de qualquer arquivo no template, veja que ele é usado nas chamadas de CSS mais embaixo. Uma dica do uso dele é para carregar uma imagem de logotipo.

Depois temos as chamadas de javascript. Algumas são retiradas (pois certamente não usará) e outras são guardadas em uma variável para imprimir lá no final da página.

Depois vem as chamadas de estilos.

O que você irá precisar customizar inicialmente é o código que está entre as tags <body>:

<body class="">
 <div id="overall">
 <div id="header">
 <div class="inheader">
 
 </div>
 </div>
 <div id="main">
 <div class="inmain">
 
 </div>
 </div>
 <div id="footer">
 <div class="infooter">
 
 </div>
 </div>
 </div>
 <jdoc:include type="modules" name="debug" />
 <?=$scripts?>
 </body>

Na primeira linha existe um pequeno código que irá imprimir uma classe específica para cada página sua, caso exista. É uma ótima forma de poder customizar estilos diferentes para cada página.

As linhas seguintes são tags HTML de divisão, onde temos a divisão do cabeçalho, corpo e rodapé, você pode estar alterando como desejar.

No final temos um JDOC, que é o código que você precisa colocar para imprimir um módulo do Joomla com o respectivo nome no atributo "name". Nesse caso ele imprime o debug caso esteja ativado no Joomla.

Por último ele imprime a variável $script com as chamadas de JS que carregou na variável lá no topo.

Modificando o index.php

Vamos modificar o que está entre as tag <body> da sequinte forma:

<body class="">
 <div id="overall">
 <div id="header">
 <div class="inheader">
 <jdoc:include type="modules" name="topo" />
 </div>
 </div>
 <div id="main">
 <div class="inmain">
 <jdoc:include type="message" />
 <jdoc:include type="modules" name="artigo-topo" />
 <jdoc:include type="component" />
 <jdoc:include type="modules" name="artigo-baixo" />
 </div>
 </div>
 <div id="footer">
 <div class="infooter">
 <jdoc:include type="modules" name="rodape" />
 </div>
 </div>
 </div>
 <jdoc:include type="modules" name="debug" />
 <?=$scripts?>
 </body>

O que modificamos?

Adicionamos uma posição de módulo chamado "topo", dentro das tags do topo do site. Assim, você poderá por exemplo criar um módulo tipo HTML e colocar seu logo e uma imagem por exemplo, é só salvar o módulo na posição "topo".

Dentro do "main" criamos uma tag JDOC do tipo "message", ela irá imprimir alguma mensagem quando tiver, por exemplo, quando cadastrar um usuário ou enviar um email.

Outra tag especial que criamos foi a do tipo "componente", ela é que irá carregar o conteúdo principal da sua página, ou seja, o seu artigo, blog de artigo e todos os componentes.

Criamos também duas posiçãos entre o carregamento da página, uma chamada "artigo-topo" e outra "artigo-baixo", nele você poderá colocar módulos específico em cima e em baixo dos artigos e conteúdos das páginas, como por exemplo o breadcrumb.

E para finalizar colocamos uma chamada de módulo no "rodape".

Pronto, essas são as tags básicas que você precisa saber para alterar o template como quiser, basta modificar o HTML e colocar novas posições de módulos com nomes diferentes.

Salve o seu index.php.

Alterando as configurações do template

Abra o arquivo templateDetails.xml:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.7//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.7/template-install.dtd">
<install version="1.7" type="template" method="upgrade">
 <name>templatename</name>
 <creationDate>xxxx-xx-xx</creationDate>
 <author>your name</author>
 <copyright>Copyright © xxxx example.com</copyright>
 <authorEmail>
 CLOAKING
 </authorEmail>
 <authorUrl>http://www.example.com</authorUrl>
 <version>1.0.0</version>
 <description><![CDATA[
 <h1>templatename</h1>
 <p><img src="/../templates/templatename/template_preview.png" /></p>
 <h2>Modulpositionen</h2>
 <ol>
 <li>header</li>
 <li>menu</li>
 <li>footer</li>
 <li>debug</li>
 </ol>
 <p>Created by <a href="http://www.example.com" target="_blank">your name | example.com</a>.</p>
 ]]></description>
 
 <files>
 <folder>css</folder>
 <folder>html</folder>
 <folder>images</folder>
 <folder>js</folder>
 <folder>languages</folder>
 <filename>apple-touch-icon-57x57.png</filename>
 <filename>apple-touch-icon-72x72.png</filename>
 <filename>apple-touch-icon-114x114.png</filename>
 <filename>component.php</filename>
 <filename>error.php</filename>
 <filename>favicon.ico</filename>
 <filename>index.php</filename>
 <filename>offline.php</filename>
 <filename>template_preview.png</filename>
 <filename>template_thumbnail.png</filename>
 <filename>templateDetails.xml</filename>
 </files>
 
 <languages folder="languages">
 <language tag="de-DE">de-DE.tpl_templatename.ini</language>
 <language tag="en-GB">en-GB.tpl_templatename.ini</language>
 </languages>
 
 <positions>
 <position>header</position>
 <position>menu</position>
 <position>footer</position>
 <position>debug</position>
 </positions>
 
 <config>
 <fields name="params">
 <fieldset name="advanced">
 <field name="FIELD_SPACER_HEADER_DESC" type="spacer" hr="false" />
 </fieldset>
 </fields>
 </config>
</install>

Agora altere os parâmetros com os seus dados, veja como fizemos:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.7//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.7/template-install.dtd">
<install version="2.5" type="template" method="upgrade">
 <name>jcursos</name>
 <creationDate>2012-01-25</creationDate>
 <author>jCursos</author>
 <copyright>Copyright © jCursos www.jCursos.com.br</copyright>
 <authorEmail>
 CLOAKING
 </authorEmail>
 <authorUrl>http://www.jCursos.com.br</authorUrl>
 <version>1.0.0</version>
 <description><![CDATA[
 <h1>jcursos</h1>
 <p><img src="/../templates/jcursos/template_preview.png" /></p>
 <h2>Posições do módulo:</h2>
 <ol>
 <li>topo</li>
 <li>artigo-topo</li>
 <li>artigo-baixo</li>
 <li>rodape</li>
 <li>debug</li>
 </ol>
 <p>Criado por <a href="http://www.jCursos.com" target="_blank">jCursos | www.jCursos.com.br</a>.</p>
 ]]></description>
 
 <files>
 <folder>css</folder>
 <folder>html</folder>
 <folder>images</folder>
 <folder>js</folder>
 <filename>apple-touch-icon-57x57.png</filename>
 <filename>apple-touch-icon-72x72.png</filename>
 <filename>apple-touch-icon-114x114.png</filename>
 <filename>component.php</filename>
 <filename>error.php</filename>
 <filename>favicon.ico</filename>
 <filename>index.php</filename>
 <filename>offline.php</filename>
 <filename>template_preview.png</filename>
 <filename>template_thumbnail.png</filename>
 <filename>templateDetails.xml</filename>
 </files>
 
 <languages folder="languages">
 </languages>
 
 <positions>
 <position>topo</position>
 <position>artigo-topo</position>
 <position>artigo-baixo</position>
 <position>rodape</position>
 <position>debug</position>
 </positions>
 
 <config>
 <fields name="params">
 <fieldset name="advanced">
 <field name="FIELD_SPACER_HEADER_DESC" type="spacer" hr="false" />
 </fieldset>
 </fields>
 </config>
</install>

Note que eles esqueceram de mudar a versão do Joomla na terceira linha, ele continua funcionando, mas vamos modificar.

<name> - Logo abaixo temos o nome do template, não coloque caracteres especiais, nem espaços nem acentos.

Depois modifique os dados de créditos do template, data, autor, etc.

<description> - Apenas descrição em HTML

<files> - Se adicionou novos arquivos, adicionar dentro dessa tag como as demais.

<languages folder="languages"> - Modifique o nome do arquivo aqui, ou apague, já que não iremos usar em outros idiomas, apague também os arquivos na pasta language.

<positions> - Modifique para as posições existente no seu template

Instale no seu Joomla

Compacte toda a pasta em um .ZIP e instale no seu Joomla 2.5 usando o Gerenciador de Extensões.

Se fez tudo certinho irá instalar corretamente, se não, é muito provável que mostre algum erro. Deve ter esquecido algo, relaxe, é muito normal, verifique todos os parâmetros novamente.

Não esqueça de ativar o seu template no Gerenciador de Temas do Joomla.

Personalizando o seu template Joomla

Nesse momento temos um template instalado, porém se perceber ele está todo branco e descentralizado.

Isso acontece porque não demos um estilo no CSS do template, temos apenas a estrutura básica do HTML sem estilo.

A idéia desse mini-curso não é ensinar HTML e CSS, se você realmente quer ser um Web Designer saber HTML e CSS é essencial.

Para ilustrar melhor essa nova faze do projeto vamos fazer uma pequena modificação.

Adicionando conteúdo no template

Nada melhor do que adicionar alguns conteúdos no Joomla para podermos ter conteúdo no site e atualizar melhor o CSS.

Primeiro crie um artigo com título e texto. Depois crie vários links de menu apontando para o mesmo artigo, assim teremos links e conteúdos para personalizar.

Crie os seguintes módulos:

1. Módulo do tipo HTML na posição "topo" - Adicione uma logo e mais algum texto ou imagem para o topo.
2. Módulo de menu na posição "artigo-topo".
3. Módulo do tipo HTML na posição "rodape" - Adicione algum texto nele.

Dessa forma teremos conteúdo no topo, menu, conteúdo do link abaixo do menu e conteúdo no rodapé.

Veja abaixo como ficou o nosso site Joomla com o nosso template e conteúdos:

Vamos agora dar um estilo a essa página.

Alterando o CSS

Abra o arquivo template.css que está na pasta CSS:

/* TEMPLATE CSS
*********************************************/
html {height:100%; margin-bottom:1px; overflow-y:scroll;}
body {background-color:#fff; color:#000; font:normal normal normal 75%/125% arial,sans-serif; height:100%; text-align:center;}

/* LAYOUT
*********************************************/
#overall {height:100%; margin:0 auto; text-align:left; width:100%;}

 #header {}
 #main {}
 #footer {}

/* Layout Classes */
 .inheader {}
 .inmain {}
 .infooter {}

/* Floats */
.float-left {float:left;}
.float-right {float:right;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.ie6 .group {zoom:1;}
.ie7 .group {zoom:1;}

Agora veja como com pouco código de CSS você consegue dar uma forma personalizada ao seu template:

Veja a modificação no CSS:

/* TEMPLATE CSS
*********************************************/
html {height:100%; margin-bottom:1px; overflow-y:scroll;}
body {background-color:#eee; color:#000; font:normal normal normal 75%/125% arial,sans-serif; height:100%; text-align:center;}

/* LAYOUT
*********************************************/
#overall {height:100%; margin:0 auto; text-align:left; width:100%;}

 #header { background-color: #000; }
 #main { background-color: #fff; }
 #footer { background-color: #eee; }

/* Layout Classes */
 .inheader { width:960px; margin:0 auto; padding:20px; }
 .inmain { width:960px; margin:0 auto; padding:20px; }
 .infooter { width:960px; margin:0 auto; padding:20px; }
 
 ul.menu { width:100%; list-style:none; margin-bottom:20px; display:table; padding-bottom: 10px; border-bottom:1px solid #000; }
 ul.menu li { float:left; }
 ul.menu li a { display:block; background-color:#000; color:#fff; margin-right:10px; padding:5px; text-decoration:none; }
 
 .item-page { clear:left; }
 
 h2 { font-size:28px; margin-bottom: 20px; display:block; }
 
 p { margin-bottom:10px; }

/* Floats */
.float-left {float:left;}
.float-right {float:right;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.ie6 .group {zoom:1;}
.ie7 .group {zoom:1;}

Para quem não conhecia ainda CSS deu para perceber que ele realmente é todo estiloso.

Criando os seus próprios templates

Espero que agora, com esse pequeno curso, você tenha aprendido como funciona a criação de um template Joomla.

Veja que, como qualquer outra área de design, o web designer tem que ser criativo e saber usar as ferramentas de trabalho para poder ter um produto final com qualidade.

Aqui vai algumas dicas para você fazer bons templates:

1. Conheça bem HTML e CSS, treine suas habilidades nessas ferramentas criando páginas estáticas, você só conseguirá fazer um bom template se fizer uma boa página em HTML.
2. Conheça bem o Joomla, não adianta saber fazer template e não saber mexer no Joomla, saiba onde está pisando.
3. PHP e jQuery são elementos que irão fazer muita diferença no resultado final, dê uma atenção especial a eles.
4. Depois que você estiver legal nos três passos acima pesquise os códigos de PHP em templates Joomla, descubra todas as classes de CSS usado pelo Joomla e estude sobre template overrides.

E... divirta-se!

Download do template Joomla

Aqui está o arquivo feito nesse curso para download.

Esse template é apenas para fins educacionais.