[tutorial] Como criar template para Joomla 2.5

Hoje ensinarei uma parte de como fazer um template para Joomla 2.5!!
Um template super simples!! (Não responsive) Para responsive O Bruno Batista fará vídeo aulas


Para fazer um template bem simples temos que ter o Joomla instalado!!
Entramos na pasta template e...

Criaremos a seguinte pasta!!

Nome do template (aqui vc pode dar o nome que desejar )

Eu darei o nome de meutemplate

Criada a pasta meutemplate

entraremos na pasta:
e dentro da mesma criaremos alguns arquivos

Uma pasta chamada = CSS
Uma pasta chamada = html
Uma pasta chamada = images (nome em inglês memo )
um arquivo chamado = error.php
um arquivo chamado = index.php (este é um arquivo muito importante)
um arquivo chamado = templateDetails.xml
um arquivo chamado = offline.php
um arquivo chamado = component.php


Tudo isso é padrão do Joomla!! Em outros templates existem muito mais arquivos
Mas como vamos fazer um template bem simples
Só mexeremos em poucos arquivos (os outros nem tocaremos )

Agora entraremos na pasta CSS e la dentro colocaremos e vamos criar mais alguns arquivos

Um arquivo chamado = template.css
um arquivo chamado = template.css.php
um arquivo chamado = index.html

Com esses arquivos já da pra fazer alguma coisa

Agora vamos entrar na pasta html
e criaremos um arquivo chamado = index.html

Em muitos templates essa pasta tem outros arquivos (mas agora não precisaremos deles )

Agora vamos para a pasta images
Lá criaremos um arquivo chamado index.html

Vou explicar para que ser esse tal de index.html >> ele faz aparecer uma pagina em branco quando algum espertinho quiser dar uma olhada dentro do template digitando algum caminho assim nomedotemplate/css/ Tentando ver alguma coisa!! Com o index.html ele só verá uma pagina em branco lindona


Pronto pessoal !! Já temos quase um template para Joomla
Falta muita coisa ainda! Mas vamos lá


Vou esboçar meu template mais ou menos como eu quero que ele fique
Fiz isso no paint não ta nada bonito Não esperem muito não <!-- s:lol: --><img src="{SMILIES_PATH}/icon_lol.gif" alt="" title="Rindo" /><!-- s:lol: -->



Pronto temos um esboço (horrível eu sei, não precisa me dizer)

Então é isso que queremos

Então vamos ao arquivo templateDetails.xml
Nele faremos esse código =

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" " www.joomla.org/xml/dtd/2.5/template-install.dtd ">
<extension version="2.5" type="template" method="upgrade">
<name>meutemplate</name>
<creationDate>xxxx-xx-xx</creationDate>
<author> uriel dos santos souza</author>
<copyright>Copyright © xxxx example.com</copyright>
<authorEmail>Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.</authorEmail>
<authorUrl> www.example.com </authorUrl>
<version>1.0.0</version>
<description><![CDATA[
<h1>Meutemplate</h1>
<h2>Module positions</h2>
<ol>
<li>header</li>
<li>menu</li>
<li>footer</li>
<li>debug</li>
</ol>

</description>

<files>
<folder>css</folder>
<folder>html</folder>
<folder>images</folder>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>index.php</filename>
<filename>offline.php</filename>
<filename>templateDetails.xml</filename>
</files>

<positions>
<position>direita</position>
<position>esquerda</position>
<position>pesquisa</position>
<position>logo</position>
<position>slide</position>
</positions>



</extension>

Prontim já temos nosso instalador Todo arquivo do Joomla com final XML é um instalador é ali que o Joomla vê onde precisa mandar os arquivos dentro do site

Já podemos instalar !!

Então entre no Adm do joomla em gerenciador de extensões >> clicar em Descobrir
Depois clicar no botão descobrir logo acima >> e em instalar caso tenha aparecido seu template!!

Pronto temos um template instalado
E agora José?

Vamos colocar ele como nosso template padrão é claro!!
Isso vc deve saber fazer

Depois de colocado como padrão Vamos ver o resultado
hum...não ta bom neh ? é eu sei

Então agora entraremo no 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 [url=http://www.example.com" onclick="window.open(this.href);return false;]http://www.example.com[/url]

---

*/

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');

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" www.w3.org/1999/xhtml " xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >


<head>
<jdoc:include type="head" /

<![endif]-->
</head>

<body class="<?=$pageclass?>">

<div id="overall">
<div id="header">
<div class="logo">
<jdoc:include type="modules" name="logo" />
</div>
</div>
<div id="main">
<div id="esquerda">
<jdoc:include type="modules" name="esquerda" style="xhtml" />
</div>
<div id="direitatopo">

<jdoc:include type="modules" name="direita"style="xhtml" />
</div>
<div class="inmain">
<jdoc:include type="message" />
<?php if ($this->countModules('slider')): ?>

<div id="slider">
<jdoc:include type="modules" name="slider" style="xhtml" />
</div>

<?php endif; ?>
<div id="texto">
<jdoc:include type="component" />
</div>




</div>

</div>

<?=$scripts?>

</html>

Pronto Depois que salvar vc pode ir na pagina inicial de seu site e digitar

nomedosite ?tp=1 Para ver as posições

Não sei se vocês perceberam mas o local da logo é um módulo!! Fiz assim para ficar mais simples ainda

Já viu as posições??
Estão feias neh ? Mas temos uma solução para isso!! Se chama CSS
No CSS é que vamos deixar nosso template com cara de template
Pelo menos vai ficar legalzinho neh !!

Mas antes irei explicar algumas coisas do index.php

só umas coisas:)


<jdoc:include type="modules" name="nomedeumaposição" style="xhtml" />

Esse código ai de cima faz o Joomla incluir um módulo no seu template

Agora de vc fizer assim
<div id="nomedeumaclasse">
<jdoc:include type="modules" name="esquerda" style="xhtml" />
</div>

Agora inserindo essa <div id="nomedaclasse">
Isso faz aquela posição ter um estilo definido Ou seja um local no template, as cores, a font e outras coisas

nomedaclasse esta no arquivo template.css

Simprão neh?

Outro código >>

<?php if ($this->countModules('slider')): ?>

<div id="slider">
<jdoc:include type="modules" name="slider" style="xhtml" />
</div>

<?php endif; ?>
<div id="texto">
<jdoc:include type="component" />
</div>



<?php if ($this->countModules('slider')): ?>
Este código vê se numa página qualquer o módulo slider esta lá
caso o módulo não esteja ativo o component que o conteúdo toma seu lugar
para não ficarmos com um buraco no template

Então vamos ao CSS. vamos dar uma cara legal ao nosso template!!
Mas não agora farei isso no próximo tutorial!!

Espero ter ajudado no básico!!

Abraço

Baita tutorial, vai encorajar muita gente a construir seus templates!

Parabéns Uriel, posta uns sites seus aí pra galera ver!

Abraço

show de bola <!-- s:ugeek: --><img src="{SMILIES_PATH}/icon_e_ugeek.gif" alt=":ugeek:" title="Uber Geek" /><!-- s:ugeek: -->

Po cara, eu fui testar e o código do XML está faltando fechar o CDATA e mesmo eu fechando, apresenta o erro


JInstaller: :Install: File does not exist /home/gamersbr/www/tmp/install_505e4f07dc2a6/gamersbr/css
Error installing template


I agora?

Um arquivo não existe, vc deve ter esquecido de por algum arquivo dentro da pasta CSS

abraço