CRIANDO TEMPLATES
COM
E
BLANK TEMPLATE
FOR JOOMLA!
Criando um Template
Nessa etapa iremos começar a criação de nosso template e para isso usaremos o Blank Template.
Insumos
Joomla! 3.x instalado sem exemplo de conteúdo; Saber operar o Joomla! 3.x; e
Acesso à internet. Download e Preparação
Acesse o site http://blank.vc/ e faça download da última versão do modelo em branco.
Descompacte o arquivo e renomeie a pasta para modelo1 ou qualquer nome de sua escolha. O nome pode ser alterado posteriormente.
Alteração do Manifesto
Abra o arquivo templateDetails.xml no Sublime Text ou em outro editor de texto e preencha todas as informações do manifesto xml, referentes ao template modelo1.
Idiomas
Perceba que existem referências à arquivos de idiomas no templateDetails.xml: (en-GB.tpl_templatename.ini, de-... etc...). Os arquivos ficam no diretório
/language.
Pacote padrão Blank Template
Altere no templateDetails.xml, de forma a ficar apenas: en-GB.tpl_modelo1.ini e pt-BR.tpl_modelo1.ini.
Apague os arquivos desnecessários do diretório languages e crie o arquivo pt-BR baseado no en-GB, traduza as constantes e salve-o.
Imagem do Template
O arquivo que representa o template é o template_preview.png. Se o seu template será desenvolvido com base em um layout, basta printar a tela criar uma imagem de 206px – por 150px | e salvar na raiz do template, com o nome de template_preview.png. Outra opção é criar a imagem após desenvolver o template.
Favicon – Ícone do template
Para susbstituir o favicon padrão do template, basta criar um arquivo .ico de 16px x 16px, nomeando-o de favicon.ico.
Diretório PSD
Opcionalmente o template poderá possuir um diretório psd com os arquivos gráficos, relevantes.
Posições de Módulos
Para implementar um menu, caixa de pesquisa, caminho de migalhas e o login, por exemplo, precisamos definir as posições de módulos do template. Ou seja, os pontos onde os respectivos módulos devem ser exibidos.
Estas posições devem ser definidas no arquivo templateDetails.xml para que sejam listadas no Gerenciador de módulos do backend.
Abra o arquivo templateDetails.xml com um editor de sua escolha e procure a tag <position>.
Uma posição chamada debug, já foi pré-definida. Copie (ctrl+c) e cole (ctrl+v) o
seguinte código acima da posição debug:
<position>menu</position> <position>search</position>
<position>breadcrumbs</position> <position>sidebar</position>
Os nomes são auto-explicativos (convenção de nomenclatura exemplar). Por exemplo: o módulo de login será carregado na posição sidebar.
Caso seja necessário criar nova posição de módulo no template, após sua instalação, faremos diretamente no arquivo index.php, sem instanciarmos o templateDetails.xml.
Para instanciarmos, basta digitar o nome da posição no Gerenciador de Módulos do backend, como um “posição personalizada”.
A(s) posição(ções), será (rão) gravada(as) diretamente no banco de dados, sendo listada normalmente no backend do Joomla.
Artigo de Exemplo, Menu e Módulos Artigo de Exemplo
Vamos criar um artigo para que o mesmo apareça em nosso template. Navegue pelo menu superior > Conteúdo > Gerenciador de artigo > "Novo". Crie um artigo simples com 02 (dois) parágrafos. Caso esteja sem inspiração visite o site http://www.lerolero.com/ e crie o artigo. O título do artigo será "Artigo 1" e o mesmo deverá ser um destaque.
Menu
Agora, criaremos um menu de dois níveis. Navegue pelo menu superior > Menus > Main Menu e crie dois novos ítens de menu, do tipo Artigo único, apontando para o artigo criado anteriormente.
Certifique-se de que o primeiro item é um item de menu pai do tipo "URL externa" e digite no campo link, uma cerquilha (#). Esta tag do html significa que o link será um “link cego”. É fundamental o uso de link cego para o perfeito funcionamento de menu dinâmico com Bootstrap.
Módulo de Menu
Vamos publicar o módulo de menu na posição correta. Nevegue pelo menu superior > Extensions> Module Manager> Main Menu e mude a posição para menu. Nas opções do módulo defina “Mostrar itens e sub-menu para (sim)” e dessa forma teremos um menu do tipo drop down. No campo "Classe Sufixo Menu” digite nav. Perceba o espaço em branco antes de nav (Aperte a tecla espaço e depois digite nav). Esta é a classe adicional que fará o efeito visual no template. Associe o módulo à todos os menus, publique-o e Clique em Salvar e Fechar.
Módulo de Busca
Para melhorar a usabilidade uma função de busca na barra de navegação é muito bem-vinda. Lembre-se de um padrão básico do Webdesign: A barra de busca (pesquisa) deve ficar à direita e acima do site.
A posição para o módulo de busca foi criada no template, porém, precisamos criar e publicar o módulo para que o resultado seja visualizado. Navegue pelo menu superior > Extensões > Gerenciador de Módulo. Clique em "Novo" e
selecione "Search". O título do módulo pode ser "Busca", deve ficar oculto e a posição deve ser search, de acordo com o template. Associe o módulo à todos os menus, publique-o e Clique em Salvar e Fechar.
Breadcrumbs
O caminho de migalhas é um módulo que orienta os visitantes do site, demonstrando o design de navegação.
Navegue pelo menu superior > Gerenciador de Módulos > Clique no botão "Novo" e escolha a opção "Breadcrumbs". Escolha o título, pode ser "Breadcrumbs" e mantenha oculto. A posição é breadcrumbs, em opções básicas escolha uma barra ( / ) como separador de texto, associe à todos os menus, publique e clique em Salvar e Fechar.
Módulo de Login
Navegue pelo menu superior > Gerenciador de Módulos > Clique no botão "Novo" e escolha a opção "Login Form". Escolha o título. A posição é sidebar, associe à todos os menus, publique e clique em Salvar e Fechar.
Concluímos as operações de backend.
Usando Bootstrap no Template
Bootstrap é um framework que possui vários recursos embutidos, basicamente, através de classes CSS e bibliotecas Javascript.
Com Bootstrap podemos usar Less, que pode ser resumido enquanto uma folha de estilos dinâmica, HTML 5 e CSS 3.
O desenvolvimento de um template com Bootstrap proporciona enorme ganho de tempo durante a fase mais complexa de um projeto com Joomla.
No módulo 2 do Curso de Criação de Templates para Joomla com Bootstrap, estudamos a fundo o Bootstrap. Sugiro dar uma olhada novamente caso esteja com dúvidas ou fazer o curso, caso ainda não o tenha feito.
Instanciando o Bootstrap no Template
Após o trabalho no back-end ajustando os módulos, chegamos à parte divertida: A codificação.
O bootstrap será instanciado no template através das chamadas às diversas classes, bibliotecas javascripts e folhas de estilos, existentes no template base que estamos usando, o Blank Template.
Abra o arquivo index.php do template, que está localizado em templates/modelo1/ e insira o código demonstrado na imagem abaixo.
Estilizando o template com as classes do Bootstrap
Vamos ao estudo do código.
O objetivo desse trecho de código é mostrar o nome da página, o menu e a busca, lado a lado.
O lado esquerdo deve exibir o nome do site seguido pelo menu e à direita uma caixa de busca.
Começamos o código com um comentário, para melhor orientação no arquivo. Declaramos a div class=”container” que será a responsável por compreender todo o código relacionado ao conteúdo de nosso site.
Bootstrap nos permite criar templates responsivos (layout fluído) ou não, (layout com tamanho fixo). O que irá determinar o tipo de layout, será o escopo do projeto.
Para fazer uso adequado da “grid”, será necessária uma div class=”row” e dentro dela a declaração de divs com as classes navbar span12.
A classe span12 está pré-definida no Bootstrap para estender a navagação por toda a largura do ecrã (Layout fluído). A tag div com a classe navbar-inner é usada para aplicação de fundos, bordas e distâncias.
Os três ícones identificados pelas tagas span class=”icon-bar”, aparecem apenas em tablets e telefones. A classe btn btn-navbar, a qual ele está sublordinado, faz com que assumam aparência de botões e data-toogle=”colapse” permite a expansão se o menu e a busca não estiverem visíveis, pelo plugin collapse.
O próximo trecho realiza o link para o sitename. A classe brand fornece o estilo necessário e a API do Joomla através da variável pré-definida $app lê e mostra o nome do site determinado nos parâmetros de configuração. O nome do site é exibido em desktops, tablets e telefones.
O menu e a pesquisa devem ser recolhidos em dispositivos móveis. Por isso, eles serão englobados por uma div da classe nav-colappse juntamente com uma segunda classe row.
Este é o alinhamento correto depois do menu à esquerda e caixa de pesquisa à direita. O botão previamente definido e o plugin collapse englobam a div e ela pode ser desdobrada com um clique.
Acesse o front-end do site e atualize-o (ctrl+f5). Você deve visualizar no navegador, algo parecido com a imagem abaixo:
Classes do Bootstrap aplicadas ao template
Perceba que o menu drop-down não está funcionando, porém todo o topo está estilizado.
Menu Javascript
Para obter os movimentos de um menu drop-down, precisaremos da biblioteca JavaScript jQuery, instanciada pelo trecho de código abaixo, inserido antes da tag </body>.
Em geral, o instanciamento do script javascript é efetuado no início da página. Porém, para um melhor desempenho, o javascript deve ser chamado imediatamente antes da tag de fechamento do corpo da página, identificada pela tag </body>.
Como esse código funciona? O Joomla mostra os ítens de menu em uma lista desordenada <ul> com seus elementos <li> definidos pela classe pai se outra lista desordenada segue. Em outras palavras, se um sub-menu <li> existe. Com a ajuda da classe pai usando a classe dropdown do JavaScript, podemos criar menus dinâmicos. Os sub-menuss devem descender de um ítem de menu pai.
Precisamos ainda, uma classe para a tag <a> links direto do primeiro nível. Essa classe é chamada dropdwn-toogle. Esses links também podem receber o atributo data-toogle com o valor dropdown e, adicionalmente, possuem uma seta para baixo <b class="caret"> </ b>.
A lista ordenada do segundo sub-nível também é fornecida com a classe dropdown-menu.
Após a inserção do código instanciando o javascript, temos o resultado no front-end.
Menu dropdown funcionando
Menu CSS
Será preciso um ajuste para melhorar o CSS do menu. Localize e abra o arquivo template.css que está em /templates/modelo1/css.
Escreva o código abaixo: .navbar-inner .row {margin:0;}
Para dispositivos móveis, tablet ou telefone, é interessante que tenhamos algum espaçamento.
Escreva o código abaixo: ul.menu {padding:20px0;}
Você pode modificar de acordo com: @media (max-width: 480px), @media (max-width: 767px) and @media (min-width: 768px) and (max-width: 979px).
Breadcrumbs
Um pouco de marcação para o caminho de migalhas e o site deixa uma impressão positiva para os visitantes. Adicione as linhas de código da imagem abaixo ao arquivo index.php, abaixo da Navbar e veja o resultado no fron-tend do site.
Chamada ao caminho de migalhas
Resultado front-end
Conteúdo e Sidebar
É hora de definir a saída para o conteúdo e a barra lateral. Adicione o código da imagem abaixo no arquivo index.php, depois da chamada ao módulo Breadcrumbs e observe o resultado no front-end.
Chamada ao conteúdo e sidebar
Rodapé
Finalmente, vamos ao rodapé do template. Adicione o código da imagem abaixo na index.php, após a chamada ao conteúdo e visualize o resultado no front-end.
Chamada ao rodapé
