Tutorial Template Joomla 1 5

Tutorial Template Joomla 1.
FAZENDO UM TEMPLATE PARA JOOMLA!1.5: [Making a Real Joomla 1.5 Template]
Neste tutorial vamos apresentar, passo-a-passo, como construir um template para o Joomla!1.5. Este foi baseado no apresentado no site www.compassdesigns.net, acesse-o aqui [ Tutotial em ingls - Joomla 1.5 Template Tutorial], e no constante do captulo 9 do livro: Joomla! A Users Guide Building a Joomla! Powered Website de Barrie North. Disponibilizamos aqui [Joomla15_TemplateTutorial_traduzido] a traduo do captulo 9, mencionado.
O que vamos encontrar aqui:
1. O que um template. 2. Passos para a elaborao de um template. 3. Estrutura tpica de um diretrio de um template. 4. O processo de criao de um template. 5. Arquivo templateDetails.xml. 6. O arquivo index.php. 7. Testando o template. 8. Resumo. 9. Links.
Ao final do item 7 disponibilizamos o arquivo final do template que construiremos aqui.
Bom estudo!
{mospagebreak}
1. O que um template?
O template constitudo por um conjunto de arquivos que controla como o contedo ser apresentado. Ele prov ao sistema Joomla! as informaes necessrias para o posicionamento de elementos, mdulos, componentes e as folhas de estilo. Em outras palavras, o template representa a "roupa", ou seja, o visual que o site apresentar. O template no o site da web, e nem mesmo pode ser considerado como um modelo de um site. O template o esboo principal bsico para visualizar o site. Para produzir o efeito de um site completo, o template trabalha em conjunto com o contedo armazenado nas bases de dados. Um exemplo pode ser visto na Figura 11-1. Fig. A Template Joomla Com amostras de contedo Fig. B Template Joomla Com pouco ou sem contedo
file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (1 of 50) [22/10/2008 13:38:33]
Tutorial Template Joomla 1.5
Figura 1: Template com e sem contedo
A Figura A apresenta o template em uso com amostras de contedo. A Figura B apresenta o template como ele deve parecer, com uma lista bsica de recursos da instalao, com pouco ou sem contedo. O template preparado de forma que quando o seu contedo for inserido, ele herdar as especificaes das folhas de estilo definidas, tais como o estilo de link, menus de navegao, tamanho do texto e cores, para citar alguns. Observe como as imagens associadas com o contedo (as imagens das pessoas) no so parte do template, enquanto a imagem no cabealho (parte superior da pgina) faz parte do mesmo.
O uso de um template tem as suas vantagens e desvantagens:
- vantagens:
H uma completa separao do contedo e da apresentao, especificamente quando o CSS empregado para a definio de leiaute (em oposio ao emprego de tabelas no arquivo index.php). Este um dos principais critrios para um site atender aos modernos padres da web. Um novo template, e da um visual completamente novo para um site, pode ser aplicado instantaneamente. Isto pode, inclusive, permitir a especificao de diferentes localizaes/posicionamentos de contedo, assim como cores e grficos.
- desvantagem:
Se leiautes diferentes forem necessrios para um site, isto pode ser difcil de se conseguir. Obviamente, o template ter que ser alterado.
Embora diferentes templates possam ser aplicados em diferentes pginas, esta construo, em funcionalidade, no confivel. O melhor empregar comandos condicionais em PHP e criar um leiaute que, dinamicamente, ajusta o nmero de colunas baseado no contedo a ser publicado.
{mospagebreak}
2. Passos para a elaborao de um Template

Vamos abordar, didaticamente, os seguintes passos para a elaborao de um template.
2.1. A definio do diretrio de trabalho Para a facilitao do nosso trabalho importante que tenhamos uma estrutura de um servidor local, o qual permitir que faamos as experimentaes que forem necessrias. Se no for possvel o trabalho em um servidor local voc pode trabalhar, da mesma forma, com as restries de acesso e direitos pertinentes, em um servidor remoto.
Para exemplificao, caso voc no tenha - ainda, um servidor local e esteja querendo experimentar o Joomla!, voc pode instalar o servidor WAMP, que constitudo de um servidor Apache, PHP e MYSQL. Faa o downloado do WAMPSERVER a partir do site http://www.wampserver.com/ . Aps o download, instale o programa. O processo de instalao simplificado e no apresenta maiores dificuldades. Voc deve escolher o local de instalao que melhor lhe aprouver. Por exemplo: c:/wamp/. Uma observao: caso voc tenha o "Skype" rodando, importante sair do "Skype" e voltar a entrar no mesmo, somente aps o servidor WAMP estiver funcionando.
Faa o download do Joomla! (Joomla! 1.5 - CMS) e instale-o. O Joomla! dever ser instalado no diretrio padro do servidor. No nosso caso, que estamos empregando o servidor WAMP, o mesmo dever ser instalado no diretrio c:/wamp /www/. No processo de descompactao para a instalao, escolha o nome adequado para o diretrio de seu site. Vamos definir que o nome do nosso diretrio MEUSITE. Neste caso, o diretrio de instalao ser: c:/wamp/www/meusite/.
Figura 2: Instalao do Joomla! no diretrio c:/wamp/www/meusite/
Aps concluir a descompactao dos arquivos do Joomla! na sua pasta c:/wamp/www/meusite/, voc dever executar o servidor WAMPSERVER, iniciando todos os servios e colocando-o "online". A partir do seu navegador chame o seu servidor local: http://localhost/. A pgina do WAMPSERVER ser aberta. Voc observar que abaixo do ttulo "YOUR PROJECTS" estar disponvel a sua instalao do Joomla! na pasta MEUSITE. Clique sobre o MEUSITE e conclua a instalao 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 usurio "avanado", ento, mantenha-o e no se preocupe com o pargrafo seguinte. Basta criar o diretrio de trabalho para o template: c:/wamp/www/meusite/meu_template/.
Vamos considerar, a partir deste momento, que a sua instalao do Joomla! est plenamente funcional na pasta c:/ wamp/www/meusite/. Vamos criar, finalmente, o nosso diretrio de trabalho para a elaborao de nosso template. Crie o diretrio /meu_template/ dentro da pasta do site. O seu template residir no seguinte diretrio: c:/wamp/ www/meusite/meu_template/ . Atribua os direitos de acesso adequados, lembrando-se que esse diretrio dever ter os direitos de leitura e escrita. A seguir, explicitaremos a estrutura tpica de um diretrio de um template (vide o item 3).
2.2. A edio de arquivos Qual ser a "cara" do MEUSITE? necessrio pensar na sua aparncia, no seu leiaute. Ter ele duas ou trs colunas? Como ser o cabealho [header]? Como ser o rodap [footer]? Vou empregar cores para o preenchimento e enfeites dos espaos ou figuras? Quantos mdulos eu vou precisar para a apresentao do
contedo?
A partir desses questionamentos, vamos definindo os recursos que precisaremos. interessante fazer um esboo no papel para facilitar o nosso trabalho. O esboo empregado ser o seguinte:
Figura 3: Esboo do MEU_TEMPLATE
Vamos explicitar melhor o esboo:
[1] = cabealho [header], nessa rea vamos dispor o nome do nosso site ( esquerda) e na posio USER1, o mdulo de busca [search] ( direita); empregaremos, tambm, na parte inferior, na posio USER2, o mdulo de menu superior [top menu] (posicionado direita).
[2] = parte superior [top], nessa rea vamos dispor da posio TOP e empregar o mdulo de informativos [newsflash];
[3] = coluna esquerda [leftcolumn] ou barra lateral_1 [sidebar], nessa rea disporemos na posio LEFT os mdulos que quisermos, especialmente, o menu principal;
[4] = rea central [center] ou rea de contedo [content], preencheremos essa rea com contedo diversificado, especialmente a descrio do local onde se est navegando no site [pathway / breadcrumbs] e o contedo especificado para aparecer na pgina frontal [frontpage];
[5] = coluna direita [rightcolumn] ou barra lateral_2 [sidebar2], nessa rea disporemos na posio RIGHT os mdulos que desejarmos, especialmente, o mdulo de enquete;
[6] = rodap [footer] e/ou parte inferior [bottom], podemos dispor nessa rea, na posio FOOTER e/ou BOTTOM dos mdulos que desejarmos, especialmente uma propaganda [BANNER] e informaes de direitos
autorais [COPYRIGHT].
Em resumo, as decises que tomaremos so as seguintes:
Uma primeira deciso: Vamos elaborar um template que tenha uma linha horizontal de cabealho, outra linha horizontal superior, abaixo do cabealho, trs colunas (esquerda, centro e direita) e uma linha inferior de rodap. Uma segunda deciso: Vamos empregar, preferencialmente cores para o preenchimento de espaos (para facilitar o nosso tutorial) e algumas poucas figuras (aquelas existentes para o nosso template modelo). No sei quanto a voc, mas para a edio de figuras costumo empregar o "Fireworks", "Photoshop" e etc. Como no sou "expert" nem nessa e nem naquela ferramenta, vou, literalmente, fazendo o possvel, 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 aparncia. Uma terceira deciso: Para facilitar edies futuras do MEU_TEMPLATE vamos empregar os recursos das folhas de estilos [stylesheets - arquivos CSS]. Uma quarta deciso: A definio da posio dos mdulos. Este nosso template modelo empregar apenas algumas posies especficas para mdulos especficos, as quais so ligeiramente diferente do posicionamento dos mdulos definidos na instalao do Joomla! Para ter certeza de que os mdulos estaro posicionados corretamente, assegurese do seguinte:
User1= empregado para o posicionamento do mdulo de busca [search module] User2= empregado para o posicionamento do mdulo de menu superior [top menu] Top= empregado para o posicionamento de informaes[newsflash] ou mdulos especficos de html [HTML module]
Lembre-se, nada mais dever ser publicado nessas posies. Para evitar qualquer impresso errada, assegure-se de entrar na rea de administrao do MEUSITE e alterar as informaes dos mdulos acima mencionados, conforme apresentado.
Figura 4: rea de administrao - Gerenciamento de Mdulos [Module Manager]
So tantos os recursos necessrios que a primeira vista, parece-nos, que necessrio ser um "expert" para criar um template. No necessariamente! preciso boa vontade e disposio. Comeando a partir de um modelo temos o nosso trabalho facilitado. Vamos explicitar o processo de criao de um template posteriormente. (vide o item 4).
2.3. A criao do arquivo templateDetails.xml O arquivo templateDetails.xml deve relacionar todos os arquivos que faam parte do template. Ele tambm relaciona informaes, tais como o nome do autor e direitos autorais. Algumas dessas informaes so mostradas na rea de administrao/manuteno na opo de Gerenciamento de Template [Template Manager]. Para maiores informaes (vide o item 5).
2.4. A criao do arquivo index.php O que de fato existe em um arquivo index.php? Ele uma combinao de cdigos (X)HTML e PHP que determinam tudo a respeito do leiaute e apresentao das pginas. 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 no, o momento de voltar e rever algum detalhe que passou despercebido. Vamos tecer alguns comentrios sobre esse tpico mais abaixo. (vide o item 7).
{mospagebreak}
3. Estrutura tpica de um diretrio de um Template

comum que os templates possuam, ao menos, quatro arquivos:
index.php Dispe da lgica para a apresentao e posicionamento de mdulos e componentes.
template.css Controla os aspectos da apresentao do template, incluindo as especificaes de margens, fontes, cabealhos, bordas das imagens, formatao de listas e etc.
templateDetails.xml Armazena as informaes relacionadas ao templates e empregadas no processo de instalao e pelo Gerenciador de Template [Template Manager].
template_thumbnail.ext - substitua o .ext com o formato da extenso 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 visualizao do template antes de o mesmo ser aplicado ao site.
Um template padro para o Joomla! 1.5 pode incluir os seguintes diretrios:
css - contm todos os arquivos .css. html - contm arquivos de especificaes para o template, a serem processados pelo sistema Joomla! images - contm todas as imagens empregadas no template.
Vamos criar dentro do diretrio do /meu_template/ os subdiretrios mencionados. Passaremos a ter a seguinte estrutura:

c:/wamp/www/meusite/meu_template/css/ c:/wamp/www/meusite/meu_template/html/ c:/wamp/www/meusite/meu_template/images/
Agora, temos a nossa estrutura de diretrios pronta. Vamos por mos obra e criar no nosso template. Clique aqui para selecionar o modelo de template que vamos empregar. [nota: ser necessrio estar cadastrado no site "compassdesigns" e se logar. Aps logar-se, selecionar a pasta "joomla 15 template" e na pgina seguinte o arquivo JS_BOLD] Vamos empregar, como modelo bsico, o template JS_Bold_15. Aps baixar o arquivo, descompacte-o em um diretrio provisrio. Copie os arquivos da pasta JS_Bold (que apareceu no diretrio provisrio criado para a descompactao) para as posies respectivas na estrutura de diretrio que voc criou, ou seja, os arquivos da pasta:

/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/.
Observe que o template modelo JS_Bold no possui a pasta /html/. E voc poder observar a presena do nosso novo template disponvel no Gerenciador de Template [Template Manager]. No se preocupe com ele nesse momento.
Figura 5: Gerenciador de template [Template Manager] - presena da instalao do template JS_Bold.
{mospagebreak}
4. O processo de criao de um Template

O processo de criao de um template comea com as habilidades criativas de seu idealizador. O quanto de criatividade voc tem? Acha que pode desenvolver alguma? Eu acredito que voc pode! Ento, mos obra!
4.1. Definio do cabealho [header] O nosso cabealho ter uma imagem de fundo [background], na cor preta, como um leve enfeite no topo. Tambm, vamos atribuir uma cor. Dessa maneira o cabealho escalar verticalmente, se necessrio, por exemplo, se o tamanho da fonte for redimensionada, sem implicar em perda da qualidade que queremos. Tambm, 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 cdigo CSS para termos certeza que apontaremos para a entrada certa.
Eis o nosso cdigo CSS, pertinente as especificaes do cabealho que queremos:
/*Especificaes do cabealho*/ #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 cabealho [#212121], alm da sua imagem prpria [header.png]. Algumas especificaes de enfeite foram empregadas no ttulo do cabealho [H1]. E atribui-se a imagem [search.png] para a caixa de pesquisa.
Observe que no foi empregado um logotipo grfico aqui, mas texto puro. A razo principalmente porque os mecanismos de busca no podem ler imagens. Algum poder substituir por belas imagens, mas deixo isso como exerccio para voc.
Figura 6: Aparncia final do cabealho [header]..
4.2. Definio do fundo [bakground] das colunas Lembre-se que quando colocamos cor de fundo [bakground] em colunas, a cor no se estende at o rodap. Isto porque o elemento <div>, neste caso sidebar e sidebar-2, preenche somente o tamanho do contedo. Ele no cresce para complementar todo o espao do elemento.
Para resolver a situao apresentada acima empregaremos a tcnica 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 invlucros <elementos div> para colocar os fundos. Poderamos aplicar uma ao invlucro maior (#wrap), mas estou empregando um invlucro extra (e trabalhoso) para ilustrao, 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 mxima que estamos considerando para o template de 960px, dessa forma comeamos 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 tm 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 faam parte da propriedade do fundo [background]. Observe, abaixo, o cdigo CSS empregado:
/*Especificaes 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, tambm, esses elementos [div] dentro de comandos condicionais, pois, se no houver contedo a ser apresentado a coluna pertinente no ser apresentada.
<?php if($this->countModules('left')) : ?> <div id="leftfauxcol"> <?php endif; ?> <?php if($this->countModules('right')) : ?> <div id="rightfauxcol"> <?php endif; ?>
necessrio tambm colocar uma cor de fundo tanto no rodap [footer] quanto no mdulo/elemento inferior [bottom], pois de outra forma, as colunas seriam apresentadas sobre estes.
/*Especificao do rodap*/ #footer { background:#212121; color:#fff; text-align:right; clear:both; } /*Especificao 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 alm da parte inferior da pgina. O mtodo tradicional para fazer isso aplicando a propriedade [:after], Porm, a partir do lanamento do IE7, este mtodo pode no funcionar a contento. Precisamos especificar as formas de aplicao do [clear] no IE 6&7, o que apresentaremos abaixo
Encontramos algumas solues.
Empregaremos o comando [float] em quase todas as opes por aqui.
Ento, adicionamos um nico comando clear:both ao rodap[ #footer] e tambm para as colunas faux. Adicionamos estes comandos condicionais especificamente na folha de estilo do IE6. Vide abaixo:
#leftfauxcol,#rightfauxcol,#footer { float:left; width:100%; }

Tambm, precisamos adicionar alguns comandos condicionais no marcador [head] do arquivo index.php:
 
Ufa! O que voc achou? Confuso? O que fizemos foi, simplesmente, encontrar uma maneira de termos trs colunas e que as mesmas tivessem o mesmo tamanho, ou seja, em termos de apresentao da padronizao do fundo, e no em termos do contedo. Se quiser personalisar, por exemplo, edite as figuras de "fauxcolumn", colocando a parte do fundo da coluna que aparece na cor e padro que voc quiser.
O mtodo "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 cdigos CSS completos de configurao de um site com quantas colunas quiser. Aqui esto alguns sites que voc pode pesquisar. Divirta-se!
http://www.maujor.com
http://css.maxdesign.com.au/
4.3. Mdulos flexveis No nosso esboo, temos um bloco de mdulo grande no incio. No sabemos o quo extenso ser o texto que vai ser includo l. Para resolver este problema pusemos o comando de posicionamento do mdulo [jdoc: include] incluso em um elemento de invlucro [div] e especificamos para ele um fundo da mesma cor da imagem. Esta a mesma estratgia que empregamos para o cabealho [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"> </div> <?php endif; ?>
Observe que tambm empregamos um comentrio condicional de forma que se a localizao do mdulo top [superior] no tiver contedo, no haver erro. O que vai estar l um invlucro [div] vazio que conter uma parte
da imagem de fundo e um valor de espaamento de 20px, somente para fim esttico.
preciso empregar as especificidades do CSS para sobrescrever os estilos da tabela com as especificaes do mdulo [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 precisaro estar na cor branca [color:#fff]. Ento, 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 esboo possui botes [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 seo [sectiontable], como as FAQ [ perguntas mais freqentes], podemos adicionar facilmente um fundo [background] repetindo o uso da imagem que j empregamos para destacar [teaser.png]. A reutilizao de imagens comum e tambm economiza em download, tornando a pgina mais rpida.
sectiontableheader { background:url(../images/teaser.png); color:#fff; font:1.2em bold Arial, Helvetica, sans-serif; padding:5px; }

As tabelas de mdulos [moduletable] precisam de apenas uma simples redefinio e ajustes nos espaamentos (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 mdulos de Menus [moduletablemenu], como sempre, precisam de muitos estilos CSS. Aqui vamos fazer o mais simples possvel. Ns fatiamos uma simples imagem que inclua ambos, o marcador [bullet] e a e a marca de sublinhado [underline]. Observe que o estilo ligado aplicando um sufixo de mdulo de menu para qualquer lista de links que queiramos que tenha a mesma aparncia 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 escalveis e as fontes possam alterar o seu tamanho. Felizmente, uma tcnica foi desenvolvida para fazer isso, e de fato com o mesmo princpio que empregamos para as nossas colunas, as portas deslizantes [ sliding doors] novamente!
Tambm fizemos alguma otimizao em velocidade para o template e empregamos uma nica imagem para a alternncia de esquerda e a direita, assim como os estados de ligado [on] e desligado [ off].
O CSS no to 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 aparncia, considerando tudo o que vimos at este momento, do MEU_TEMPLATE a que se segue:
Figura 7: Aparncia final do MEU_TEMPLATE... at este momento...
4.5. Personalizando o MEU_TEMPLATE Podemos experimentar algumas modificaes, pois, certamente, nem todos gostam do amarelo ou vermelho. Eu prefiro a cor verde. Ento, vamos exercitar a nossa criatividade e fazer algumas experimentaes.
4.5.1. Para conseguir o resultado que se espera
Fizemos algumas alteraes para que o resultado estivesse o mais prximo daquele que era esperado. Por exemplo: Fazer com que as cores do menu superior [top menu] se alternassem nas condies de [hover ou active] foi complicado. Da mesma forma, indicar a condio de menu ativo [active] ligado nos outros menus. Algumas modificaes no cdigo CSS foram necessrias:
(1) Modificao no controle de estilo dos menus, de forma que a marcao do menu ativo (active) estivesse ligada, com definio da cor de fundo.
/*Menu Styling*/ /* ACRESCENTADO */ a.mainlevelmenu#active_menumenu { text-decoration:none; color:#fff; background:#212121; }
(2) Modificao no controle de estilo do menu de abas (top menu), de forma que houvesse a correta alterao das cores relativas posio 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 pgina [body], para destacar a pgina 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 estgios de transio de botes
(1) Alteramos o tipo de indicao do cursor para [pointer] e inclumos o comando de [input:focus, input:hover] para que houvesse a alternncia de imagem quando o mouse estivesse sobre o boto; certamente, tivemos que definir uma segunda imagem para o boto, 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. Includo novo estilo de mdulo [ _line]
(1) Inclumos, como demonstrao os cdigos CSS pertinentes a um novo estilo de mdulo, do tipo linha com os cantos arredondados e fundo branco. Veja abaixo o cdigo pertinente:
/*acrescentado estilo de mdulo 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; }
Atribumos ao mdulo de indicao da posio de navegao no site [pathway - breadcrumbs] as caractersticas do tipo [_line]. Foi necessrio proceder as seguintes alteraes:
(a) No gerenciamento do mdulo modificamos o [Module Class Suffix] para [_line] e alteramos o ttulo [title] para "voc est aqui:"
Figura 8: Gerenciamento de mdulo - especificao da classe do sufixo do mdulo e alterao do ttulo..
(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 aplicao desse novo estilo de mdulo o apresentado abaixo:
Figura 9: Aparncia do MEU_TEMPLATE com a incluso do mdulo tipo [_line]
4.6. Recursos avanados do template Parmetros do Template [Template Parameters] Sobreposio do Template [Template Overrides] De forma a ilustrar alguns recursos avanados de template, copiamos alguns dos recursos encontrveis no arquivo:
templatetutorial15bold.zip, tambm, da CompassDesign, que passaremos a explicitar abaixo.
Joomla!1.5 oferece um nmero avanado de recursos de template que significativamente expande o que possvel fazer com templates. Veremos cada um deles abaixo:
Parmetros do Template
Este recurso novo no Joomla!1.5. Este parmetro permite a voc passar variveis ao template para opes selecionveis a partir da rea de administrao do site.
Podemos incluir uma funo de parmetro relativamente fcil 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>
Tambm, ser necessrio incluir no diretrio do template um arquivo chamado params.ini. Ele pode ser um arquivo em branco, mas o Joomla! precisa desse arquivo para armazenar a opo 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 alteraes possam se processadas. Tambm, precisaremos relacionar este arquivo no arquivo templateDetails.xml.
Na tela de Gerenciamento de Template, no template em questo, voc poder ver as opes estabelecidas como parmetros, como mostrado na figura abaixo:
Figura 10: Parmetros do template - opes.
Podemos ver que uma simples lista com trs opes.
<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>
Ento, devemos fazer a seguinte alterao 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 trs opes: uma largura estreita fixa, uma largura maior fixa, e uma de largura automtica [fluid]. Empregando parmetros de template dessa maneira pode dar ao administrador do site flexibilidade em quase todos os aspectos do template, como: largura, cor e etc., todos controlveis com comandos condicionais PHP.
Sobreposio de Template
Talvez o mais poderoso dos novos recursos de template no Joomla!1.5 seja a possibilidade de facilmente sobrescrever o comando de sada do sistema. Isto feito com novos arquivos de sada chamados de arquivos do template que correspondem a visualizaes de leiaute de componentes e mdulos. Joomla! verifica em cada caso para ver se um deles existe na pasta do template, e se houver, emprega as especificaes do mesmo para sobrescrever a sada normal.
Sobrepondo a estrutura
Todas as visualizaes de leiate e de template esto na pasta /tmpl/. A localizao ligeiramente diferente para componentes e mdulos, porque os mdulos especialmente somente tem uma nica visualizao. Exemplo:
modules/mod_newsflash/tmpl/ modules/mod_poll/tmpl/ components/com_login/views/login/tmpl/ components/com_content/views/section/tmpl/

A estrutura bsica de todos os componentes e mdulos [View>Layout>Templates].
A tabela abaixo apresenta alguns exemplos, observe que os mdulos somente tm uma visualizao [view].
Visualizao [View] Categoria [Category] Categoria [Category]
Leiaute [Layout] Blog.php default.php
Templates blog_item.php blog_links.php default_items.php
Mdulo de Informativo [Newsflash module]
default.php horz.php vert.php
_item.php
Atualmente existem vrios arquivos de templates relacionados a leiautes especficos. Eles possuem uma conveno comum de nome. Veja a tabela a seguir:
Conveno do nome do arquivo layoutname.php
Descrio The master layout template A child layout template called from the master layout file A common layout template used by different layouts
Exemplo blog.php blog_item.php blog_links. php _item.php
layoutname_templatename.php
_templatename.php
Sobrepondo a especificao de Mdulos
Cada mdulo tem uma nova pasta onde possui especificaes de seu prprio template, que chamada /tmpl/. Dentro dessa pasta esto arquivos PHP que criam as sadas 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 trs primeiros arquivos acima so trs leiautes do Informativo [Newsflash] e baseados nos quais as opes do mdulo so selecionadas, e o arquivo _item.php o leiaute de template comum empregado pelos outros trs. Abrindo aquele arquivo ns 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; ?>
Ns podemos alterar este arquivo para removermos as tabelas, para que o mesmo fique mais acessvel:
<?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 diretrio do template, na pasta denominada /html/, como se segue:
templates/meu_template/html/mod_newsflash/_item.php
Resultado: Apenas retiramos as tabelas do mdulo de informativo [mod_newsflash]. Fcil, no?!...
Sobrepondo a especificao do Componente
Os Componentes trabalham quase que exatamente da mesma maneira, exceto pelo fato de que existem muitos tipos de visualizaes 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

Ento, estas pastas devem corresponder as cinco visualizaes possveis para o contedo: arquivo, artigo, categoria, frontpage e seo. Dentro de uma pasta de visualizao [view], encontraremos uma pasta chamada /tmpl/, e dentro desta, os diferentes leiautes possveis.
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 padro que apresenta artigos em uma lista de link.
Abrindo-se o arquivo blog_item.php veremos as tabelas empregadas atualmente. Se desejamos sobrepor a sada 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 visualizaes das respectivas pastas /components/ e / modules/ para a pasta em templates/meu_template/html, e processar nesses arquivos copiados as alteraes desejadas.
A funcionalidade de sobreposio um mecanismo poderoso para customizar o seu site do Joomla! a partir do seu template. Voc pode criar sadas que foco nos instrumentos de buscas [SEO], acessabilidade ou outras necessidades especficas.
O mais importante que voc deve saber Joomla! 1.5 oferece novos recursos para templates que permitem aos desenvolvedores [designers] controlar completamente o cdigo e a apresentao de um site.
Joomla! sem tabelas
Na seo de download do Joomla! existe um template chamado de Beez que um exemplo, na prtica, de um template com recurso de sobreposio. O gupo que cuida do esboo e a acessibilidade criaram um exemplo completo de recursos de sobreposio, contidos na pasta /html/ daquele template. No tpico seguinte apresentamos um template que emprega os recursos de sobreposio para remover todas as tabelas das sadas do Joomla!.
Template modelo sem tabelas: CSSTemplateTutorials1-4.zip

Temos um template baseado em um modelo (ou esboo). Mais recursos visuais de topografia foram adicionados, mas, mais importante, empregamos nosso leiaute CSS puro que possui colunas dinmicas dobrveis [collapsible] e um esperto menu em abas. Tambm, sobrepomos a sada do Joomla! de que forma nenhuma tabela seja usada. Foi criado um arquivo de instalao para esse template, que est disponvel 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.
{mospagebreak}
5. Arquivo templateDetails.xml
Como dissemos, o arquivo templateDetails.xml deve relacionar todos os arquivos que compem 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>maro 2008</creationDate> <author>Barrie North (original) - Geciel R. Costa (traduo)</author> <copyright>Attribution-NonCommercial-ShareAlike 3.0 Unported</copyright> <authorEmail>compassdesigns@gmail.com</authorEmail> <authorUrl>www.compassdesigns.net/www.joomla.com.br (traduo)</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">flexvel [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 sequncia, temos:
r r
r r
r r r r
- Definio da verso do [xml] e codificao de fonte. - Os contedos de um documento XML so instrues para o instalador da rea de administrao. A opo type=template diz ao instalador que estamos instalando um template e para o Joomla 1.5. No 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 tambm empregado para criar o diretrio dentro da pasta templates. Contudo, ele no deve conter qualquer caractere que o sistema de arquivos no possa processar, por exemplo, espaos. Se instalar manualmente, voc precisar criar um diretrio que tenha um nome idntico 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 informao de direitos autorais vai aqui neste elemento. Um tipo de licenciamento para desenvolvedores e programadores pode ser encontrado nos fruns do Joomla. (http://forum.joomla.org/ e http:// forum.joomla.org/index.php/board,23.0.html). - <authorEmail> - Endereo de email onde o autor do template pode ser encontrado. - <authorUrl> - O endereo do site do autor do template. - <version> - A verso do template. - <description> - Uma descrio qualquer, que identifique o template. Mantivemos a descrio 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>maro 2008</creationDate>
<author>Barrie North (original) - Geciel R. Costa (traduo)</author> <copyright>Attribution-NonCommercial-ShareAlike 3.0 Unported</copyright> <authorEmail>compassdesigns@gmail.com</authorEmail> <authorUrl>www.compassdesigns.net/www.joomla.com.br (traduo)</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 relao de todos os arquivos que compem o nosso template, incluindo a meno de seus diretrios/sub-diretrios, alm do prprio 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 declarao de todos os mdulos que sero empregados no template. Todas as posies de mdulos devem ser declarados aqui, para
que os mesmos estejam disponveis para serem selecionados na rea de administrao do site, na opo Gerenciamento de Mdulos [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 definio de parmetros que definiremos para o template e que estaro associados ao mesmo, e disponveis para seleo na rea de administrao, no menu de Gerenciamento de Template [Template Manager]. Apresentamos mais informaes sobre esse assunto no item 4.6. Recursos avanados do template - Parmetros 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">flexvel [fluid] (min/max com FF e IE7, 80% com IE6)</option> </param> </params>
{mospagebreak}
6. O arquivo index.php
Este o arquivo responsvel pela apresentao, por fim, do template. Vejamos algumas especificidades:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this>language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this>direction; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />   <?php if($this->countModules('left and right') == 0) $contentwidth = "100"; if($this->countModules('left or right') == 1) $contentwidth = "80"; if($this->countModules('left and right') == 1) $contentwidth = "60"; ?> </head> <body class="width_<?php echo $this->params->get('template_width'); ?>"> <div id="wrap"> <?php if($this->countModules('left')) : ?> <div id="leftfauxcol"> <?php endif; ?> <?php if($this->countModules('right')) : ?> <div id="rightfauxcol"> <?php endif; ?> <div id="header"> <div class="inside"> <h1><?php echo $mainframe->getCfg('sitename');?></h1> <jdoc:include type="modules" name="user1" style="raw" /> </div>  <jdoc:include type="modules" name="user2" style="xhtml" /> 
<?php if($this->countModules('top')) : ?>   </div>   <div id="top"> <div class="inside"> <jdoc:include type="modules" name="top" style="xhtml" /> </div> </div> <?php else : ?> <div id="top"> </div> <?php endif; ?> <?php if($this->countModules('left')) : ?> <div id="sidebar"> <div class="inside"> <jdoc:include type="modules" name="left" style="xhtml" /> </div> </div> <?php endif; ?> <div id="content<?php echo $contentwidth; ?>"> <div class="inside"> <div id="pathway"> <jdoc:include type="module" name="breadcrumbs" style="rounded"/> </div> <jdoc:include type="component" style="xhtml" /> </div> </div> <?php if($this->countModules('right')) : ?>
<div id="sidebar-2"> <div class="inside"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> </div> <?php endif; ?> <?php if($this->countModules('footer')) : ?> <div id="footer"> <div class="inside"> <jdoc:include type="modules" name="footer" style="raw" /> </div> </div> <?php endif; ?> <?php if($this->countModules('bottom')) : ?> <div id="bottom"> <div class="inside"> <jdoc:include type="modules" name="bottom" style="horz" /> </div> </div> <?php endif; ?> <?php if($this->countModules('left')) : ?> </div>  <?php endif; ?> <?php if($this->countModules('right')) : ?> </div>  <?php endif; ?> <div class="design"><a href="http://www.joomla.com.br" title="site: www.joomla.com. br" target="_blank">porque você merece o melhor!</a> </div> </div>  </body> </html>
Vamos tecer alguns comentrios. Acompanhe:
Primeiro olharemos para uma parte crtica de se conseguir templates vlidos, o DOCTYPE existente no topo do arquivo index.php. Este um pedao de cdigo que aparece na parte superior de cada pgina da web. No topo da pgina do nosso template temos o seguinte:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this>language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this>direction; ?>" >
O DOCTYPE a parte fundamental do componente a partir da qual uma pgina da web apresentada em um navegador e refere-se, especialmente, a como um navegador interpreta o [CSS]. Para dar-lhe um sentido do que isto significa, veja uma observao do site http://www.alistapart.com: [informao sobre doctypes no W3C diz que doctypes ] escrito por nerds para nerds. E quando digo nerds, no quero dizer profissionais comuns da web como eu e voc. Quero dizer aqueles que fazem o resto de ns parecermos como avs no primeiro dia em que recebem um email.
De qualquer maneira, h diversos tipos de doctypes que voc pode empregar. Basicamente, o doctypes diz ao navegador como interpretar a pgina. Aqui as palavras strict e transitional iniciam posicionando as flutuaes existentes (float: left e float:right, normalmente). Essencialmente, desde quando a WWW iniciou, diferentes tipos de navegadores tm diferentes nveis de suporte a [CSS]. Isto significa, por exemplo, que o Internet Explorer no entender o comando minwidth para estabelecer a largura mnima da pgina. Para conseguir o mesmo resultado voc ter que empregar hacks (cortes ou novos cdigos de programao, ou seja, hackear) o cdigo [CSS]. Um doctype do tipo transitional significa que pgina ser permitida umas poucas diferenas em relao aos padres.
O cdigo PHP abaixo est carregando os parmetros de idioma especificados no arquivo de configurao global do site.
<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
Vamos observar a estrutura do marcador de cabealho [head] primeiro; queremos ser o mais concisos possveis, porm, descrever o suficiente para a elaborao de um site. A informao de cabealho que empregamos a seguinte:
<head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />   <?php if($this->countModules('left and right') == 0) $contentwidth = "100"; if($this->countModules('left or right') == 1) $contentwidth = "80"; if($this->countModules('left and right') == 1) $contentwidth = "60"; ?> </head>
Na sequncia do cabealho, temos:
Especificao do contedo do cabealho:
<jdoc:include type="head" />
Especificao da folha de estilo:
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
Especificao da folha de estilo para o IE6 e/ou IE7:
 
Especificao condicional para a largura da rea de contedo: se no houver contedo nas colunas esquerda e direita [('left and right') == 0)], a rea do contedo ser de 100%; se houver contedo em apenas uma das colunas, esquerda ou direita [('left or right') == 1)], a rea do contedo ser de 80%, e se houver contedo em ambas as colunas esquerda e direita [('left and right') == 1)], o contedo ter a largura de 60%.
<?php if($this->countModules('left and right') == 0) $contentwidth = "100"; if($this->countModules('left or right') == 1) $contentwidth = "80"; if($this->countModules('left and right') == 1) $contentwidth = "60"; ?>
Vamos falar sobre o que est dentro do marcador <body>:
Antes, seria interessante apresentar qual seria o contedo simplificado de um marcador <body> de um template sem preocupaes com leiaute, ou seja, apenas o nome do site e as especificaes dos mdulos de posicionamento seriam apresentadas, alm do prprio contedo [component].
Figura 11: comandos para um template simples, sem maiores preocupaes com leiaute.
O nosso template apresenta as seguintes particularidades no marcador <body> :
Seleo "automtica" do parmetro do template, neste caso a largura, que foi definida no arquivo templateDetails.xml (ver item 4.6 - Recursos avanados do template)e foi selecionada a partir do Gerenciamento do Template [Template Manager], na rea de administrao do site.
<body class="width_<?php echo $this->params->get('template_width'); ?>">

Verificao da existncia ou no de contedo nos mdulos de posio esquerda e/ou direita. Se houver contedo, as colunas respectivas so montadas e apresentadas com o seu contedo pertinente.
<?php if($this->countModules('left')) : ?> <div id="leftfauxcol"> <?php endif; ?> <?php if($this->countModules('right')) : ?> <div id="rightfauxcol"> <?php endif; ?>
Montagem das duas linhas superiores do site: na primeira linha com o nome do site [sitename] e o mdulo de busca [user1]; logo abaixo vem o posicionamento do mdulo de menu de abas [user2] . Para que o menu de abas aparecesse na posio que "julgamos" correta, foi feito o posicionamento de correo no cdigo, por isso a indicao de [] e []. Na segunda linha temos o posicionamento do mdulo de informaes [top], com comando condicional PHP para verificar a existncia ou no de contedo para esse mdulo; se no houver contedo a linha no aparecer [<?php if($this->countModules('top')) : ?>]. Por fim, existe comandos javascript especfico para o IE7 para correo da funo de "onmouse...".
<div id="header"> <div class="inside"> <h1><?php echo $mainframe->getCfg('sitename');?></h1> <jdoc:include type="modules" name="user1" style="raw" /> </div>  <jdoc:include type="modules" name="user2" style="xhtml" />  <?php if($this->countModules('top')) : ?>   </div>   <div id="top"> <div class="inside"> <jdoc:include type="modules" name="top" style="xhtml" /> </div> </div> <?php else : ?> <div id="top"> </div> <?php endif; ?>
Verificao da existncia de contudo para a coluna esquerda e o posicionamento dos respectivos mdulos. Tambm um comando condicional, pois se no houver contedo a ser apresentado a coluna no ser mostrada.
<?php if($this->countModules('left')) : ?> <div id="sidebar"> <div class="inside"> <jdoc:include type="modules" name="left" style="xhtml" /> </div> </div> <?php endif; ?>
Apresentao do contedo da coluna central. Primeiro apresentado o caminho da pgina em que o usurio do site est [breadcrumbs], cujo estilo foi modificado para [rounded], como vimos no item [4.5.4. - Incluindo novo estilo de mdulo [_line]]; depois, logo abaixo, o contedo do site especificado para aparecer na pgina de abertura [frontpage], definido pelo comando: [<jdoc:include type="component" style="xhtml" />].
<div id="content<?php echo $contentwidth; ?>"> <div class="inside"> <div id="pathway"> <jdoc:include type="module" name="breadcrumbs" style="rounded"/> </div> <jdoc:include type="component" style="xhtml" /> </div> </div>
Verificao da existncia de contudo para a coluna direita e o posicionamento dos respectivos mdulos. Tambm um comando condicional, pois se no houver contedo a ser apresentado a coluna no ser mostrada.
<?php if($this->countModules('right')) : ?> <div id="sidebar-2"> <div class="inside"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> </div> <?php endif; ?>
Duas linhas condicionais inferiores: primeira linha para apresentao, se houver, do contedo do mdulo de posio de rodap [footer], e na segunda linha, se houver, apresentao do mdulo de posio inferior [bottom].
<?php if($this->countModules('footer')) : ?> <div id="footer"> <div class="inside"> <jdoc:include type="modules" name="footer" style="raw" /> </div> </div> <?php endif; ?> <?php if($this->countModules('bottom')) : ?> <div id="bottom"> <div class="inside"> <jdoc:include type="modules" name="bottom" style="horz" /> </div> </div> <?php endif; ?>
Fechamento, com comandos condicionais, dos marcadores <div> das colunas da esquerda e direita..
<?php if($this->countModules('left')) : ?> </div>  <?php endif; ?> <?php if($this->countModules('right')) : ?> </div>  <?php endif; ?>
Fechamento, com comandos condicionais, dos marcadores <div> das colunas da esquerda e direita..
<?php if($this->countModules('left')) : ?> </div>  <?php endif; ?> <?php if($this->countModules('right')) : ?> </div>  <?php endif; ?>
Mensagem do fundo da pgina, que aparece abaixo das posies de rodap e inferior.
<div class="design"><a href="http://www.joomla.com.br" title="site: www.joomla.com. br" target="_blank">porque você merece o melhor!</a> </div>
O nosso template, por fim, ficou com a seguinte aparncia:
Figura 12: Aparncia do MEU_TEMPLATE.
{mospagebreak}
7. Testando o Template
Esta a hora de verificarmos se conseguimos o resultado que queramos ou mudar o que for necessrio. Para o nosso propsito, o de demonstrar passo-a-passo a elaborao de um template para o Joomla!1.5, acreditamos que o resultado est satisfatrio.
O que devemos fazer, ento:
- montagem da figura [template_thumbnail.png] , insero da mesma na pasta raiz do template e relacion-la no arquivo templateDetails.xml. Como voc far isso, certamente, ser um exerccio de criatividade. O seu resultado ser melhor que o nosso. - verificar na rea de administrao, no menu de Gerenciamento de template [Template Manager] se as informaes 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. Tambm, interessante, acessar o template e deixar selecionado o tamanho da largura da tela que deseja [escolhemos o padro flexvel. Definir este MEU_TEMPLATE como padro [Default]. - acessar o MEU_SITE, observar a pgina principal [de abertura - frontpage], navegar pelas opes de menu e verificar se a coluna esquerda e/ou direita deixa de aparecer quando no h contedo. Voc pode entrar na rea de administrao, na rea de Gerenciamento de Mdulos [Extensions/Modulo Manager] e cancelar os contedos para uma ou outra posio e verificar se, realmente, o mdulo deixa de aparecer quando no h contedo. Fizemos algumas modificaes: (a) editamos o mainmenu [menu principal], na rea de administrao do site, na opo padro [default - home], os parmetros bsicos (parameters - basic), de forma que somente uma coluna de contedo fosse apresentada e no duas; (b) tambm, na rea de administrao, na opo de Gerenciamento de Mdulos [Module Manager], fizemos o cancelamento da publicao dos mdulos da posio da direita [right] e outros da esquerda [left], e (c) Inclumos um mdulo de suprimento de notcias [RSS feeds] na parte inferior [bottom] da pgina, para que a mesma fosse mostrada.
Figura 13: rea de administrao - Gerenciamento de Menu.

Figura 14: rea de administrao - Gerenciamento de Menu - Item de Menu - Modificao dos Parmetros Bsicos.
Figura 15: O nosso template final. A coluna direita foi omitida, pois no foi especificado contedo para a mesma.
Compactar o arquivo do MEU_TEMPLATE para distribuio. Se voc tem certeza de que est tudo ok!, resta, ento, a preparao do template para distribuio. 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 distribuio, voc faa um teste de instalao em um outro site Joomla!. Se houver alguma coisa errada, use a sua criatividade para fazer o certo. E no se esquea: ao especificar o MEU_TEMPLATE como padro [default] no outro site, lembrar-se de adequar os mdulos existentes s posies definidas no template.
Aqui est o arquivo MEU_TEMPLATE.ZIP, o nosso template, pronto e testado, para ser distribudo. Caso julgue necessrio ter uma cpia em PDF deste contedo, favor CLICAR AQUI.
Bom divertimento!
{mospagebreak}
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 contedo da apresentao empregando a tecnologia conhecida com Folhas de Estilo em Cascata [Cascading Style Sheets (CSS)]. No Joomla!, o template controla a apresentao do contedo. - Quanto estiver criando um template para o Joomla!, voc precisar ter o Joomla! "rodando" em um servidor, de forma que voc possa fazer modificaes e recarregar a pgina para ver o resultado. - Criar templates vlidos deve ser o caminho e no a meta. A idia a de fazer templates o mais acessveis possvel, tanto para os seres humanos comuns como para os "experts", no para conseguir prmios pela excelncia do cdigo. - O template mais bsico carrega os mdulos e componentes do Joomla! Leiaute e esboo so parte do [CSS] e no
do Joomla! - Os designers dos modernos websites empregam [CSS] e no tabelas para posicionar elementos. Pode ser difcil aprender a tcnica mas o investimento compensa. Existem vrios recursos (que no so do Joomla!) que esto disponveis para auxiliar voc. - Joomla! processar e apresentar elementos de sada especficos, como: id e classes, no cdigo da pgina do site (vide no seu navegador a opo "view source" - [ver fonte]). Isto pode ser visto e empregado para desenvolver estilos especficos de [CSS]. - No Joomla! 1.5, a sada de mdulos podem ser completamente customizadas, ou voc pode empregar a sada padro. Todas essas opes so chamadas de mdulo de especificao de cor [module chrome]. - sempre prefervel empregar sadas de menu no estilo com marcadores[bulleted] ou em listas [flat list]. Voc poder fazer uso de recursos livres na Web de cdigos [CSS]. - Os elementos, tais como, colunas ou localizaes de mdulos podem ser escondidos ou suprimidos [collapsed] quando no houver itens de contedo para serem apresentados nos mesmos. Isto feito empregando-se comandos condicionais em PHP, que so lincados para diferentes estilos de [CSS]. - Criar um template de produo (apresentao) do Joomla! mais uma questo de desenvolvimento de recursos grficos (imagens) e manipulao de [CSS] do que algum "conhecimento especial do Joomla!". - Joomla 1.5 oferece novos recursos para templates, que permitem aos "designers" controlar completamente o cdigo e a apresentao do site.
Visite a rea de download do site CompassDesign
Verso em PDF do arquivo de tutorial de template em PORTUGUS disponvel para download
{mospagebreak}
9. Links
Apresentamos vrios links que podem ser teis para o seu aprendizado e desenvolvimento. V em frente!:
www.compassdesigns.net/tutorials/joomla-tutorials/installing-joomladoctype-and-the-blank-joomla-template.html www.upsdell.com/BrowserNews/stat_trends.htm#res www.compassdesigns.net/joomla-blog/general-joomla/what-makes-a-gooddesigner.html www.brainjar.com/css/positioning/ www.clagnut.com/blog/1287/ http://leftjustified.net/journal/2004/10/19/global-ws-reset/ www.thenoodleincident.com/tutorials/typography/template.html www.stopdesign.com/log/2004/09/03/liquid-bleach.html
www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/ http://css.maxdesign.com.au/listamatic/index.htm http://css.maxdesign.com.au/listamatic/vertical10.htm http://dev.joomla.org/component/option,com_jd-wp/Itemid,33/p,210/ http://forum.joomla.org/index.php/topic,101825.msg535479. html#msg535479 www.joomlashack.com http://positioniseverything.net/easyclearing.html http://www.quirksmode.org/css/clearing.html http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ http://orderedlist.com/articles/clearing-floats-fne/ www.alistapart.com/articles/slidingdoors/ www.fiftyfoureleven.com/sandbox/weblog/2004/jun/doors-meet-sprites/ http://www.maujor.com/index.php
x.x.x.

Tutorial Template Joomla 1 5

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tutorial Template Joomla 1 5

Transféré par

Droits d'auteur :

Formats disponibles

Tutorial Template Joomla 1.

FAZENDO UM TEMPLATE PARA JOOMLA!1.5: [Making a Real Joomla 1.5 Template]

O que vamos encontrar aqui:

Ao final do item 7 disponibilizamos o arquivo final do template que construiremos aqui.

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (1 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

Figura 1: Template com e sem contedo

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

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (2 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

2. Passos para a elaborao de um Template

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (3 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

Figura 2: Instalao do Joomla! no diretrio c:/wamp/www/meusite/

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (4 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

Figura 3: Esboo do MEU_TEMPLATE

Vamos explicitar melhor o esboo:

Tutorial Template Joomla 1.5

Em resumo, as decises que tomaremos so as seguintes:

Figura 4: rea de administrao - Gerenciamento de Mdulos [Module Manager]

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (6 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

3. Estrutura tpica de um diretrio de um Template

index.php Dispe da lgica para a apresentao e posicionamento de mdulos e componentes.

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (7 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

Um template padro para o Joomla! 1.5 pode incluir os seguintes diretrios:

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

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (8 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

Figura 5: Gerenciador de template [Template Manager] - presena da instalao do template JS_Bold.

4. O processo de criao de um Template

Eis o nosso cdigo CSS, pertinente as especificaes do cabealho que queremos:

Tutorial Template Joomla 1.5

Figura 6: Aparncia final do cabealho [header]..

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (10 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

Tutorial Template Joomla 1.5

Encontramos algumas solues.

Empregaremos o comando [float] em quase todas as opes por aqui.

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

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (12 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

Tutorial Template Joomla 1.5

da imagem de fundo e um valor de espaamento de 20px, somente para fim esttico.

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

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (14 of 50) [22/10/2008 13:38:33]

Tutorial Template Joomla 1.5

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

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

.moduletable { margin-bottom:1em; color:#fff; font-size:1.1em; } .moduletable h3 { font:1.3em Tahoma,Arial,Helvetica,sans-serif; background:#000;

Tutorial Template Joomla 1.5

color:#ccc; text-align:left; margin:0 -10px; padding:5px 10px; }

Tutorial Template Joomla 1.5

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

Tutorial Template Joomla 1.5

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (18 of 50) [22/10/2008 13:38:34]

Tutorial Template Joomla 1.5

Figura 7: Aparncia final do MEU_TEMPLATE... at este momento...

4.5.1. Para conseguir o resultado que se espera

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

file:///C|/Joomla_cms/z_artigos/template/tutorial_template-15.html (19 of 50) [22/10/2008 13:38:34]

Tutorial Template Joomla 1.5

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