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!
Baixe o pacote de instalação meu_template com todos os arquivos desse tutorial e siga os passos a seguir.
- 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.
- Dentro dela crie pastas chamadas css, imagens, html. Dentro de cada uma crie um arquivo index.html em branco.
- Comece a montar o seu template normalmente, como se fosse um arquivo HTML comum.
- 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.
- Quando terminar, teste o arquivo HTML em alguns navegadores. Corrija os problemas, se houver, antes de seguir para o próximo passo.
- Quando terminar, salve esse arquivo como index.php na raiz na pasta meutemplatejoomla.
- Abra esse arquivo em qualquer editor HTML.
- 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
- A declaração <jdoc:include type=”head” /> carregará dinamicamente o título da página, scripts, tags meta entre outros.
- 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é.
- Na área de navegação, coloque a seguinte declaração: <jdoc:include type=”modules” name=”nav” />
- Na área da coluna equerda, insira <jdoc:include type=”modules” name=”esquerda” />
- Ná coluna central insira <jdoc:include type=”component” />
- Na área da coluna direita insira <jdoc:include type=”modules” name=”direita” />
- Finalmente, na área do rodapé insira <jdoc:include type=”modules” name=”rodape” />
- 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.
- 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.
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
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!
Muito bom! me ajudou muito.
Obrigado Bruno. Fico feliz em saber disso.
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…
Edson, não entendi muito bem. Vc quer ter uma página só com módulos?
Ola poderia me ajudar
eu já tenho um site instalado mais quero mudar ao meu gosto poderias me dizer como fazer se faz favor?
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!
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?
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!
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
Correto. Cria-se as DIVs com ID ou class e coloca a formatação no arquivo CSS.
eu gostei mais como fasso um template igual do briza downs e como postr no blog
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!
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!
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!
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!
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.
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.
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?
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!
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!
Valdir, Joomla é uma plataforma rápida para se construir um site. O básico é:
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!
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
Oi Daniel! Bom saber que está tudo dando certo. Parabéns!
E valeu pela dica. Vou colocar e ver o que acontece. Abs.
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.
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!!
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
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!
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?
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!
Muito bom, ótimo tutorial. Ajuda bastante, em especial neófitos em joomla, como eu.
Obrigado!
Sempre bom saber que estou ajudando. Esse post foi feito a pedido de um leitor. Dúvidas são sempre bem vindas!
[...] Se você não leu a primeira parte desse tutorial, clique aqui. [...]