Joomla.com.br

1. O que é um template?

O template é constituído por um conjunto de arquivos que controla como o conteúdo será apresentado. Ele provê ao sistema Joomla! as informações necessárias para o posicionamento de elementos, módulos, componentes e as folhas de estilo. Em outras palavras, o template representa a "roupa", ou seja, o visual que o site apresentará. O template não é o site da web, e nem mesmo pode ser considerado como um modelo de um site. O template é o esboço principal básico para visualizar o site. Para produzir o efeito de um site “completo”, o template trabalha em conjunto com o conteúdo armazenado nas bases de dados. Um exemplo pode ser visto na Figura 11-1.

Figura 1: Template com e sem conteúdo

A Figura A apresenta o template em uso com amostras de conteúdo. A Figura B apresenta o template como ele deve parecer, com uma lista básica de recursos da instalação, com pouco ou sem conteúdo. O template é preparado de forma que quando o seu conteúdo for inserido, ele herdará as especificações das folhas de estilo definidas, tais como o estilo de link, menus de navegação, tamanho do texto e cores, para citar alguns.

Observe como as imagens associadas com o conteúdo (as imagens das pessoas) não são parte do template, enquanto a imagem no cabeçalho (parte superior da página) faz parte do mesmo.

O uso de um template tem as suas vantagens e desvantagens:

- vantagens:

- desvantagem:

Embora diferentes templates possam ser aplicados em diferentes páginas, esta construção, em funcionalidade, não é confiável. O melhor é empregar comandos condicionais em PHP e criar um leiaute que, dinamicamente, ajusta o número de colunas baseado no conteúdo a ser publicado.

2. Passos para a elaboração de um Template

Vamos abordar, didaticamente, os seguintes passos para a elaboração de um template.

• 2.1. A definição do diretório de trabalho



Para a facilitação do nosso trabalho é importante que tenhamos uma estrutura de um servidor local, o qual permitirá que façamos as experimentações que forem necessárias. Se não for possível o trabalho em um servidor local você pode trabalhar, da mesma forma, com as restrições de acesso e direitos pertinentes, em um servidor remoto.




Para exemplificação, caso você não tenha - ainda, um servidor local e esteja querendo experimentar o Joomla!, você pode instalar o servidor WAMP, que é constituído de um servidor Apache, PHP e MYSQL. Faça o downloado do WAMPSERVER a partir do site http://www.wampserver.com/ . Após o download, instale o programa. O processo de instalação é simplificado e não apresenta maiores dificuldades. Você deve escolher o local de instalação que melhor lhe aprouver. Por exemplo: c:/wamp/. Uma observação: caso você tenha o "Skype" rodando, é importante sair do "Skype" e voltar a entrar no mesmo, somente após o servidor WAMP estiver funcionando.




Faça o download do Joomla! (Joomla! 1.5 - CMS) e instale-o. O Joomla! deverá ser instalado no diretório padrão do servidor. No nosso caso, que estamos empregando o servidor WAMP, o mesmo deverá ser instalado no diretório c:/wamp /www/. No processo de descompactação para a instalação, escolha o nome adequado para o diretório de seu site. Vamos definir que o nome do nosso diretório é MEUSITE. Neste caso, o diretório de instalação será: c:/wamp/www/meusite/.






Figura 2: Instalação do Joomla! no diretório c:/wamp/www/meusite/




Após concluir a descompactação dos arquivos do Joomla! na sua pasta c:/wamp/www/meusite/, você deverá executar o servidor WAMPSERVER, iniciando todos os serviços e colocando-o "online". A partir do seu navegador chame o seu servidor local: http://localhost/. A página do WAMPSERVER será aberta. Você observará que abaixo do título "YOUR PROJECTS" estará disponível a sua instalação do Joomla! na pasta MEUSITE. Clique sobre o MEUSITE e conclua a instalação do Joomla!




Nota: Se o seu site Joomla! 1.5 já está instalado, significa que você já tem um servidor local instalado e já é um usuário "avançado", então, mantenha-o e não se preocupe com o parágrafo seguinte. Basta criar o diretório de trabalho para o template: c:/wamp/www/meusite/meu_template/.




Vamos considerar, a partir deste momento, que a sua instalação do Joomla! está plenamente funcional na pasta c:/wamp/www/meusite/. Vamos criar, finalmente, o nosso diretório de trabalho para a elaboração de nosso template. Crie o diretório /meu_template/ dentro da pasta do site. O seu template residirá no seguinte diretório: c:/wamp/www/meusite/meu_template/ . Atribua os direitos de acesso adequados, lembrando-se que esse diretório deverá ter os direitos de leitura e escrita. A seguir, explicitaremos a estrutura típica de um diretório de um template (vide o item 3).



• 2.2. A edição de arquivos



Qual será a "cara" do MEUSITE? É necessário pensar na sua aparência, no seu leiaute. Terá ele duas ou três colunas? Como será o cabeçalho [header]? Como será o rodapé [footer]? Vou empregar cores para o preenchimento e enfeites dos espaços ou figuras? Quantos módulos eu vou precisar para a apresentação do conteúdo?




A partir desses questionamentos, vamos definindo os recursos que precisaremos. É interessante fazer um esboço no papel para facilitar o nosso trabalho. O esboço empregado será o seguinte:






Figura 3: Esboço do MEU_TEMPLATE




Vamos explicitar melhor o esboço:




[1] = cabeçalho [header], nessa área vamos dispor o nome do nosso site (à esquerda) e na posição USER1, o módulo de busca [search] (à direita); empregaremos, também, na parte inferior, na posição USER2, o módulo de menu superior [top menu] (posicionado à direita).




[2] = parte superior [top], nessa área vamos dispor da posição TOP e empregar o módulo de informativos [newsflash];




[3] = coluna à esquerda [leftcolumn] ou barra lateral_1 [sidebar], nessa área disporemos na posição LEFT os módulos que quisermos, especialmente, o menu principal;




[4] = área central [center] ou área de conteúdo [content], preencheremos essa área com conteúdo diversificado, especialmente a descrição do local onde se está navegando no site [pathway / breadcrumbs] e o conteúdo especificado para aparecer na página frontal [frontpage];




[5] = coluna à direita [rightcolumn] ou barra lateral_2 [sidebar2], nessa área disporemos na posição RIGHT os módulos que desejarmos, especialmente, o módulo de enquete;




[6] = rodapé [footer] e/ou parte inferior [bottom], podemos dispor nessa área, na posição FOOTER e/ou BOTTOM dos módulos que desejarmos, especialmente uma propaganda [BANNER] e informações de direitos autorais [COPYRIGHT].




Em resumo, as decisões que tomaremos são as seguintes:




Uma primeira decisão: Vamos elaborar um template que tenha uma linha horizontal de cabeçalho, outra linha horizontal superior, abaixo do cabeçalho, três colunas (esquerda, centro e direita) e uma linha inferior de rodapé.

Uma segunda decisão: Vamos empregar, preferencialmente cores para o preenchimento de espaços (para facilitar o nosso tutorial) e algumas poucas figuras (aquelas existentes para o nosso template modelo). Não sei quanto a você, mas para a edição de figuras costumo empregar o "Fireworks", "Photoshop" e etc. Como não sou "expert" nem nessa e nem naquela ferramenta, vou, literalmente, fazendo o possível, aqui e ali, até conseguir o resultado que desejo. O importante, nesse momento, é que precisamos ter as fatias ou partes das figuras que vamos empregar em nosso template, para dar-lhe forma e aparência.

Uma terceira decisão: Para facilitar edições futuras do MEU_TEMPLATE vamos empregar os recursos das folhas de estilos [stylesheets - arquivos CSS].

Uma quarta decisão: A definição da posição dos módulos. Este nosso template modelo empregará apenas algumas posições específicas para módulos específicos, as quais são ligeiramente diferente do posicionamento dos módulos definidos na instalação do Joomla! Para ter certeza de que os módulos estarão posicionados corretamente, assegure-se do seguinte:




• User1= empregado para o posicionamento do módulo de busca [search module]
• User2= empregado para o posicionamento do módulo de menu superior [top menu]
• Top= empregado para o posicionamento de informações[newsflash] ou módulos específicos de html [HTML module]




Lembre-se, nada mais deverá ser publicado nessas posições. Para evitar qualquer impressão errada, assegure-se de entrar na área de administração do MEUSITE e alterar as informações dos módulos acima mencionados, conforme apresentado.






Figura 4: Área de administração - Gerenciamento de Módulos [Module Manager]




São tantos os recursos necessários que a primeira vista, parece-nos, que é necessário ser um "expert" para criar um template. Não necessariamente! É preciso boa vontade e disposição. Começando a partir de um modelo temos o nosso trabalho facilitado. Vamos explicitar o processo de criação de um template posteriormente. (vide o item 4).




2.3. A criação do arquivo templateDetails.xml




O arquivo templateDetails.xml deve relacionar todos os arquivos que façam parte do template. Ele também relaciona informações, tais como o nome do autor e direitos autorais. Algumas dessas informações são mostradas na área de administração/manutenção na opção de Gerenciamento de Template [Template Manager]. Para maiores informações (vide o item 5).




2.4. A criação do arquivo index.php




O que de fato existe em um arquivo index.php? Ele é uma combinação de códigos (X)HTML e PHP que determinam tudo a respeito do leiaute e apresentação das páginas. Veremos algo mais a respeito posteriormente. (vide o item 6).




2.5. Testar o template




O resultado que estou conseguindo era o que estava esperando, ou seja, o que havia planejado? Se não, é o momento de voltar e rever algum detalhe que passou despercebido. Vamos tecer alguns comentários sobre esse tópico mais abaixo. (vide o item 7).

3. Estrutura típica de um diretório de um Template

É comum que os templates possuam, ao menos, quatro arquivos:

• index.php

• template.css

Controla os aspectos da apresentação do template, incluindo as especificações de margens, fontes, cabeçalhos, bordas das imagens, formatação de listas e etc.

• templateDetails.xml

Armazena as informações relacionadas ao templates e empregadas no processo de instalação e pelo Gerenciador de Template [Template Manager].

• template_thumbnail.ext - substitua o .ext com o formato da extensão da imagem pertinente (.jpg, .png, .gif)

Geralmente é uma imagem com 200x150 pixel, que é mostrada quando o cursor é posicionado sobre o nome do template no Gerenciador de Template. Isto dá ao Administrador um amostra da visualização do template antes de o mesmo ser aplicado ao site.

Um template padrão para o Joomla! 1.5 pode incluir os seguintes diretórios:

• css - contém todos os arquivos .css.
• html - contém arquivos de especificações para o template, a serem processados pelo sistema Joomla!
• images - contém todas as imagens empregadas no template.

c:/wamp/www/meusite/meu_template/css/
c:/wamp/www/meusite/meu_template/html/
c:/wamp/www/meusite/meu_template/images/

[nota: será necessário estar cadastrado no site "compassdesigns" e se logar. Após logar-se, selecionar a pasta "joomla 15 template" e na página seguinte o arquivo JS_BOLD]

/JS_Bold/ > transfira para c:/wamp/www/meusite/meu_template/;
/JS_Bold/css/ > transfira para c:/wamp/www/meusite/meu_template/css/; e
/JS_Bold/images/ > transfira para c:/wamp/www/meusite/meu_template/images/.

4. O processo de criação de um Template

O processo de criação de um template começa com as habilidades criativas de seu idealizador. O quanto de criatividade você tem? Acha que pode desenvolver alguma? Eu acredito que você pode! Então, mãos à obra!

• 4.1. Definição do cabeçalho [header]



O nosso cabeçalho terá uma imagem de fundo [background], na cor preta, como um leve enfeite no topo. Também, vamos atribuir uma cor. Dessa maneira o cabeçalho escalará verticalmente, se necessário, por exemplo, se o tamanho da fonte for redimensionada, sem implicar em perda da qualidade que queremos. Também, alteraremos as cores de qualquer fonte para branco, de forma que possam ser vistas no fundo preto.




Empregaremos uma imagem para a caixa de busca. Vamos ter que cuidar das especificidades do código CSS para termos certeza que apontaremos para a entrada certa.




Eis o nosso código CSS, pertinente as especificações do cabeçalho que queremos:




/*Especificações do cabeçalho*/

#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;
}

#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}

#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
font:1em Arial, Helvetica, sans-serif;
padding:2px;
}

#header .search {
position:absolute;
top:20px;
right:20px;
}




Observe que a cor da fonte foi especificada como branca [color:#fff;], foi empregada uma cor de fundo para o cabeçalho [#212121], além da sua imagem própria [header.png]. Algumas especificações de enfeite foram empregadas no título do cabeçalho [H1]. E atribui-se a imagem [search.png] para a caixa de pesquisa.




Observe que não foi empregado um logotipo gráfico aqui, mas texto puro. A razão é principalmente porque os mecanismos de busca não podem ler imagens. Alguém poderá substituir por belas imagens, mas deixo isso como exercício para você.






Figura 6: Aparência final do cabeçalho [header]..



• 4.2. Definição do fundo [bakground] das colunas



Lembre-se que quando colocamos cor de fundo [bakground] em colunas, a cor não se estende até o rodapé. Isto é porque o elemento <div>, neste caso sidebar e sidebar-2, preenche somente o tamanho do conteúdo. Ele não cresce para complementar todo o espaço do elemento.




Para resolver a situação apresentada acima empregaremos a técnica chamada de colunas deslizantes de Faux [Sliding Faux Columns]. Neste caso, você terá que criar duas imagens grandes que deslizará uma sobre a outra. Precisaremos criar dois invólucros <elementos div> para colocar os fundos. Poderíamos aplicar uma ao invólucro maior (#wrap), mas estou empregando um invólucro extra (e trabalhoso) para ilustração, apenas.




Para um maior aprofundamento sobre o tema, você poderá verificar esses dois sites:

• http://www.alistapart.com/articles/fauxcolumns/
• http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58




No nosso caso, a largura máxima que estamos considerando para o template é de 960px, dessa forma começamos com uma imagem dessa largura. Na pasta de imagens está o arquivo slidingcolumns.png [left e right]. Exportamos duas fatias (empreguei a mesma fatia e apenas ocultava/apresentava as partes laterais), uma com 960px de largura total, com um fundo de 192px à esquerda; e outra de 960px de largura total, com um fundo com 192px à direita.




Nota: A imagem à esquerda precisa ter um fundo na cor branca, e a da direita de um fundo transparente.




De onde veio o valor de 192px? Ele corresponde a 20% de 960px, pois as nossas colunas têm 20% de largura.




Empregamos a propriedade background-position para colocar as imagens no lugar correto. Aqui estamos usando o formato de CSS reduzido, de forma que elas façam parte da propriedade do fundo [background]. Observe, abaixo, o código CSS empregado:




/*Especificações das colunas da Esquerda e Direita*/

#leftfauxcol {
background:url(../images/leftslidingcolumn.png) 20% 0;
}

#rightfauxcol {
background:url(../images/rightslidingcolumn.png) 80% 0;
}




Para ilustrar, observe que, no nosso arquivo index.php, simplesmente adicionamos as colunas dentro do elemento [div] pertinente. Colocamos, também, esses elementos [div] dentro de comandos condicionais, pois, se não houver conteúdo a ser apresentado a coluna pertinente não será apresentada.





<?php if($this->countModules('left')) : ?>
<div id="leftfauxcol">
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
<div id="rightfauxcol">
<?php endif; ?>





É necessário também colocar uma cor de fundo tanto no rodapé [footer] quanto no módulo/elemento inferior [bottom], pois de outra forma, as colunas seriam apresentadas sobre estes.




/*Especificação do rodapé*/

#footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}

/*Especificação do elemento inferior */

#bottom {
background:#333;
color:#666;
padding:10px 50px;
}




Precisamos limpar [clear] todos os comandos [floats], de forma que os elementos [div] das colunas faux [left ou rightfaux] se extendam além da parte inferior da página. O método tradicional para fazer isso é aplicando a propriedade [:after], Porém, a partir do lançamento do IE7, este método pode não funcionar a contento. Precisamos especificar as formas de aplicação do [clear] no IE 6&7, é o que apresentaremos abaixo




Encontramos algumas soluções.




Empregaremos o comando [float] em quase todas as opções por aqui.




Então, adicionamos um único comando clear:both ao rodapé[ #footer] e também para as colunas faux. Adicionamos estes comandos condicionais especificamente na folha de estilo do IE6. Vide abaixo:




#leftfauxcol,#rightfauxcol,#footer {
float:left;
width:100%;
}




Também, precisamos adicionar alguns comandos condicionais no marcador [head] do arquivo index.php:




<!--[if lte IE 6]>
<link href="/templates/<?php echo $this->template ?>/css/ie6only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="/templates/<?php echo $this->template ?>/css/ie7only.css" rel="stylesheet" type="text/css" />
<![endif]-->




Ufa! O que você achou? Confuso? O que fizemos foi, simplesmente, encontrar uma maneira de termos três colunas e que as mesmas tivessem o mesmo tamanho, ou seja, em termos de apresentação da padronização do fundo, e não em termos do conteúdo. Se quiser personalisar, por exemplo, edite as figuras de "fauxcolumn", colocando a parte do fundo da coluna que aparece na cor e padrão que você quiser.




O método "fauxcolumn" é o exemplo que estamos empregando. No entanto, você pode encontrar muitas outras formas diferentes de organizar o leiaute do seu site. Inclusive, pode encontrar códigos CSS completos de configuração de um site com quantas colunas quiser. Aqui estão alguns sites que você pode pesquisar. Divirta-se!




http://www.maujor.com




http://css.maxdesign.com.au/



• 4.3. Módulos flexíveis



No nosso esboço, temos um bloco de módulo grande no início. Não sabemos o quão extenso será o texto que vai ser incluído lá. Para resolver este problema pusemos o comando de posicionamento do módulo [jdoc:include] incluso em um elemento de invólucro [div] e especificamos para ele um fundo da mesma cor da imagem. Esta é a mesma estratégia que empregamos para o cabeçalho [header].




<?php if($this->countModules('top')) : ?>
<div id="top">
<div class="inside">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php else : ?>
<div id="top">&nbsp;</div>
<?php endif; ?>




Observe que também empregamos um comentário condicional de forma que se a localização do módulo top [superior] não tiver conteúdo, não haverá erro. O que vai estar lá é um invólucro [div] vazio que conterá uma parte da imagem de fundo e um valor de espaçamento de 20px, somente para fim estético.




É preciso empregar as especificidades do CSS para sobrescrever os estilos da tabela com as especificações do módulo [moduletable] definidos:




#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}

#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
font-stretch:expanded;
margin:0;
padding:0;
}

#top .moduletable {
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
border:0;
margin:0;
padding:0;
}



• 4.4. Tipografia



Muitos dos links precisarão estar na cor branca [color:#fff]. Então, definimos isso de forma global e depois modificamos a cor da fonte da coluna central para preto [color:#000]




a:link,a:visited {
text-decoration:underline;
color:#fff;
}

a:hover {
text-decoration:none;
}

#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,#content100 a:link,#content100 a:visited {
color:#000;
}




O nosso esboço possui botões [button]estilizados. Criamos isso empregando uma imagem de fundo a partir do modelo. É uma fatia muito fina que é preenchida horizontalmente.




.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
cursor:hand;
margin:4px 0;
padding:0 4px;
}




Para tabelas de seção [sectiontable], como as FAQ [ perguntas mais freqüentes], podemos adicionar facilmente um fundo [background] repetindo o uso da imagem que já empregamos para destacar [teaser.png]. A reutilização de imagens é comum e também economiza em download, tornando a página mais rápida.




sectiontableheader {
background: url('/../images/teaser.png');
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
padding:5px;
}




As tabelas de módulos [moduletable] precisam de apenas uma simples redefinição e ajustes nos espaçamentos (padding) e margens.




.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}

.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}




As tabelas de módulos de Menus [moduletablemenu], como sempre, precisam de muitos estilos CSS. Aqui vamos fazer o mais simples possível. Nós fatiamos uma simples imagem que incluía ambos, o marcador [bullet] e a e a marca de sublinhado [underline]. Observe que o estilo é “ligado” aplicando um sufixo de módulo de menu para qualquer lista de links que queiramos que tenha a mesma aparência especificada.




.moduletablemenu {
margin-bottom:1em;
}

.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

.moduletablemenu ul {
list-style:none;
margin:5px 0;
}

.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}

.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}

.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}




Por último é o menu tipo abas [tabs] do menu localizado no canto superior direito [top menu]. Como defensores da acessibilidade, queremos colocar isso de forma que as abas sejam escaláveis e as fontes possam alterar o seu tamanho. Felizmente, uma técnica foi desenvolvida para fazer isso, e é de fato com o mesmo princípio que empregamos para as nossas colunas, as portas deslizantes [ sliding doors] novamente!




Também fizemos alguma otimização em velocidade para o template e empregamos uma única imagem para a alternância de esquerda e a direita, assim como os estados de ligado [on] e desligado [ off].




O CSS não é tão complicado; apenas tivemos uma maior dificuldade com o posicionamento vertical da imagem de fundo para o estado de ligado [on].




.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.moduletabletabs ul {
list-style:none;
float:right;
background:#212121;
width:100%;
margin:0;
padding:0;
}

.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}

.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}

.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}

.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}




A aparência, considerando tudo o que vimos até este momento, do MEU_TEMPLATE é a que se segue:






Figura 7: Aparência final do MEU_TEMPLATE... até este momento...



• 4.5. Personalizando o MEU_TEMPLATE



Podemos experimentar algumas modificações, pois, certamente, nem todos gostam do amarelo ou vermelho. Eu prefiro a cor verde. Então, vamos exercitar a nossa criatividade e fazer algumas experimentações.




4.5.1. Para conseguir o resultado que se espera




Fizemos algumas alterações para que o resultado estivesse o mais próximo daquele que era esperado. Por exemplo: Fazer com que as cores do menu superior [top menu] se alternassem nas condições de [hover ou active] foi complicado. Da mesma forma, indicar a condição de menu ativo [active] ligado nos outros menus. Algumas modificações no código CSS foram necessárias:




(1) Modificação no controle de estilo dos menus, de forma que a marcação do menu ativo (active) estivesse ligada, com definição da cor de fundo.




/*Menu Styling*/

/* ACRESCENTADO */
a.mainlevelmenu#active_menumenu {
text-decoration:none;
color:#fff;
background:#212121;
}




(2) Modificação no controle de estilo do menu de abas (top menu), de forma que houvesse a correta alteração das cores relativas à posição do mouse (hover ou active).




/*Tab Menu Styling*/

/* RETIRADO
.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}
.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}
*/
/*acrescentado*/
a.mainleveltabs#active_menutabs {
background:url(../images/tabs.png) no-repeat 100% -84px;
}
/* ALTERADO DE .MODULETABLESTABS LI A:HOVER */
.moduletabletabs a:hover {
background:url(../images/tabs.png) no-repeat 100% -164px;
}




4.5.2. Alterando a cor do fundo [background]




(1) Alterada a cor de fundo [background] de #333 para #fafafa, no corpo total da página [body], para destacar a página especificamente.




body {
text-align:center;
font-size:76%;
font-family:Tahoma, Arial, Helvetica, sans-serif;
line-height:1.3;
background:#fafafa;/*alterada a cor original #333*/
}




4.5.3. Definindo estágios de transição de botões




(1) Alteramos o tipo de indicação do cursor para [pointer] e incluímos o comando de [input:focus, input:hover] para que houvesse a alternância de imagem quando o mouse estivesse sobre o botão; certamente, tivemos que definir uma segunda imagem para o botão, e fizemos isso simplesmente criando uma nova imagem a partir da original invertida em 180º.




.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
line-height:25px;
font-size:14px;
margin:4px 0;
padding:0 4px;
cursor:pointer;/*alterado*/
}
/*acrescentado*/
input:focus, input:hover {
background:#fff url(../images/buttonbghover.png) repeat-x;
}




4.5.4. Incluído novo estilo de módulo [ _line]




(1) Incluímos, como demonstração os códigos CSS pertinentes a um novo estilo de módulo, do tipo linha com os cantos arredondados e fundo branco. Veja abaixo o código pertinente:




/*acrescentado estilo de módulo line*/
div.module_line {
background: url(../images/line_box_br.jpg) 100% 100% no-repeat;
}

div.module_line div {
background: url(../images/line_box_bl.jpg) 0 100% no-repeat;
}

div.module_line div div {
background: url(../images/line_box_tr.jpg) 100% 0 no-repeat;
}

div.module_line div div div {
background: url(../images/line_box_tl.jpg) 0 0 no-repeat;
}

div.module_line h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
font-weight: bold;
margin:-23px -4px 5px -5px;
padding-left: 10px;
padding-bottom: 2px;
}

div.module_line {
margin: 0px;
padding: 0px;
margin-bottom: 15px;
}

div.module_line div div div{
padding: 15px;
padding-top: 30px;
padding-bottom: 10px;
width: auto;
}

div.module_line div div div div {
background: none;
padding: 0px;
}

div.module_line ul {
margin: 10px 0;
padding-left: 20px;
}

div.module_line ul li a:link, div.module_line ul li a:visited {
font-weight: bold;
}




Atribuímos ao módulo de indicação da posição de navegação no site [pathway - breadcrumbs] as características do tipo [_line]. Foi necessário proceder as seguintes alterações:




(a) No gerenciamento do módulo modificamos o [Module Class Suffix] para [_line] e alteramos o título [title] para "você está aqui:"






Figura 8: Gerenciamento de módulo - especificação da classe do sufixo do módulo e alteração do título..




(b) No arquivo index.php alteramos o estilo [style] para [rounded]:




<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" style="rounded"/>
</div>




(c) O resultado da aplicação desse novo estilo de módulo é o apresentado abaixo:






Figura 9: Aparência do MEU_TEMPLATE com a inclusão do módulo tipo [_line]



• 4.6. Recursos avançados do template
  
  • Parâmetros do Template [Template Parameters]
  • Sobreposição do Template [Template Overrides]



De forma a ilustrar alguns recursos avançados de template, copiamos alguns dos recursos encontráveis no arquivo: templatetutorial15bold.zip, também, da CompassDesign, que passaremos a explicitar abaixo.




Joomla!1.5 oferece um número avançado de recursos de template que significativamente expande o que é possível fazer com templates. Veremos cada um deles abaixo:




Parâmetros do Template




Este recurso é novo no Joomla!1.5. Este parâmetro permite a você passar variáveis ao template para opções selecionáveis a partir da área de administração do site.




Podemos incluir uma função de parâmetro relativamente fácil ao nosso template. Basta acrescentar no arquivo templateDetails.xml, o seguinte:



<params>
<param name="template_width" type="radio" default="0" label="Template Width" description="Change width setting of the template">
<option value="0">800x600</option>
<option value="1">1024x756</option>
<option value="2">fluid (min/max with FF and IE7, 80% with IE6)</option>
</param>
</params>



Também, será necessário incluir no diretório do template um arquivo chamado params.ini. Ele pode ser um arquivo em branco, mas o Joomla! precisa desse arquivo para armazenar a opção que você escolher. Por exemplo, o arquivo INI para o exemplo anterior poderia ser:



template_width=2



Este arquivo [params.ini] deve ter direito de escrita para que as alterações possam se processadas. Também, precisaremos relacionar este arquivo no arquivo templateDetails.xml.




Na tela de Gerenciamento de Template, no template em questão, você poderá ver as opções estabelecidas como parâmetros, como mostrado na figura abaixo:






Figura 10: Parâmetros do template - opções.




Podemos ver que é uma simples lista com três opções.



<param name="template_width" type="radio" default="0" label="Template Width" description="Change width setting of template">
<option value="0">800x600</option>
<option value="1">1024x756</option>
<option value="2">fluid (min/max with FF and IE7, 80% with IE6)</option>
</param>



Então, devemos fazer a seguinte alteração no marcador do corpo [body] do nosso arquivo index.php:



<body class="width_<?php echo $this->params->get('template_width'); ?>">



E no arquivo CSS devemos acrescentar o seguinte:




body.width_0 div#wrap {
width:760px;
}

body.width_1 div#wrap {
width:960px;
}

body.width_2 div#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
}

#wrap {
text-align:left;
margin:0 auto;
}




Isto nos dá três opções: uma largura estreita fixa, uma largura maior fixa, e uma de largura automática [fluid].
Empregando parâmetros de template dessa maneira pode dar ao administrador do site flexibilidade em quase todos os aspectos do template, como: largura, cor e etc., todos controláveis com comandos condicionais PHP.




Sobreposição de Template




Talvez o mais poderoso dos novos recursos de template no Joomla!1.5 seja a possibilidade de facilmente sobrescrever o comando de saída do sistema. Isto é feito com novos arquivos de saída chamados de arquivos do template que correspondem a visualizações de leiaute de componentes e módulos. Joomla! verifica em cada caso para ver se um deles existe na pasta do template, e se houver, emprega as especificações do mesmo para sobrescrever a saída normal.




Sobrepondo a estrutura




Todas as visualizações de leiate e de template estão na pasta /tmpl/. A localização é ligeiramente diferente para componentes e módulos, porque os módulos especialmente somente tem uma única visualização. Exemplo:



modules/mod_newsflash/tmpl/
modules/mod_poll/tmpl/
components/com_login/views/login/tmpl/
components/com_content/views/section/tmpl/



A estrutura básica de todos os componentes e módulos é [View>Layout>Templates].




A tabela abaixo apresenta alguns exemplos, observe que os módulos somente têm uma visualização [view].




Visualização [View]	Leiaute [Layout]	Templates
Categoria [Category]	Blog.php	blog_item.php blog_links.php
Categoria [Category]	default.php	default_items.php
Módulo de Informativo [Newsflash module]	default.php horz.php vert.php	_item.php




Atualmente existem vários arquivos de templates relacionados a leiautes específicos. Eles possuem uma convenção comum de nome. Veja a tabela a seguir:




Convenção do nome do arquivo	Descrição	Exemplo
layoutname.php	The master layout template	blog.php
layoutname_templatename.php	A child layout template called from the master layout file	blog_item.php blog_links.php
_templatename.php	A common layout template used by different layouts	_item.php




Sobrepondo a especificação de Módulos




Cada módulo tem uma nova pasta onde possui especificações de seu próprio template, que é chamada /tmpl/. Dentro dessa pasta estão arquivos PHP que criam as saídas pertinentes. Por exemplo:



/modules/mod_newsflash/tmpl/default.php
/modules/mod_newsflash/tmpl/horiz.php
/modules/mod_newsflash/tmpl/vert.php
/modules/mod_newsflash/tmpl/_item.php



Os três primeiros arquivos acima são três leiautes do Informativo [Newsflash] e baseados nos quais as opções do módulo são selecionadas, e o arquivo _item.php é o leiaute de template comum empregado pelos outros três. Abrindo aquele arquivo nós encontramos:




<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>

<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<tr>
<td class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>" width="100%"><?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
<a href="/<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <?php echo $item->title;?> </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</td>
</tr>
</table>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<tr>
<td valign="top" colspan="2"><?php echo $item->text; ?></td>
</tr>
</table>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="/'.$item->linkOn.'">'.JText::_('Read more').'</a>'; endif; ?>




Nós podemos alterar este arquivo para removermos as tabelas, para que o mesmo fique mais acessível:




<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>

<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<div class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
<a href="/<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <?php echo $item->title;?> </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <?php echo $item->text; ?>
</div>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="/'.$item->linkOn.'">'.JText::_('Read more').'</a>'; endif; ?>




Este novo arquivo deve ser colocado no diretório do template, na pasta denominada /html/, como se segue:



templates/meu_template/html/mod_newsflash/_item.php



Resultado: Apenas retiramos as tabelas do módulo de informativo [mod_newsflash]. Fácil, não?!...




Sobrepondo a especificação do Componente




Os Componentes trabalham quase que exatamente da mesma maneira, exceto pelo fato de que existem muitos tipos de visualizações associadas a muitos componentes.




Se olharmos na pasta com_content , veremos a pasta chamada [ views].



/components/com_content/views/
/components/com_content/views/archive
/components/com_content/views/article
/components/com_content/views/category
/components/com_content/views/frontpage
/components/com_content/views/section



Então, estas pastas devem corresponder as cinco visualizações possíveis para o conteúdo: arquivo, artigo, categoria, frontpage e seção.
Dentro de uma pasta de visualização [view], encontraremos uma pasta chamada /tmpl/, e dentro desta, os diferentes leiautes possíveis.




Se olharmos dentro da pasta category , veremos:



/components/com_content/views/category/blog.php
/components/com_content/views/category/blog_item.php
/components/com_content/views/category/blog_links.php
/components/com_content/views/category/default.php
/components/com_content/views/category/default_items.php



Observe que no caso do componente com_content, o arquivo de leiaute default.php está se refererindo ao leiaute padrão que apresenta artigos em uma lista de link.




Abrindo-se o arquivo blog_item.php veremos as tabelas empregadas atualmente. Se desejamos sobrepor a saída do mesmo, por exemplo, colocamos o que queremos empregar na pasta /html:



templates/meu_template/html/com_content/category/blog_item.php



É relativamnte simples o processo de copiar todas essas visualizações das respectivas pastas /components/ e /modules/ para a pasta em templates/meu_template/html, e processar nesses arquivos copiados as alterações desejadas.




A funcionalidade de sobreposição é um mecanismo poderoso para customizar o seu site do Joomla! a partir do seu template. Você pode criar saídas que foco nos instrumentos de buscas [SEO], acessabilidade ou outras necessidades específicas.




O mais importante que você deve saber
Joomla! 1.5 oferece novos recursos para templates que permitem aos desenvolvedores [designers] controlar completamente o código e a apresentação de um site.




Joomla! sem tabelas




Na seção de download do Joomla! existe um template chamado de Beez que é um exemplo, na prática, de um template com recurso de sobreposição. O gupo que cuida do esboço e a acessibilidade criaram um exemplo completo de recursos de sobreposição, contidos na pasta /html/ daquele template. No tópico seguinte apresentamos um template que emprega os recursos de sobreposição para remover todas as tabelas das saídas do Joomla!.




Template modelo sem tabelas: CSSTemplateTutorials1-4.zip




Temos um template baseado em um modelo (ou esboço). Mais recursos visuais de topografia foram adicionados, mas, mais importante, empregamos nosso leiaute CSS puro que possui colunas dinâmicas dobráveis [collapsible] e um esperto menu em abas. Também, sobrepomos a saída do Joomla! de que forma nenhuma tabela seja usada. Foi criado um arquivo de instalação para esse template, que está disponível a partir de the Compass library:
O arquivo do template é o csstemplatetutorialsl-4.zip.Lembre-se que você precisa estar cadastrado no site para poder fazer o download.

5. Arquivo templateDetails.xml

Como dissemos, o arquivo templateDetails.xml deve relacionar todos os arquivos que compõem o template. Vejamos o nosso arquivo:

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>JS_Bold (original) - meu_template (traduzido)</name>
<creationDate>março 2008</creationDate>
<author>Barrie North (original) - Geciel R. Costa (tradução)</author>
<copyright>Attribution-NonCommercial-ShareAlike 3.0 Unported</copyright>
<authorEmail> Este endereço de e-mail está protegido contra SpamBots. Você precisa ter o JavaScript habilitado para vê-lo. </authorEmail>
<authorUrl>www.compassdesigns.net/www.joomla.com.br (tradução)</authorUrl>
<version>1.0</version>
<description>Fourth example template for Chapter 9 of the Joomla Book</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<filename>css/template.css</filename>
<filename>css/ie6only.css</filename>
<filename>css/ie7only.css</filename>
<filename>html/com_content/category/blog_item.php</filename>
<filename>html/mod_newsflash/_item.php</filename>
<filename>images/buttonbackground.png</filename>
<filename>images/buttonbghover.png</filename>
<filename>images/header.png</filename>
<filename>images/leftmenu.png</filename>
<filename>images/leftslidingcolumn.png</filename>
<filename>images/line_box_bl.jpg</filename>
<filename>images/line_box_br.jpg</filename>
<filename>images/line_box_tl.jpg</filename>
<filename>images/line_box_tr.jpg</filename>
<filename>images/pagetop.png</filename>
<filename>images/rightslidingcolumn.png</filename>
<filename>images/search.png</filename>
<filename>images/tabs.png</filename>
<filename>images/teaser.png</filename>
</files>
<positions>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>left</position>
<position>right</position>
<position>bottom</position>
</positions>
<params>
<param name="template_width" type="radio" default="0" label="Template Width" description="Selecionar a largura do template">
<option value="0">800x600</option>
<option value="1">1024x756</option>
<option value="2">flexível [fluid] (min/max com FF e IE7, 80% com IE6)</option>
</param>

</params>
</install>

 

Vamos explicar o que essas linhas significam:

No primeiro bloco, na sequência, temos:

• - Definição da versão do [xml] e codificação de fonte.
• - Os conteúdos de um documento XML são instruções para o instalador da área de administração. A opção type=”template” diz ao instalador que estamos instalando um template e é para o Joomla 1.5. Não esquecer que o marcador <install> deve ser fechado. Observe que a última linha do arquivo é </install>
• - <name> - Define o nome de seu template. O nome que você especificar aqui será também empregado para criar o diretório dentro da pasta templates. Contudo, ele não deve conter qualquer caractere que o sistema de arquivos não possa processar, por exemplo, espaços. Se instalar manualmente, você precisará criar um diretório que tenha um nome idêntico ao nome do template.
• - <creationDate> - A data que o template foi criado. Esta é uma forma livre e pode ser qualquer coisa, como, May 2005, 08-June-1978, 01/01/2008, etc.
• - <author> - O nome do autor desse template – ou mais provavelmente o seu nome.
• - <copyright> - Qualquer informação de direitos autorais vai aqui neste elemento. Um tipo de licenciamento para desenvolvedores e programadores pode ser encontrado nos fóruns do Joomla. (http://forum.joomla.org/ e http://forum.joomla.org/index.php/board,23.0.html).
• - <authorEmail> - Endereço de email onde o autor do template pode ser encontrado.
• - <authorUrl> - O endereço do site do autor do template.
• - <version> - A versão do template.
• - <description> - Uma descrição qualquer, que identifique o template. Mantivemos a descrição original, que menciona o livro do autor do template: "Joomla! a user's guide. Building a Joomla! powered website".

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>JS_Bold (original) - meu_template (traduzido)</name>
<creationDate>março 2008</creationDate>
<author>Barrie North (original) - Geciel R. Costa (tradução)</author>
<copyright>Attribution-NonCommercial-ShareAlike 3.0 Unported</copyright>
<authorEmail> Este endereço de e-mail está protegido contra SpamBots. Você precisa ter o JavaScript habilitado para vê-lo. </authorEmail>
<authorUrl>www.compassdesigns.net/www.joomla.com.br (tradução)</authorUrl>
<version>1.0</version>
<description>Fourth example template for Chapter 9 of the Joomla Book</description>

No segundo bloco, temos:

• - Entre os marcadores <file><filename> </filename></file> temos a relação de todos os arquivos que compõem o nosso template, incluindo a menção de seus diretórios/sub-diretórios, além do próprio nome do arquivo.

<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<filename>css/template.css</filename>
<filename>css/ie6only.css</filename>
<filename>css/ie7only.css</filename>
<filename>html/com_content/category/blog_item.php</filename>
<filename>html/mod_newsflash/_item.php</filename>
<filename>images/buttonbackground.png</filename>
<filename>images/buttonbghover.png</filename>
<filename>images/header.png</filename>
<filename>images/leftmenu.png</filename>
<filename>images/leftslidingcolumn.png</filename>
<filename>images/line_box_bl.jpg</filename>
<filename>images/line_box_br.jpg</filename>
<filename>images/line_box_tl.jpg</filename>
<filename>images/line_box_tr.jpg</filename>
<filename>images/pagetop.png</filename>
<filename>images/rightslidingcolumn.png</filename>
<filename>images/search.png</filename>
<filename>images/tabs.png</filename>
<filename>images/teaser.png</filename>
</files>

No terceiro bloco, temos:

• - Entre os marcadores <positions><position> </position></positions> temos a declaração de todos os módulos que serão empregados no template. Todas as posições de módulos devem ser declarados aqui, para que os mesmos estejam disponíveis para serem selecionados na área de administração do site, na opção Gerenciamento de Módulos [Modulo Manager].

<positions>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>left</position>
<position>right</position>
<position>bottom</position>
</positions>

No quarto bloco, temos:

• - Entre os marcadores <params></params> temos a definição de parâmetros que definiremos para o template e que estarão associados ao mesmo, e disponíveis para seleção na área de administração, no menu de Gerenciamento de Template [Template Manager]. Apresentamos mais informações sobre esse assunto no item 4.6. Recursos avançados do template - Parâmetros do Template.

<params>
<param name="template_width" type="radio" default="0" label="Template Width" description="Selecionar a largura do template">
<option value="0">800x600</option>
<option value="1">1024x756</option>
<option value="2">flexível [fluid] (min/max com FF e IE7, 80% com IE6)</option>
</param>

</params>

 

6. O arquivo index.php

Este é o arquivo responsável pela apresentação, por fim, do template. Vejamos algumas especificidades:

7. Testando o Template

Esta é a hora de verificarmos se conseguimos o resultado que queríamos ou mudar o que for necessário. Para o nosso propósito, o de demonstrar passo-a-passo a elaboração de um template para o Joomla!1.5, acreditamos que o resultado está satisfatório.

O que devemos fazer, então:

• - montagem da figura [template_thumbnail.png] , inserção da mesma na pasta raiz do template e relacioná-la no arquivo templateDetails.xml. Como você fará isso, certamente, será um exercício de criatividade. O seu resultado será melhor que o nosso.
• - verificar na área de administração, no menu de Gerenciamento de template [Template Manager] se as informações que alteramos no arquivo templateDetails.xml foram consideradas. Verificar, inclusive, se a imagem do thumbnail aparece quando colocamos a palheta do mouse sobre o nome do template. Também, é interessante, acessar o template e deixar selecionado o tamanho da largura da tela que deseja [escolhemos o padrão flexível. Definir este MEU_TEMPLATE como padrão [Default].
• - acessar o MEU_SITE, observar a página principal [de abertura - frontpage], navegar pelas opções de menu e verificar se a coluna esquerda e/ou direita deixa de aparecer quando não há conteúdo. Você pode entrar na área de administração, na área de Gerenciamento de Módulos [Extensions/Modulo Manager] e cancelar os conteúdos para uma ou outra posição e verificar se, realmente, o módulo deixa de aparecer quando não há conteúdo. Fizemos algumas modificações: (a) editamos o mainmenu [menu principal], na área de administração do site, na opção padrão [default - home], os parâmetros básicos (parameters - basic), de forma que somente uma coluna de conteúdo fosse apresentada e não duas; (b) também, na área de administração, na opção de Gerenciamento de Módulos [Module Manager], fizemos o cancelamento da publicação dos módulos da posição da direita [right] e outros da esquerda [left], e (c) Incluímos um módulo de suprimento de notícias [RSS feeds] na parte inferior [bottom] da página, para que a mesma fosse mostrada.





Figura 13: Àrea de administração - Gerenciamento de Menu.






Figura 14: Àrea de administração - Gerenciamento de Menu - Item de Menu - Modificação dos Parâmetros Básicos.






Figura 15: O nosso template final. A coluna à direita foi omitida, pois não foi especificado conteúdo para a mesma.



• Compactar o arquivo do MEU_TEMPLATE para distribuição. Se você tem certeza de que está tudo ok!, resta, então, a preparação do template para distribuição. O processo é simples: basta marcar a pasta MEU_TEMPLATE e com qualquer compactador (usamos o winzip) compacte toda a pasta. O nome do arquivo compactado deverá ser: NOME_DO_TEMPLATE.ZIP. Pronto! Você já pode distribuir o seu template. Sugerimos, contudo, que antes da distribuição, você faça um teste de instalação em um outro site Joomla!. Se houver alguma coisa errada, use a sua criatividade para fazer o certo. E não se esqueça: ao especificar o MEU_TEMPLATE como padrão [default] no outro site, lembrar-se de adequar os módulos existentes às posições definidas no template.

Aqui está o arquivo MEU_TEMPLATE.ZIP, o nosso template, pronto e testado, para ser distribuído.

Caso julgue necessário ter uma cópia em PDF deste conteúdo, favor CLICAR AQUI.

Bom divertimento!

8. Resumo

Vimos ao longo desse tutorial, passo-a-passo, como desenvolver um template para o Joomla!1.5, abordando alguns pontos com maior e/ou menor profundidade, conforme julgado pertinente. Devemos ter em mente:

• - Sites modernos separam o conteúdo da apresentação empregando a tecnologia conhecida com Folhas de Estilo em Cascata [Cascading Style Sheets (CSS)]. No Joomla!, o template controla a apresentação do conteúdo.
• - Quanto estiver criando um template para o Joomla!, você precisará ter o Joomla! "rodando" em um servidor, de forma que você possa fazer modificações e recarregar a página para ver o resultado.
• - Criar templates válidos deve ser o caminho e não a meta. A idéia é a de fazer templates o mais acessíveis possível, tanto para os seres humanos comuns como para os "experts", não para conseguir prêmios pela excelência do código.
• - O template mais básico carrega os módulos e componentes do Joomla! Leiaute e esboço são parte do [CSS] e não do Joomla!
• - Os designers dos modernos websites empregam [CSS] e não tabelas para posicionar elementos. Pode ser difícil aprender a técnica mas o investimento compensa. Existem vários recursos (que não são do Joomla!) que estão disponíveis para auxiliar você.
• - Joomla! processará e apresentará elementos de saída específicos, como: id e classes, no código da página do site (vide no seu navegador a opção "view source" - [ver fonte]). Isto pode ser visto e empregado para desenvolver estilos específicos de [CSS].
• - No Joomla! 1.5, a saída de módulos podem ser completamente customizadas, ou você pode empregar a saída padrão. Todas essas opções são chamadas de módulo de especificação de cor [module chrome].
• - É sempre preferível empregar saídas de menu no estilo com marcadores[bulleted] ou em listas [flat list]. Você poderá fazer uso de recursos livres na Web de códigos [CSS].
• - Os elementos, tais como, colunas ou localizações de módulos podem ser escondidos ou suprimidos [collapsed] quando não houver itens de conteúdo para serem apresentados nos mesmos. Isto é feito empregando-se comandos condicionais em PHP, que são lincados para diferentes estilos de [CSS].
• - Criar um template de produção (apresentação) do Joomla! é mais uma questão de desenvolvimento de recursos gráficos (imagens) e manipulação de [CSS] do que algum "conhecimento especial do Joomla!".
• - Joomla 1.5 oferece novos recursos para templates, que permitem aos "designers" controlar completamente o código e a apresentação do site.

Visite a área de download do site CompassDesign

Versão em PDF do arquivo de tutorial de template em PORTUGUÊS disponível para download

9. Links

Apresentamos vários links que podem ser úteis para o seu aprendizado e desenvolvimento. Vá em frente!: