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!

44 comments

  1. Rafael disse:

    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

    • Helvecio disse:

      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!

  2. Karla disse:

    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?

    • Helvecio disse:

      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!

    • Luis Carlos disse:

      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.

  3. Santsam disse:

    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.

    • Helvecio disse:

      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.

  4. renato disse:

    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!

    • Helvecio disse:

      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 .

  5. Victor disse:

    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

    • Helvecio disse:

      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!

  6. Bruno disse:

    Muito bom! me ajudou muito.

  7. Edson Ramos disse:

    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…

  8. kamba disse:

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

    • Helvecio disse:

      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!

  9. Edson disse:

    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?

    • Helvecio disse:

      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!

  10. wallace disse:

    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

  11. alan disse:

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

    • Helvecio disse:

      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!

  12. Luis disse:

    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!

  13. Luis disse:

    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!

    • Helvecio disse:

      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!

  14. Rodrigo disse:

    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.

    • Helvecio disse:

      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.

  15. Luis disse:

    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?

    • Helvecio disse:

      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!

  16. Valdir disse:

    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!

    • Helvecio disse:

      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!

  17. Daniel disse:

    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

  18. Daniel disse:

    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.

    • Helvecio disse:

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

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

    • Helvecio disse:

      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!

  20. Marcelo disse:

    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?

    • Helvecio disse:

      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!

  21. ARM disse:

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

    Obrigado!

  22. [...] Se você não leu a primeira parte desse tutorial, clique aqui. [...]

Deixe uma resposta

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