Criando template para Joomla 2.5.x – parte 1

Criar um template para o Joomla! é uma das tarefas mais fáceis que existem. Nesse post vou mostrar como transformar uma página HTML simples formatada com CSS em um template Joomla!

Siga os passos a seguir.

  1. Crie uma pasta e a identifique com o nome do template que está sendo criado. Por exemplo: meutemplatejoomla. Crie um arquivo index.html em branco dentro dessa pasta. Essa é uma dica de segurança do Joomla para evitar que pessoas mal intencionadas vejam diretamente o que está lá dentro.
  2. Dentro dela crie pastas chamadas css, imagens, html. Dentro de cada uma crie um arquivo index.html em branco.
  3. Comece a montar o seu template normalmente, como se fosse um arquivo HTML comum.
    1. A formatação CSS deve ser colocada em um arquivo externo que ficará dentro da pasta css. As imagens usadas no template deverão ficar dentro da pasta imagens. Questão de organização.
  4. Quando terminar, teste o arquivo HTML em alguns navegadores. Corrija os problemas, se houver, antes de seguir para o próximo passo.
  5. Quando terminar, salve esse arquivo como index.php na raiz na pasta meutemplatejoomla.
  6. Abra esse arquivo em qualquer editor HTML.
  7. Tudo que está até a tag que fecha o cabeçalho (</head>) deve ser apagado e substituido pelo código abaixo:

    Código dentro da tag head

  8. A declaração <jdoc:include type=”head” /> carregará dinamicamente o título da página, scripts, tags meta entre outros.
  9. Feito isso, basta agora colocar as declarações de posicionamento de conteúdo e módulos nos lugares apropriados. No exemplo que criei, temos uma página com cabeçalho, área de navegação, 3 colunas (esquerda, centro e direita) e rodapé.
  10. Na área de navegação, coloque a seguinte declaração: <jdoc:include type=”modules” name=”nav” />
  11. Na área da coluna equerda, insira <jdoc:include type=”modules” name=”esquerda” />
  12. Ná coluna central insira <jdoc:include type=”component” />
  13. Na área da coluna direita insira <jdoc:include type=”modules” name=”direita” />
  14. Finalmente, na área do rodapé insira <jdoc:include type=”modules” name=”rodape” />
  15. As declrações (jdoc:include) do tipo módulos (type=”modules”) podem ter qualquer nome (name). No caso, eles são relacionados com a posição real da declaração. Evite acentos, maiúsculas e espaços.
  16. A declaração <jdoc:include type=”component” /> exibirá o conteúdo do site.

A página do template já está pronta. O próximo passo será montar o arquivo templateDetails.xml que permitirá que o Joomla! veja o seu template corretamente.

Se esse artigo foi útil para você, apoie esse projeto! Confira a segunda parte deste tutorial.

Related Posts with Thumbnails
Be Sociable, Share!

46 thoughts on “Criando template para Joomla 2.5.x – parte 1

  • 30/05/2014 at 09:46
    Permalink

    amigo estou com uma duvida e gostaria de saber se poderia me ajudar!! criei um template no artisteer 4.2 para joomla 2.5 onde o header teria um banner com 100% !! coloqueo o jsn imagenshow e na visualizacao do template que vemos as areas ele aparece mas no site normal não!! coloquei o topo com opacidade 100%!! saberia me informar se teria como ele aparecer?? pois queria o banner do tamanho do site!! obrigado

    Reply
  • 17/09/2013 at 01:00
    Permalink

    Amigão, instalei o joomla 2.5 e coloquei o template beez 20.

    já fiz varias alterações e gostaria de fazer uma alteração no rodapé.

    Exemplo, gostaria de inserir link, imagens e textos no rodapé e aumentar maus o tamanho referente a altura.

    estou em duvida como mexe nesse assunto do rodapé, já vi varias pessoas falando pra mexer no arquivo footer, mas não deu certo, tem uma explicação mais clara de como fazer esse exemplo no rodapé.

    abs

    Reply
    • 18/09/2013 at 00:32
      Permalink

      Rafael, o Beez_20 tem uma posição para módulos no rodapé – position-14. Você pode criar um módulo PERSONALIZAR HTML e inserir nessa posição. Sem mexer em código do template.
      O código do rodapé desse template é simples:

      Se você souber o que está fazendo, altere nessa área.
      Boa sorte!

      Reply
  • 14/08/2013 at 16:42
    Permalink

    Oi, vi seu tutorial agora(atrasada rs como o outro rapaz disse rs)
    Parabéns pelo texto!!!!
    Na verdade busco informações sobre template 2.5 e 3.0
    Eu consigo fazer a estrutura básica do template, mas estou precisando criar uma home diferenciada, onde ao inves de aparecer conteudo de blogue (post em baixo de post) eu crie vários box (espaços diferentes) para que em cada box carregue o conteúdo de uma categoria (como nesse site por ex: http://oldboysbrasil.com.br).
    Eu chego a criar o box pelo css, ele carrega na página, mas não funciona. Até abre o conteúdo mas não obedece funções como por ex o título ser link, leia mais, em quais páginas ser exibido, etc.
    Acredito que seja falta de algum código.
    Pode me ajudar?

    Reply
    • 23/08/2013 at 22:07
      Permalink

      Olá Karla! Existem mais de uma forma de fazer isso com Joomla. Eu já escrevi um post, que talvez te ajude. Outra solução é utilizar o componente K2 que te dá essa liberdade também. Não existe uma maneira rápida de fazer isso sem conhecimento prévio. Talvez um conhecimento básico de PHP seja necessário. Boa sorte!

      Reply
    • 18/09/2013 at 00:25
      Permalink

      Olá Karla, li seu comentário e como já passei por este mesmo ‘problema’, pensei em ajudar, eu utilizo um componente chamado DisplayNews, vc poderá encontrá-lo no JED. Permite que vc posicione os ‘box’ com os últimos posts em qualquer lugar do seu template, com link nas imagens, títulos, texto introdutório e o melhor, é totalmente customizável e responsivo.

      Reply
  • 12/07/2013 at 14:55
    Permalink

    Olá Elvécio!

    Encontrei este tuto agora (atrasado né?)e gpstaria trirar umas dúvidas.
    1- Esta imagem com o código PHP que vc inseriu no artigo é para ser copiada em e pode ser no Bloco de Notas ou tem que ser no DW?
    2- Este artigo serve para o JOOMLA 2.5 e 3.0, como já estamos nestas versões?
    Desculpe amigo, sou leigo no assunto, mas sou super interessado em aprender, pois sou apaixonado por JOOMLA.

    Um grande abraço e que Deus continue te abençoando.

    Reply
    • 20/07/2013 at 10:32
      Permalink

      Oi Santsam, na imagem está o código do template. Uma mistura de HTML e PHP. Para criar o arquivo, utilize qualquer editor de texto de código. Dreamweaver é uma opção. Outro que indico é o Sublime Text 2.
      Esse artigo serve para a versão 2.5. Em breve vou fazer atualizações para a versão 3.x. Abs e obrigado pela mensagem.

      Reply
  • 06/07/2013 at 12:18
    Permalink

    Ola amigo, o template que criei baseado no que vc ensinou não retorna a mensagem “Obrigado pelo E-mail.” ao enviar o email na pagina de contatos…o que poderia ser feito para resolver este problema..grato!

    Reply
    • 20/07/2013 at 10:28
      Permalink

      Renato, de modo geral essa resposta do sistema depende da extensão que for instalada. Se você estiver utilizando o formulário padrão do Joomla, insira a declaração logo acima ou abaixo de .

      Reply
  • 06/05/2013 at 03:53
    Permalink

    Olá amigo, muito bom o artigo, mas eu preciso de uma ajuda para colocar um site no ar.
    […]
    quero colocar apenas a funcionalidade do usuário publicar, nesse caso se você observar bem o código vai perceber o numero de classes que usei para estruturar essas postagens, queria saber passar essa parte com o joomla, sendo que na página index ficará apenas as postagens mais recentes (6 posts), e clicando no menu galeria teria que aparecer todas as postagens, sendo que observando os links de categorias, automaticamente quando o usuario definisse uma na hora da publicação essa mesma publicação teria que já marcada naquela categoria, sendo gerada automaticamente! é uma ajuda urgente, estou iniciando agora e estou com dificuldades nessa parte[…]

    até mais

    Reply
    • 07/05/2013 at 19:48
      Permalink

      Victor, veja se entendi bem: na página principal você quer ver 6 artigos publicados recentementes de categorias dentro da galeria. E na página Galerias, vc quer ver TODOS os artigos publicados na categoria Galeria. Sugiro que você use na home o módulo de Últimas Notícias e configure de acordo. Na parte interna, uma página Artigos > Categoria como Blog. Boa sorte!

      Reply
  • 03/05/2013 at 16:56
    Permalink

    Uma Ajuda porfavor, estou criando uma template só com os modulos, sem a div component, como faço para chamar o conteudo completo e outra pagina limpa?
    Fico no aguardo.
    Obrigado…

    Reply
    • 03/05/2013 at 17:11
      Permalink

      Edson, não entendi muito bem. Vc quer ter uma página só com módulos?

      Reply
  • 28/05/2012 at 07:53
    Permalink

    Ola poderia me ajudar
    eu já tenho um site instalado mais quero mudar ao meu gosto poderias me dizer como fazer se faz favor?

    Reply
    • 28/05/2012 at 09:03
      Permalink

      Você pode instalar templates de terceiros ou criar os seus próprios. Esse artigo trata dos primeiros passos em relação a isso. O importante é que você tenha bons conhecimentos de HTML e CSS. Boa sorte!

      Reply
  • 10/03/2012 at 20:27
    Permalink

    Boa Noite, gostaria de tirar uma duvida, eu gostaria de fazer templates personalizadas para o virtuemart, para fazer os espaço que aparecem os produtos tenho que fazer como se fosse em html mesmo e na hora de aparecer o produto exemplo em destaque vai aparecer com o fundo que escoli como background? e como faço para colocar botão de comprar personalizado embaixo dos produtos?

    Reply
    • 11/03/2012 at 19:11
      Permalink

      Edson, os templates do Virtuemart estão dentro do componente. Não é o template do Joomla que gerencia a visualização do componente. O que você pergunta tem a ver com formatação CSS. Estude uma instalação local do Joomla com Virtuemart para entender melhor como fazer essas alterações. Boa sorte!

      Reply
  • 16/02/2012 at 18:06
    Permalink

    lendo o segundo tutorial eu encontrei os arquivos, a duvida agora é outra, eu preciso criar a id da div, não sei se fui bem claro, tipo assim, div id=containeresquerda, eu preciso criar esse containeresquerda no css?
    valeu mais uma vez

    Reply
    • 08/03/2012 at 15:26
      Permalink

      Correto. Cria-se as DIVs com ID ou class e coloca a formatação no arquivo CSS.

      Reply
  • 13/02/2012 at 07:13
    Permalink

    eu gostei mais como fasso um template igual do briza downs e como postr no blog

    Reply
    • 13/02/2012 at 07:43
      Permalink

      Obrigado Alan! A melhor forma de ter um template é estudá-lo. Busque um similar no WordPress.org e entenda como ele funciona. Basicamente, depois que se tem um HTML e o CSS, basta inserir as variáveis Joomla. É necessário também saber as classe e ID’s específicas do sistema para que a formatação fique correta. Boa sorte!

      Reply
  • 08/02/2012 at 21:58
    Permalink

    Ola queridos amigos…(…)… precisa-se dominar css e html… (…)

    mas html e css… nao se aprende do dia pra noite…
    Gente primeiro busquem entender como funciona css no html…

    Abraços… a gente se fala!

    Reply
  • 31/01/2012 at 17:32
    Permalink

    uhuuuuuuuuuuuuuuuuuuu
    Consegui criar template do zero…
    entendi os como fazer reconhecer os modulos.
    Segredo esta neste codigo:
    countModules(‘nome de sua class’)) : ?>

    Não sou expert, mas gostaria de ajudar!

    Obrigado pela iniciativa deste tutorial… me ajudo muito!
    Fiquem com Deus, abraçosss!

    Reply
    • 02/02/2012 at 08:04
      Permalink

      Parabéns Luis! O countModules é uma forma de exibir ou não um pedaço de HTML associado a um módulo em sua página. Por exemplo, nas páginas internas pode aparecer um módulo na barra lateral que não existe na página principal. Utilizando o countModules, quando nenhum módulo é publicado na primeira página, a barra lateral simplesmente não aparece.
      Se quiser fazer alguma contribuição, basta enviar via comentários que eu publico com seu nome e contato. Obrigado pela dica!

      Reply
  • 24/01/2012 at 22:54
    Permalink

    estou tentando fazer um novos templete para o site da minha igreja mais nao entendi a parte que vc diz.

    ” 3.Comece a montar o seu template normalmente, como se fosse um arquivo HTML comum.”

    eu monto ele em fireworks e fatio ele ou monto ele normal em html pelo dreamweaver.

    Reply
    • 25/01/2012 at 06:32
      Permalink

      Rodrigo, o importante é você ter um arquivo HTML com o básico de sua página, sem a navegação. Se você prefere usar Fireworks ou Dreamweaver para criar este arquivo HTML, é uma questão de preferência.

      Reply
  • 11/01/2012 at 18:37
    Permalink

    Ola, primeiramente parabens pela explicação…

    estou desenvolvendo layout para estetica, bem limpo…
    unico problema a home não tem negocio de barra direita ou esquerda… unica coisa vai ter menu superior, mais 4 quadrados na home tera previa conteudo e rodapé…
    como faço isso?

    Reply
    • 17/01/2012 at 15:53
      Permalink

      Não entendi sua dúvida, Luis. Se não estou enganado, basta você atribuir os módulos de conteúdo às áreas que você quer exibir na home page. Boa sorte!

      Reply
  • 04/01/2012 at 06:39
    Permalink

    Caro Helvecio,
    Estou tentando criar um site (simples) com o joomla 1.7 mas estou apanhando bastante. O amigo sabe me indicar outra plataforma ‘menos complexa’ ou sabe me dizer se as versoes anteriores do joomla (1.5 e 1.6) sao mais faceis para usuarios como eu (sem conhecimento)?

    Obrigado!

    Reply
    • 04/01/2012 at 08:53
      Permalink

      Valdir, Joomla é uma plataforma rápida para se construir um site. O básico é:

      • - instalar sem dados de exemplo
      • - criar categorias (quando há necessidade)
      • - criar artigos nessa categoria ou na categoria “Sem Categoria”
      • - criar itens de menu para os artigos
      • - criar um item de menu para o fale conosco

      Você poderia especificar melhor o por que de você estar “apanhando”? Qual tipo de site você quer criar? Não existe plataforma “menos complexa”. É preciso usar algum tempo para entender o básico de qualquer sistema para poder aproveitá-lo.
      Boa sorte e continue com Joomla!

      Reply
  • 08/12/2011 at 13:10
    Permalink

    Helvecio.
    Obrigado mais uma vez, tudo perfeito agora. Layout funcionando 100% inserindo 2 Jquery, sendo um no menu.
    Você deveria fazer como o João Faraco, que fornece conteúdo de Design também, e colocar um botão aqui no site para que as pessoas “paguem um chopp” pra você… heheh … Abraço

    Reply
    • 08/12/2011 at 20:15
      Permalink

      Oi Daniel! Bom saber que está tudo dando certo. Parabéns!
      E valeu pela dica. Vou colocar e ver o que acontece. Abs.

      Reply
  • 08/12/2011 at 10:01
    Permalink

    Helvecio.
    Primeiramente obrigado , consegui resolver meus problemas com o jquery que inseri, utilizando caminhos absolutos, como você sugeriu!

    A coluna central é onde vai ser mostrado todo o conteúdo do site certo? Coloquei assim:

    Porém ele esta criando um margin top e bottom, na div conteudo, não entendo o que esta contecendo. Fui atrás do css do sistema para ver se tinha algum conflito de tags, e não achei. O que pode ser?
    Abraços.

    Reply
    • 08/12/2011 at 10:57
      Permalink

      Oi Daniel. Bom saber que a dica que eu dei foi útil. Para verificar problemas com o CSS, sugiro que você utilize o Firebug no Firefox ou as ferramentas de desenvolvedor do Safari ou do Chrome que ficam no menu Ferramentas (Tools). São uma ajuda fantástica quando se tem problemas com CSS. Com elas é possível ver o código, alterá-lo temporariamente enquanto se vê o resultado na tela. E resolver problemas desse tipo. Boa sorte!!

      Reply
  • 20/10/2011 at 23:43
    Permalink

    opa blz? o post ajudo MUITO até um certo ponto lol
    fiz blz o template pra um site simples html e css, mas tenho algumas duvidas:

    1- como faço pra colokar o form de login num site criado por mim e fazer ele funcionar pro joomla?

    2- Quando vc faz login num template padrao, em cada div aparece um ‘caderninho’ (o frontend editor) pra vc editar o texto, colocar imagens e etc… com esse tutorial (pelo menos aki)não aparece caderninho nenhum (e seria bem util se ele tivesse la já que é pra pessoas leigas editarem)

    3- como faço pra inserir um arquivo .js externo no template? tentei de varias formas e ele simplesmente ignora o script…
    (tentei ser o mais claro possivel)
    axo que é só isso por enquanto lol
    obrigado pelo tuto o/ mto bom

    Reply
    • 30/10/2011 at 00:28
      Permalink

      Oi Werner!
      Respondendo suas perguntas:

      Você vai em Extensões > Administrar Módulos, clica em novo e escolhe o formulário de login. Basta atribuir uma posição e publicar para que ele apareça em seu site.
      Vou testar para ver o que pode estar acontecendo de errado
      Cria um link dentro do head do seu template

      Espero ter ajudado. Boa sorte!

      Reply
  • 27/09/2011 at 17:58
    Permalink

    Olá Helvécio,
    Estou começando a usar a versão 1.7, encontrei seu blog quando procurava sem sucesso uma solução para algo estranho que está acontecendo.
    Talvez vc saiba o que acontece e possa ajudar a mim e a mais alguém com o mesmo problema.

    As divs de colunas criadas no meu tema e as criadas pelo sistema na página principal, estão ficando aninhadas, ou seja, uma dentro das outras fazendo com que as colunas não sejam mostradas.

    Se tiro a linha do componente as divs do tema voltam no lugar correto. Porém fico sem os artigos da página principal.

    segue a url: http://74.86.13.216/~wwwsimep

    Já viu isso?

    Reply
    • 27/09/2011 at 23:39
      Permalink

      Olá Marcelo,
      Até a versão 1.5 o layout da home (e de qualquer página que usasse o layout de blog) o sistema gerava uma tabela que ia crescendo em linhas e colunas conforme se configurava nos parâmetros do item de menu.
      A partir da versão 1.6 o uso de tabelas para organizar o conteúdo foi substituido por DIVs. Ou seja, agora não basta apenas modificar os parâmetros do item de menu. Também é necessário criar classes CSS para formatar essas configurações.
      Espero ter ajudado. Vou preparar um post sobre esse assunto e publicarei em breve.
      Abraços!

      Reply
  • 21/09/2011 at 14:26
    Permalink

    Muito bom, ótimo tutorial. Ajuda bastante, em especial neófitos em joomla, como eu.

    Obrigado!

    Reply
    • 24/09/2011 at 15:38
      Permalink

      Sempre bom saber que estou ajudando. Esse post foi feito a pedido de um leitor. Dúvidas são sempre bem vindas!

      Reply
  • Pingback: Criando template para Joomla 1.7 – parte 2 em design+

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>