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.
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!
AMIGO COMO FAÇO PARA INSTALAR O JOBLINE.
CREIO QUE ELE INSTALE APENAS COM JOMLA E MAMBO...
SE NÃO É PRECISO POR FAVOR ME AJUDE
OBRIGADO E SEU FORUM TA BELEZA..PARABENS
CLAUDINEI
pois iniciantes ficam perdidos e macaco véio não precisa dele..
le o bigodines e aprende como faz.
Vlw. Abraços !
Parabéns ai.
Eu ja tentei fazer template de tudo que é jeito com tutoriais deste site e Nunca consegui =(
Vejo que tem um bom conteudo e tal mas como a maioria do que eu acho na internet, não é para iniciantes.
Gracas a uma correria fudida e fritação de cabeça hoje não sou iniciante no Joomla e já estou fazendo templates bem ousados.
Gostaria de pedir, para quem puder, fazer um tutorial mais simples de como começa um template por que os tutoriais que encontrei todos são para um nivel mais avançado ou a pessoa que escreve acha que é algo obvio mas quem ta lendo fica perdido. O tutorial que me ajudou muito foi este: http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/
eu não conheço muito bem o básico... só o básico do básico. boiei.
quem pode me indicar como adquirir o conhecimento necessário para entender esse tutorial? por favor.
Por favor alguem pode me auxiliar??
Este endereço de e-mail está protegido contra SpamBots. Você precisa ter o JavaScript habilitado para vê-lo.
Vlwwww
um forte abraço
Antes da pergunta de leigo:
1. Instalei tudo certinho
2. Copiei um template que saquei da web
3. Fui nas extensions e alterei o template
Pergunta de leigo:
Os menus e modules pré-definidos do Joomla Instalation estão lá todos, é um saco!!!
Eu queria que o meu template também fizesse o load dos seus menus e modules...
Como posso fazer isso?
Obrigado e entrem em contato,
Este endereço de e-mail está protegido contra SpamBots. Você precisa ter o JavaScript habilitado para vê-lo.
Mas, mesmo assim, está de parabéns nosso colega Ronildo Costa, pois é assim que vamos aprendendo.
Estou começando com o Joomla ha pouco tempo e realmente já estou ficando muito satisfeito com esta plataforma cms.
abraços.
quer ajuda? va ao pai dos burros virtual (assim como eu faço)...o bom amigo google sempre te explica XD...
bela iniciativa...sou web designer e programador em C#, nao tenho experiencia com joomla e nenhum cms, mas logo logo COM MUITO ESTUDO E DEDICAÇÂO estarei usando ele em meus proximos projetos...
obrigado!
Abraço e não entendam isso como lição de moral.
Agora depende de qual o público ne... iniciantes em html e css... procurem primeiro tutoriais desse assunto...
agora pra quem já tem uma noção em joomla... tá ótimo!!
como alguem disse ae... vamos tbm botar os miolos pra funcionar galera!!
tem que estudar!!
Para os iniciantes, é muito complicado mesmo entender dos códigos HTML.
Mais para quem tem um pouco de conhecimento mesmo, foi um excelente tutorial.
Abraço!
mas não pelo que foi dito, e sim pelo que faltou ser dito...
Css, html, php.. isso tá de boa...
mas tentei fazer agora e me enrolei com algumas coisas q não foram ditas ou detalhadas.. mas depois baixei o arquivo fonte e deu pra dar uma clareada boa em como tudo funciona..
Vou tentar novamente adaptar outros... até pegar a manha..
apesar de todas as críticas... o tuturial é sim de grande valia pra todos nós..
Eu mesmo farei um curso pra criação de design para joomla.. e nada nada serão tipo uns R$300 no mínimo q vão....
aqui aprendí de grátis..
xD
Vlw pela ajuda
um abraço....
flw...
vi o tutorial no youtube, mas aki fica diferente qnd abro o modo administrator
mas o 1º botao (SITE) qnd coloco o mouse em cima não aparece a opção TEMPLATES... pq vcs sabem?
só entendi até a parte de copiar os arquivos do template para outra pasta...
logo após vc começou a editar(oque vc estava editando???)
Instalei o joomla ontem e não intendi nada cara!
Oque vc usou para editar?? pq está tudo colorido??
E pq vc não fez nenhuma alteração nele desde 2006???
Html: http://pt-br.html.net/tutorials/html/
Css: http://pt-br.html.net/tutorials/css/
Valeu!!!