MINI CURSO DE TEMPLATE JOOMLA 2.

5
GRTIS ONLINE
AU TH OR // L e o Mi ra n d a
C ATEGOR IES // Jo o m l a , C u rs o s Gr ti s , C ri a o d o Ze ro , Te m p l a te s , C u rs o s d e Jo o m l a o n l i n e

TUTORIAL CRIANDO UM TEMPLATE JOOMLA DO ZERO

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 atravs do
instalador de extenses no painel administrativo.

O que preciso saber?

Em sua essncia, um template Joomla nada mais do que uma pgina Web normal, montada
com HTML,CSS, imagens, e as vezes, com alguns cdigos javascripts, e no final, adicionada alguns
cdigos do Joomla em PHP. Existe alguns outros elementos que iremos ver logo em seguida, mas o seu
corpo principal feito dessa matria.
Por isso, essencial que voc tenha o domnio de HTML e CSS para criar templates Joomla do zero,
sempre interessante montarmos o HTML e CSS da pgina enquanto visualizamos o resultado no
navegador, assim no teremos muitas surpresas quando transformarmos em um PHP do template.

QUEM NO SABE HTML

Se voc no tem domnio em montar um HTML com CSS, pode pegar algum template HTML pronto e
fazer as modificaes 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 no fuja muito do HTML, ele a base de tudo na internet, o seu conhecimento ideal at mesmo
para Editores e Redatores.

QUEM NO SABE CSS

Aprenda, sem CSS voc no conseguir fazer modicaes em templates Joomla, nem do zero, nem
comframeworks e nem mesmo em templates prontos de Joomla.

QUEM NO SABE JAVASCRIPT E PHP

Voc sempre ir encontrar cdigos de scripts e PHP em templates Joomla, por isso busque sempre
aprimorar o seu conhecimento. Porm o conhecimento bsico 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 presena e
ausncia de algumas ir depender de cada template.
As principais pastas so:
1. CSS - Onde ir estar o seu arquivo de estilo principal do template, e tambm outros caso queira
dividir em arquivos e adicionar CSSs de plugins de jQuery por exemplo.
2. HTML - Pasta que ir conter todos os templates overrides. Esses arquivos iro servir para voc
"refazer" alguns layouts do Joomla, como componentes, mdulos e at mesmo a paginao.
3. IMAGES - Imagens do template
4. JS - Arquivos javascript, adicione aqui o jQuery e/ou outros arquivos de plugins.
5. LANGUAGE - Arquivos de traduo de idiomas do template.
Os principais arquivos so:
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 cdigos do template.
3. templateDetails.xml - Arquivo de configurao do template que contm dados do autor e de todos
esses arquivos e pastas, alm de outras configuraes.
Agora que voc j tem uma idia de onde est pisando, vamos a prtica!

Criando um template Joomla

Poderamos aqui criar cada arquivo e pasta separadamente, um por um, mas
como a estrutura bsica 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
comear. 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 comearmos o nosso projeto no
sitewww.blank.vc .
Baixe o arquivo e extraia o pacote em seu computador, nesse momento est para a verso 1.1.7 para
Joomla 2.5 .
Veja que a estrutura dele bem semelhante a comentada anteriormente, possui apenas alguns
arquivos extras cujos os prprios nomes j so bem especficos. Arquivos de imagens para aparecer
em um dispositivo Apple, pginas customizadas para quando no houver um template escolhido, pgina
de erro e offline e imagens de preview do seu template que pode ser modificado conforme desejar,
preservando a resulao de cada imagem.

PERSONALIZANDO O TEMPLATE BLANK

A inteno desse mini-curso de ensinar como criar um template Joomla personalizado bsico, cabe a
voc leitor aprimorar os seus cdigos de HTML e CSS para ter algo como deseja.
Vamos abrir o arquivo index.php.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

<?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 th
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/mootoolscore.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]-->

36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.

<!--[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 (maxwidth: 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-icon57x57.png"> <!-- iphone, ipod, android -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touchicon-72x72.png"> <!-- ipad -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/appletouch-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 incio temos os comentrios, cujo voc pode estar alterando com os seus crditos.
Logo em seguida so inicializado algumas varivels PHP, voc poder usar algumas delas
parapersonalizar 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 so retiradas (pois certamente no usar) e outras
so guardadas em uma varivel para imprimir l no final da pgina.

Depois vem as chamadas de estilos.

O que voc ir precisar customizar inicialmente o cdigo que est entre as tags <body>:
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

<body
<div
<div
<div

class="">
id="overall">
id="header">
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 cdigo que ir imprimir uma classe especfica para cada pgina
sua, caso exista. uma tima forma de poder customizar estilos diferentes para cada pgina.
As linhas seguintes so tags HTML de diviso, onde temos a diviso do cabealho, corpo e rodap,
voc pode estar alterando como desejar.
No final temos um JDOC, que o cdigo que voc precisa colocar para imprimir um mdulo 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 varivel $script com as chamadas de JS que carregou na varivel l no topo.

Modificando o index.php
Vamos modificar o que est entre as tag <body> da sequinte forma:
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

<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>

20.
21.
22.
23.
24.

</div>
</div>
<jdoc:include type="modules" name="debug" />
<?=$scripts?>
</body>

O que modificamos?
Adicionamos uma posio de mdulo chamado "topo", dentro das tags do topo do site. Assim, voc
poder por exemplo criar um mdulo tipo HTML e colocar seu logo e uma imagem por exemplo, s
salvar o mdulo na posio "topo".
Dentro do "main" criamos uma tag JDOC do tipo "message", ela ir imprimir alguma mensagem quando
tiver, por exemplo, quando cadastrar um usurio ou enviar um email.
Outra tag especial que criamos foi a do tipo "componente", ela que ir carregar o contedo principal
da sua pgina, ou seja, o seu artigo, blog de artigo e todos os componentes.
Criamos tambm duas posios entre o carregamento da pgina, uma chamada "artigo-topo" e outra
"artigo-baixo", nele voc poder colocar mdulos especfico em cima e em baixo dos artigos e
contedos das pginas, como por exemplo o breadcrumb.
E para finalizar colocamos uma chamada de mdulo no "rodape".
Pronto, essas so as tags bsicas que voc precisa saber para alterar o template como quiser, basta
modificar o HTML e colocar novas posies de mdulos com nomes diferentes.
Salve o seu index.php.

Alterando as configuraes do template

Abra o arquivo templateDetails.xml:
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

<?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>
<script language="JavaScript" type="text/javascript">
<!-var prefix = 'mailto:';
var suffix = '';
var attribs = '';
var path = 'hr' + 'ef' + '=';
var addy41071 = 'your.name' + '@';
addy41071 = addy41071 + 'example' + '.' + 'com';
document.write( '<a ' + path + '\'' + prefix + addy41071 + suffix + '\'' +
attribs + '>' );
document.write( addy41071 );
document.write( '<\/a>' );
//-->
</script><a href="mailto:your.name@example.com">your.name@example.com</a>
<script language="JavaScript" type="text/javascript">
<!-document.write( '<span style=\'display: none;\'>' );
//-->

25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.

</script><span style="display: none;">CLOAKING

<script language="JavaScript" type="text/javascript">
<!-document.write( '</' );
document.write( 'span>' );
//-->
</script></span></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 parmetros com os seus dados, veja como fizemos:

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

<?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>
<script language="JavaScript" type="text/javascript">
<!-var prefix = 'mailto:';
var suffix = '';
var attribs = '';
var path = 'hr' + 'ef' + '=';
var addy49333 = 'contato' + '@';
addy49333 = addy49333 + 'jCursos' + '.' + 'com' + '.' + 'br';
document.write( '<a ' + path + '\'' + prefix + addy49333 + suffix + '\'' +
attribs + '>' );
document.write( addy49333 );
document.write( '<\/a>' );
//-->
</script><a href="mailto:contato@jCursos.com.br">contato@jCursos.com.br</a>
<script language="JavaScript" type="text/javascript">
<!-document.write( '<span style=\'display: none;\'>' );
//-->
</script><span style="display: none;">CLOAKING
<script language="JavaScript" type="text/javascript">
<!-document.write( '</' );
document.write( 'span>' );
//-->
</script></span></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>Posies do mdulo:</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>

62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.

<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 verso do Joomla na terceira linha, ele continua funcionando,
mas vamos modificar.
<name> - Logo abaixo temos o nome do template, no coloque caracteres especiais, nem espaos
nem acentos.
Depois modifique os dados de crditos do template, data, autor, etc.
<description> - Apenas descrio 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 no iremos
usar em outros idiomas, apague tambm os arquivos na pasta language.
<positions> - Modifique para as posies 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
Extenses.
Se fez tudo certinho ir instalar corretamente, se no, muito provvel que mostre algum erro. Deve ter
esquecido algo, relaxe, muito normal, verifique todos os parmetros novamente.
No esquea de ativar o seu template no Gerenciador de Temas do Joomla.

Personalizando o seu template Joomla

Nesse momento temos um template instalado, porm se perceber ele est todo
branco e descentralizado.
Isso acontece porque no demos um estilo no CSS do template, temos apenas
a estrutura bsica do HTML sem estilo.
A idia desse mini-curso no 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 modificao.

ADICIONANDO CONTEDO NO TEMPLATE

Nada melhor do que adicionar alguns contedos no Joomla para podermos ter contedo no site e
atualizar melhor o CSS.
Primeiro crie um artigo com ttulo e texto. Depois crie vrios links de menu apontando para o mesmo
artigo, assim teremos links e contedos para personalizar.
Crie os seguintes mdulos:
1. Mdulo do tipo HTML na posio "topo" - Adicione uma logo e mais algum texto ou imagem para o
topo.
2. Mdulo de menu na posio "artigo-topo".
3. Mdulo do tipo HTML na posio "rodape" - Adicione algum texto nele.
Dessa forma teremos contedo no topo, menu, contedo do link abaixo do menu e contedo no
rodap.
Veja abaixo como ficou o nosso site Joomla com o nosso template e contedos:

Vamos agora dar um estilo a essa pgina.

ALTERANDO O CSS
Abra o arquivo template.css que est na pasta CSS:
01.
02.
03.
04.
05.
06.

/* 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

07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

*********************************************/
#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 cdigo de CSS voc consegue dar uma forma personalizada ao seu
template:

Veja a modificao no CSS:

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.

/* 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; }

19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

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; marginright: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 no conhecia ainda CSS deu para perceber que ele realmente todo estiloso.

Criando os seus prprios templates

Espero que agora, com esse pequeno curso, voc tenha aprendido como
funciona a criao 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. Conhea bem HTML e CSS, treine suas habilidades nessas ferramentas criando pginas
estticas, voc s conseguir fazer um bom template se fizer uma boa pgina em HTML.
2. Conhea bem o Joomla, no adianta saber fazer template e no saber mexer no Joomla, saiba
onde est pisando.
3. PHP e jQuery so elementos que iro fazer muita diferena no resultado final, d uma ateno
especial a eles.
4. Depois que voc estiver legal nos trs passos acima pesquise os cdigos de PHP em templates
Joomla, descubra todas as classes de CSS usado pelo Joomla e estude sobre template overrides.
E... divirta-se!