[tutorial] Como criar template para Joomla 2.5

  • Uriel
  • Avatar de Uriel Autor do Tópico
  • Offline
  • JCB! Legend
  • JCB! Legend
Mais
6 anos 11 meses atrás #75067 por Uriel
Uriel created the topic: [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=":lol:" 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

Please Entrar ou Registrar to join the conversation.


Mais
6 anos 11 meses atrás #75174 por JoomRS
JoomRS replied the topic: Re: [tutorial] Como criar template para Joomla 2.5
Baita tutorial, vai encorajar muita gente a construir seus templates!

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

Abraço

Please Entrar ou Registrar to join the conversation.

  • brunomotta26
  • Avatar de brunomotta26
  • Offline
  • JCB! Professional
  • JCB! Professional
Mais
6 anos 9 meses atrás #79732 por brunomotta26
brunomotta26 replied the topic: Re: [tutorial] Como criar template para Joomla 2.5
show de bola <!-- s:ugeek: --><img src="{SMILIES_PATH}/icon_e_ugeek.gif" alt=":ugeek:" title="Uber Geek" /><!-- s:ugeek: -->

[b:2tyzt0jg][color=#000000:2tyzt0jg]Motta Websites:[/color:2tyzt0jg][/b:2tyzt0jg]
[url:2tyzt0jg]http://www.mottaweb.com.br[/url:2tyzt0jg]
[b:2tyzt0jg][color=#000000:2tyzt0jg]Facebook:[/color:2tyzt0jg][/b:2tyzt0jg]
[url:2tyzt0jg]https://www.facebook.com/brunomotta26[/url:2tyzt0jg]
[b:2tyzt0jg][color=#000000:2tyzt0jg]Precisa de Ajuda em Joomla ? Conheça meu Fórum, Acesse:[/color:2tyzt0jg][/b:2tyzt0jg]
[url:2tyzt0jg]http://www.mottanaweb.com.br[/url:2tyzt0jg]

Please Entrar ou Registrar to join the conversation.

  • infinitanet.com
  • Avatar de infinitanet.com
  • Offline
  • JCB! Iniciante
  • JCB! Iniciante
Mais
6 anos 9 meses atrás #80568 por infinitanet.com
infinitanet.com replied the topic: Re: [tutorial] Como criar template para Joomla 2.5
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?

Please Entrar ou Registrar to join the conversation.

  • Uriel
  • Avatar de Uriel Autor do Tópico
  • Offline
  • JCB! Legend
  • JCB! Legend
Mais
6 anos 9 meses atrás #80575 por Uriel
Uriel replied the topic: Re: [tutorial] Como criar template para Joomla 2.5
Um arquivo não existe, vc deve ter esquecido de por algum arquivo :) dentro da pasta CSS

abraço

Please Entrar ou Registrar to join the conversation.