Vou tentar passar algumas técnicas para a construção do layout utilizando o joomla. A minha intenção com esse tutorial não é ensinar html, css e nem como desenhar um layout e sim como adaptar o layout para os padrões joomla.
Olá esse é o meu segundo tutorial, o primeiro faz um bom tempinho e servia (serve) para a instalação, na época ainda não existia o joomla, então o mesmo ainda era pra mambo.
Agora vou tentar passar algumas técnicas para a construção do layout utilizando o joomla. A minha intenção com esse tutorial não é ensinar html, css e nem como desenhar um layout e sim como adaptar o layout para os padrões joomla.
Vou utilizar como exemplo um template já todo pronto em html, esse exemplo de layout foi retirado do site, (http://www.zymic.com/) se alguém quiser lá tem vários templates prontos todos de graça, e com ótima qualidade, é uma boa também para começar a fazer o seu primeiro template para o joomla.
Será utilizado como base o joomla 1.0.11.
Vamos deixar a ladainha de lado e vamos começar a por a mão na massa.
Primeiramente o que a pessoa deve ter em mente é o seguinte:
- Análise o template e veja onde cada módulo do joomla possa se adaptar.
- Análise o que é template e o que é joomla. Ou seja, template será tudo que se repetirá nas outras páginas, o que é joomla será dinâmico, algumas partes aparecem, e em outras não necessariamente.
Vou fazer uma leitura de como esse template será adaptado.
Veja que, o que está em azul será manipulado pelo joomla e o que está
em verde será template, ou seja, dificilmente mudará.
Como esse é um template pronto, todo o html já está feito e aliás muito bem feito, foi todo feito utilizando técnicas de tableless.
Agora vamos começar a adaptar o nosso layout.
Primeiramente o que devemos fazer é seguinte, criar uma pasta dentro da pasta template do joomla. No nosso caso vamos criar uma pasta chamada, zymic (poderia ser qualquer nome).
Dentro dela terá os seguintes arquivos e pastas:
index.html - Apenas por segurança esse arquivo é criado, de forma que a pessoa não tenha acesso ao conteúdo da pasta
index.php – Aqui será onde colocaremos o nosso html.
templateDetails.xml – Arquivo para o uso do joomla e documentação.
template_thumbnail.png – Miniatura do site, para ser visualizada quando se for escolher o template.
/images/ - Pasta com as imagens utilizadas no template.
/css/ - Pasta contendo o css do nosso template.
Normalmente o que eu faço é o seguinte, copio uma pasta de template do joomla para outro diretório, renomeio ela e coloco-a de volta de forma que não precise ficar criando os mesmos arquivos. Isto não significa que você terá que fazer isso também, faço isso mais por prática.
Copiada a pasta, modifique o arquivo templateDetails.xml com os seus dados. Pronto agora você já pode ir até a administração e selecionar o seu template. Ele ficará igual ao antigo, mas vamos começar a alterá-lo agora. Não se preocupe pois no final do tutorial irei disponibilizar, todos os arquivos.
Esse será o nosso primeiro código.
Repare que entre as tag’s body não têm-se nada.
Vamos começar a colocar nosso código.
Agora iremos inserir no mesmo arquivo css:
html {
height: 100%;
font:normal normal 12px Arial, Helvetica, sans-serif;
background-color: #282828;
color: #383838;
text-align: center;
}
body {
height: 100%;
text-align: center;
margin: 20px auto 0 auto;
text-align: left;
width: 703px;
background-color: #282828;
color: #383838;
}
html > body {
background: #282828 url('/../images/bg.gif') repeat-y center;
}
Até aqui nada demais...
Estou estilizando font’s e outros atributos...
Agora o nosso html a primeira coisa a ser feita é o topo onde se encontra o logo da empresa.
Vou utilizar uma forma semântica de forma que nosso logo será o elemento mais importante da nossa página. O código é o seguinte.
HTML:
<h1><a xhref="/" mce_href="/">Zymic os melhores templates Free.</a></h1>
CSS:
h1 {
text-indent:-5000em;
overflow:hidden;
width:703px;
height:121px;
background:url('/../images/header.jpg') no-repeat;
margin:0;
}
h1 a {
display:block;
height:121px;
}
Pronto está criado o topo do site.
Agora vamos construir o menu superior, esse menu é em aba, dará um pouquinho de trabalho, mas estamos ai pra isso.
Coloco esse código:
<?php mosLoadModules('top'); ?>
A leitura desse código seria algo assim: Aparecer os módulos que estão na posição top;
Não esquece de ir na administração do site, ir em módulos e selecionar para que o menu top, seja exibido na posição “top”.
Quando você atualizar o site ele retornará o menu assim:
<TABLE class=moduletable cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD>
<UL id=mainlevel-nav>
<LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php>
<LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_contact&Itemid=3>
<LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_content&task=section&id=1&Itemid=2>
<LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_weblinks&Itemid=23>
</UL>
</TD>
</TR>
</TBODY>
</TABLE>
Repare que a estrutura do menu foi criada dentro de tables, eu não quero isso, pois quando crio um template faço de forma que fique mais dentro o possível dos padrões Web. Então o que fazer para mudar isso?
Adicione um parâmetro a chamada do módulo:
<?php mosLoadModules('top',-1); ?>
Agora ele retornou o menu assim:
<UL id=mainlevel-nav>
<LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php>
<LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_contact&Itemid=3>
<LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_content&task=section&id=1&Itemid=2>
<LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_weblinks&Itemid=23>
</UL>
Repare que ele não está mais utlizando a estrutura de tabelas, apenas as formatações do menu mesmo.
Você pode usar os seguintes atributos para os módulos:
<?php mosLoadModules('top',); ?> - Esse seria o default, que chama tabelas;
<?php mosLoadModules('top',-1); ?> - Esse serve para voltar só o módulo, sem tag’s a mais;
<?php mosLoadModules('top',-2); ?> - Esse serve para voltar como xhtml;
<?php mosLoadModules('top',-3); ?> - Esse serve para retornar valores, para se fazer cantos arredondados;
Agora vai da sua criatividade. Utiliza o que lhe for mais conveniente.
Você também pode dar uma olhada no arquivo /includes/frontend.html.php encontrará os códigos e se quiser fazer algum hack no retorno dos valores dos módulos esse é o arquivo certo.
Observe também que a classe do módulo está com um –nav, isso foi inserido na administração do módulo, você pode trocar esse valor, de forma que você possa ter o mesmo menu com estilizações diferentes.
Agora vamos começar a estilizar o nosso menu.
ul#mainlevel-nav{
list-style:none;
margin:0;
padding:0;
height:33px;
width:703px;
background: #282828 url('/../images/top_nav_right_bg.gif') no-repeat bottom right;
}
ul#mainlevel-nav li{
float:left;
display:block;
background-image:none;
margin:0;
padding:0;
}
ul#mainlevel-nav li a, ul#mainlevel-nav li a:visited{
background: #282828 url('/../images/top_nav_small_tab.gif') no-repeat;
height: 23px !important;
height: 33px;
width: 131px;
padding: 10px 0 0 0;
text-align: center;
font-size: 14px;
color: #515151;
text-decoration: none;
display: block;
}
ul#mainlevel-nav li a:hover{
background: #282828 url('/../images/top_nav_small_tab_hover.gif') no-repeat;
}
Veja a imagem da configuração do módulo:
Pronto menu estilizado.
Agora vamos colocar aquela imagem, como se fosse um header.
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/zymic/images/slogan_box.gif" alt="slogan box" />
Repare que utilizei esse comando <?php echo $mosConfig_live_site;?> ele serve para imprimir o path (caminho) do site, com isso quando mudar o nosso site para o servidor, não precisa ficar alterando caminhos.
Agora o css, do módulo de estatísticas:
Originalmente não existe um módulo igual a este, pelo menos não conheço mas nada que não possa ser adaptado de alguma coisa que já exista.
HTML
<ul id="statsbar">
<li id="comments">10,232 Comments</li>
<li id="hits">298 Unique Hits Today</li>
<li id="online">65 People Online</li>
</ul>
CSS
ul#statsbar {
background: #282828 url('/../images/stats_bar.gif') no-repeat;
height: 39px;
width: 703px;
margin: -3px 0 0 0;
padding: 0;
color: #fff;
}
ul#statsbar li {
list-style-type: none;
float: left;
display: block;
margin: 0;
padding: 11px 0 0 0;
}
ul#statsbar li#comments {
padding-left: 35px;
background-image:none;
}
#statsbar li#hits {
padding-left: 45px;
background-image:none;
}
#statsbar li#online {
padding-left: 45px;
background-image:none;
}
Agora vamos começar a estruturar as partes mais dinâmicas do site.
Como disse não será um tutorial ensinando como fazer layout’s e sim template, então não vou detalhar tudo apenas que julgar importante para a criação de templates pro joomla.
Criei as seguintes tag’s html:
<div id="conteudo">
<div id="left"></div>
<div id="right"></div>
</div>
Com os seguintes css’s:
#left{
width:218px;
height:200px;
float:left;
background-color: #fff;
color: inherit;
}
#right{
width:485px;
height:200px;
float:right;
background-color: #fff;
}
Agora vamos começar a inserir os módulos:
Entre as tag´s left colocarei esse código:
<div id="left"><?php mosLoadModules('left',-2); ?></div>
O -2 é a forma xhtml de chamar módulos.
Configurações do módulo:
CSS:
div.moduletable {
}
div.moduletable h3 {
font-size: 12px;
font-weight: normal;
background-color: inherit;
color: #fff;
margin: 0;
padding: 5px 0 0 15px;
background-image: url('/../images/left_content_header.gif');
line-height: 32px;
width: 218px;
text-align:left;
}
ul#mainlevel{
margin: 0;
padding: 0;
}
ul#mainlevel li {
list-style-type: none;
display: block;
margin: 0;
padding:0;
background-image:none;
text-align:left;
height: 28px;
}
ul#mainlevel li a{
background-image: url('/../images/left_nav_link_bg.gif');
color: #000;
text-decoration: none;
display: block;
height: 22px !important;
height: 28px;
padding: 6px 0 0 20px;
}
ul#mainlevel li a:hover{
background-image: url('/../images/left_nav_link_bg_hover.gif');
}
Dentro da div right vamos colocar a imagem da laranja, nada demais.
Agora colocaremos aquela barra onde está escrito: Welcome to yoursite.com
Porém vamos inserir o pathway, ele faz uma navegação do site, nada demais.
HTML:
<div id="pathway"><?php mosPathWay(); ?></div>
CSS:
#pathway{
font-size: 12px;
font-weight: normal;
color: #f9ffff;
margin: 0;
background: #fff url('/../images/main_content_header.gif') no-repeat;
line-height: 32px;
width: 470px !important;
width: 485px;
padding: 5px 0 0 15px;
text-align:left;
}
Vamos configurar o joomla de forma que ele fique igual ao template original.
Na administração entre em, Menu > mainmenu, e escolha o primeiro item, no caso Início.
Vou fazer um resumão. Não deixei exibindo nada, configurei para aparecer três notícias principais, nenhum introdução, 1 coluna, links 0.
Pronto agora vamos estilizar de forma que fique igual ao nosso layout.
Obs: Eu apenas alterei as tag’s que já existiam no css original.
CSS:
td.contentheading {
padding:5px 0 0 2px;
background-color:#f0f0f0 !important;
background-color:none;
}
a.contentpagetitle, a.contentpagetitle:visited {
padding:0 0 0 10px !important;
padding:5px 0 2px 10px;
height:30px;
background: #f0f0f0;
width:478px;
font:bolder normal 18px Arial, Hevlvetica, sans-serif;
color:#161616;
}
a.contentpagetitle:hover {
padding:0 0 0 10px !important;
padding:5px 0 2px 10px;
height:30px;
background: #f0f0f0;
width:478px;
font:bolder normal 18px Arial, Hevlvetica, sans-serif;
color:#161616;
}
Por fim, iremos fazer o rodapé do site.
HTML:
<div id="rodape">
© Copyright 2006 -
<a xhref="http://www.zymic.com/ Templates</a>
By
<a xhref="http://www.zymic.com/>
- All Rights Reserved</div>
</div>
CSS:
#rodape{
clear:both;
width: 701;
height: 26px;
padding: 10px 0px 0px 0px;
background: #383838;
border: 1px solid #fff;
border-top: 0;
color: #fff;
text-align: center;
margin: 0;
}
Por favor, agora aguardo as críticas os elogios e as correções de português.
E também sinta-se a vontade para adicionar mais conteúdo a este tutorial. Na verdade essa é a primeira parte desse material, pretendo continuar o mesmo, utilizando recursos mais avançados.
Detalhe:
Não fiz toda a estilização do módulo de últimas notícias, pois a idéia aqui é você aprender a fazer e não pegar o template para usar.
Mas se alguém quiser fazer a alteração e enviar o arquivo corrigido, será dado os créditos merecidos.
Eventualmente alguma coisa possa não ter ficada idêntica ao layout, mas como disse antes a idéia é passar o conceito.
Segue todos os arquivos para download, inclusive o SQL, da minha instalação.
| < Anterior | Próximo > |
|---|
Aparentemente este não é um tutorial para iniciantes em construção de templates, correto?
Senti falta de muitas explicações, as mais simples, do tipo: Você deve escrever o código CSS dentro do arquivo .css que está dentro do diretório /css do seu template... deve ser escrito na ordem tal para tal finalidade...
Um abraço!
So para entender, o index.php você tirou da onde?
Quando vc fala em modificar o arquivo templateDetails.xml, como se faz isto?
Achei interessante este seu tutorial, mas para nós iniciantes falta "pega" entre os assuntos.
Mas esta legal mesmo.
Mesmo pra que tem alguma noção ficou meio confuso.
mas valeuu!!
muito confuso!
Não e pra iniciantes!
O tutorial não é "teórico" e sim prático, por isso a dificuldade de entendimento de alguns.
Obrigado.
Muito Obrigado!
Faltou só umas dicas, pra galera iniciante: antes de tentar entender php, precisa estudar html, sql e hosting, pra realmente entender o funcionamento do Joomla, ou qualquer outro cms. Não basta tentar entender o código de um dia pro outro, tipo, "Oi, vi na internet, achei legal e como faz?".
leva tempo até entender, e no mais, é muito boa essa iniciativa de tutoriais em português. Um abraço e boa sorte
Acredito que haja tuto para todos os niveis, é só procurar, um dia ele tambem nao sabia e hoje faz ate tuto que nós estamos achando confuso..
risos
Obrigado mesmo...
abraços e sucesso a todos nós..
Aí voce matou o TUTORial.
complicadíssimo!