Template Tutorial

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&amp;Itemid=3>
                <LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_content&amp;task=section&amp;id=1&amp;Itemid=2>
                <LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_weblinks&amp;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&amp;Itemid=3>
        <LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_content&amp;task=section&amp;id=1&amp;Itemid=2>
        <LI><A class=mainlevel-nav xhref="http://localhost/testes/tutorial/index.php?option=com_weblinks&amp;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">
      &copy; 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.