Manual PTBR

Joomla.com.
br - Joomla Brasil
Tutorial para Templates

Contribuição de Ronildo Costa
15 de setembro de 2006
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á
http://www.joomla.com.br Fornecido por Joomla! Produzido em: 15 August, 2007, 18:43

Joomla.com.br - Joomla Brasil
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;

#statsbar li#hits {
padding-left: 45px;
#statsbar li#online {
padding-left: 45px;
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;
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;
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;
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.

Manual PTBR

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual PTBR

Uploaded by

Copyright:

Available Formats

Joomla.com.

Tutorial para Templates

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.

Vou fazer uma leitura de como esse template será adaptado.

http://www.joomla.com.br Fornecido por Joomla! Produzido em: 15 August, 2007, 18:43

em verde será template, ou seja, dificilmente mudará.

Agora vamos começar a adaptar o nosso layout.

Dentro dela terá os seguintes arquivos e pastas:

index.php &ndash; Aqui será onde colocaremos o nosso html.

templateDetails.xml &ndash; Arquivo para o uso do joomla e documentação.

/images/ - Pasta com as imagens utilizadas no template.

/css/ - Pasta contendo o css do nosso template.

Esse será o nosso primeiro código.

Repare que entre as tag&rsquo;s body não têm-se nada.

Vamos começar a colocar nosso código.

Agora iremos inserir no mesmo arquivo css:

font:normal normal 12px Arial, Helvetica, sans-serif;

margin: 20px auto 0 auto;

http://www.joomla.com.br Fornecido por Joomla! Produzido em: 15 August, 2007, 18:43

html > body {

background: #282828 url(../images/bg.gif) repeat-y center;

Até aqui nada demais...

Estou estilizando font&rsquo;s e outros atributos...

<h1><a xhref="/" mce_href="/">Zymic os melhores templates Free.</a></h1>

Pronto está criado o topo do site.

http://www.joomla.com.br Fornecido por Joomla! Produzido em: 15 August, 2007, 18:43

Coloco esse código:

<?php mosLoadModules('top'); ?>

Quando você atualizar o site ele retornará o menu assim:

<TABLE class=moduletable cellSpacing=0 cellPadding=0>

<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_weblinks&Itemid=23>

Adicione um parâmetro a chamada do módulo:

<?php mosLoadModules('top',-1); ?>

Agora ele retornou o menu assim:

<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_weblinks&Itemid=23>

http://www.joomla.com.br Fornecido por Joomla! Produzido em: 15 August, 2007, 18:43

Você pode usar os seguintes atributos para os módulos:

<?php mosLoadModules('top',); ?> - Esse seria o default, que chama tabelas;

<?php mosLoadModules('top',-2); ?> - Esse serve para voltar como xhtml;

Agora vamos começar a estilizar o nosso menu.

background: #282828 url(../images/top_nav_right_bg.gif) no-repeat bottom right;

http://www.joomla.com.br Fornecido por Joomla! Produzido em: 15 August, 2007, 18:43

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;

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" />

Agora o css, do módulo de estatísticas:

http://www.joomla.com.br Fornecido por Joomla! Produzido em: 15 August, 2007, 18:43

<li id="comments">10,232 Comments</li>

<li id="hits">298 Unique Hits Today</li>

<li id="online">65 People Online</li>

background: #282828 url(../images/stats_bar.gif) no-repeat;

index.php – Aqui será onde colocaremos o nosso html.

templateDetails.xml – Arquivo para o uso do joomla e documentação.

Repare que entre as tag’s body não têm-se nada.

Estou estilizando font’s e outros atributos...

Criei as seguintes tag’s html:

Com os seguintes css’s:

Obs: Eu apenas alterei as tag’s que já existiam no css original.

© Copyright 2006 -