Os Componentes do Template

Afim de compreender o conteúdo dentro de um template, nós iremos mostrar um template joomla em branco. Neste arquivo estão vários arquivos e pastas que fazem um template do Joomla. Estes arquivos devem ser colocados no diretório /templates da instalação de um Joomla. Assim, se nós tivermos dois templates instalados, nosso diretório teria algo como isso:

/templates/JS_Smoothportal/templates/JS_Synergy

Observe que os nomes dos diretórios para os templates devem ter o mesmo nome que o template, neste caso JS_Smoothportal e JS_Synergy. Evidentemente, eles são sensíveis a caixa(case sensitive) e não devem conter espaços. Tradicionalmente os designers usam iniciais ou nome como prefixo.

Dentro do diretório do template, há um número de arquivos chaves:

/JS_Smoothportal/templateDetails.xml/JS_Smoothportal/index.php

Estes dois nomes de arquivo e localização devem ser exatamente assim pois é assim quee eles são chamados pelo script núcleo do Joomla.

- templateDetails.xml(observe a caixa alta do “D”) Um arquivo XML metadata que diz ao Joomla! quais arquivos são necessários quando o template estiver em uso em um site. Ele contém também detalhes sobre o autor, direitos autorais(copyright) e que arquivos fazem parte do template(incluindo qualquer imagem usada). E por fim, esse arquivo serve também na hora da instalação do template quando o admin usa o backend.

- index.phpEste arquivo é o mais importante. Ele ordena o site e diz para o CMS joomla onde colocar diferentes componentes e móduloss. Ele é a combinação do PHP e (X)HTML.

Na maioria dos templates, arquivos adicionais são usados. Por convenção (embora não obrigatório pelo core) para nome e localização são mostrados a seguir:

/JS_Smoothportal/template_thumbnail.png/JS_Smoothportal/css/template_css.css/JS_Smoothportal/images/ logo.png

- template_thumbnail.pngUm screenshot do template (geralmente reduzido em torno de 140 pixels de largura por 90 pixels de altura). Depois do template ter sido instalado, esta função é como “Preview image” visível no Template Manager do painel de administração do Joomla!.

- css/template_css.cssO CSS do template. A localização da pasta é opcional, mas você deve especificar onde está.. Observe que o nome do arquivo é somente importante quando é referido no index.php. Você poderá chamá-lo como quiser. Geralmente usa-se o nome mostrado aqui, mas nós mostraremos mais tarde as vantagens de ter outros css.

- images/logo.pngQualquer imagem que tiver no template. De novo, por razões de organização, a maioria dos designers colocam suas imagens em uma pasta de imagens. Aqui nós colocamos uma imagem chamada logo.png como um exemplo.

Para adicionar o template (de novo, para isso que o tutorial existe) vá na administração do seu site e instale seu template enviando(upload) o arquivo zip. Observe que, na verdade, você pode adicionar arquivos individulmente(não zipado) também. Você deve colocá-lo em seusite.com/templates.

templateDetails.xml

O templateDetails.xml deve conter todos os arquivos que fazem parte do template. Ele também inclui informações como o autor e direito autoral. Algumas dessas informações são mostradas no Template Manager do admin backend

Um exemplo de arquivo xml é mostrado a seguir:

<mosinstall type="template" version="1.0.x"><name>YourTemplate</name><creationDate>March 06</creationDate><author>Barrie North</author><copyright>GNU/GPL</copyright><authorEmail>compassdesigns@gmail.com</authorEmail> <authorUrl>www.compassdesigns.net</authorUrl><version>1.0</version><description> An example template that shows a basic xml details file </description><files><filename>index.php</filename><filename>js/ie.js</filename><filename>template_thumbnail.png</filename></files><images><filename>images/header.png</filename><filename>images/background.png</filename><filename>template_thumbnail.png</filename></images>

<css><filename>css/base.css</filename><filename>css/norightcol.css</filename><filename>css/template_css.css</filename></css></mosinstall>

Vamos explicar o que sfgnifica alguma dessas linhas:

- mosinstall:O conteúdo do documento XML são instruções para o instalador. A opção type=”template” diz para o instalador que estamos instalando um template

- name:Define o nome do template. O nome que você entrar aqui irá ser usada para criar o diretório dentro do diretório template. Por esse motivo, não deve conter nenhum caracter estranho, tal como espaço. Se for fazer a instalação manualmente, você precisa criar um diretório com o mesmo nome do template.

- creationDate:A data que o template foi criado. Esse campo é livre de formato e pode ser qualquer coisa como May 2005, 08-June-1978, 01/01/2004 etc.

- author:O nome do autor do template - provavelmente o seu nome.

- copyright:Qualquer direito autoral vai nesse elemento. Uma instrução básica para Developers & Designers pode ser achado nos fóruns do Joomla.

- authorEmail:Endereço de Email que o autor do template pode ler.

- authorURL:A URL do site do autor.

- version:A versão do template.

- files:A seção “files” contém todo tipo de arquivos como códigos PHP para o template ou imagens thumbnail image para o preview do template. Cada arquivo listado nessa seção é englobado por<filename> </filename>. Também pode se incluir qualquer arquivo adicional, aqui usamos como exemplo um arquivo JavaScript que é necessário no nosso template.

- images:Todas as imagens usadas no template são listads na seção “images”. Novamente os arquivos listados são englobados por <filename> </filename>. A informação sobre o caminho dos arquivos é referente a raiz do seu template. Por exemplo, se seu template está no diretório ‘YourTemplate’ e todas as imagens no diretório ‘images’ que está dentro do ‘YourTemplate’, o caminho correto é:<filename>images/my_image.jpg</filename>

- css:A folha de estilo é listado na seção “css”. De novo, o nome do arquivo estará entre<filename> </filename> e seu caminho é relativo a raiz do template. As vezes é mais prático ter várias folhas de estilos importadas pelo principal template_css.css. Nós iremos discutir isso mais tarde no tutorial.

index.php

O que realmente um arquivo index.php? É uma combinação (X)HTML e PHP que determina tudo sobre o layout e apresentação das páginas.Primeiro, nós iremos ver uma parte crítica de template válido. O DOCTYPE no topo do arquivo index.php. Esse pequeno trecho de código vai no topo de tudo de qualquer página. No topo da nossa página nos temos isso no nosso template:

<!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”lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”>

Uma página DOCTYPE é parte fundamental de componentes que mostram uma página deve ser mostrada no navegador, especificamente, como o navegador interpreta o CSS. Para você entender, uma observação do alistapart.com diz:

[informação no site W3C sobre doctype] “escrito de geeks para geeks. E quando eu digo geeks, eu não quis dizer profissionais da web como eu e você. Eu quis dizer geeks que fazem o resto de nos parecerem uma avózinha no seu primeiro dia que email.”

De qualquer jeito, há vários doctypes que você pode usar. Basicamente, o doctype diz ao navegador como interpretar a página. Aqui as palavras “strict” e “transitional” começa flutuado ao redor (float:left e float:right geralmente). Essencialmente, desde que a WWW começou, diferentes navegadores tem diferentes níveis de suporte para CSS. Isto significa, por exemplo, que o Internet Explorer não irá entender o comando “min-width” que define uma largura mínima da página. Para reproduzir o mesmo efeito, você deve usar “hacks” no CSS.

Strict(estrito) diz que o html (ou xhtml) irá ser interpretado exatamente conforme o padrão. Um doctype transitional(transição) diz que a página irá permitir algumas diferenças fora do padrão.

Para complicar coisas, há algo chamado de modo “quirks”. Se o doctype for errado, antigo, ou não tem, então o navegador entra na modo quirks(quirks mode). Esta é uma tentativa de manter a compatibilidades antigas, assim o Internet Explorer, por exemplo, renderizará a página fingindo como se fosse o IE4.

Infelizmente, as pessoas acidentalmente vão para o quirks mode. Ele acontece geralmente duas maneiras:

- Eles usam o declaração doctype diretamente da págin W3C, o link é assim:

DTD/xhtml1-strict.dtd

Exceto esse é um link relativo ao servidor W3C . Você precisa o caminho completo como mostrado anteriormente.

Microsoft montou no IE6 um esquema para você ter páginas válidas, mesmo sendo em quirks mode. Isto acontece tendo um “prológo xml” colocado antes do doctype.

<?xml version=”1.0″ encoding=”iso-8859-1″?>

A parte sobre quirks mode no IE6 é importante. Esse tutorial será somente para fazer layout pra IE6+, assim nos iremos ter certeza que estaremos rodando em modo padrão. Isso irá minimizar os hacks que precisaremos fazer depois. O prológo xml de qualquer modo não é essencial. Iremos anotar isso para as futuras versões do Joomla e esquecer. Fazendo uma página de acordo com o padrão, onde você vê um “xhtml válido” no final na página não quer dizer que foi realmente dificil codifica-lo, ou dificil de entender. Isso somente diz que o código que usou casa com o doctype que você iria usar. Só isso! Nada mais! Criando seu site dentro dos padrões reduz um nível para dizer o que você fez e então fazendo o que você diz.

Alguns links úteis:

http://www.quirksmode.org/css/quirksmode.html http://www.alistapart.com/stories/doctype http://www.w3.org/QA/2002/04/Web-Quality http://forum.joomla.org/index.php/topic,7537.0.html http://forum.joomla.org/index.php/topic,6048.0.html http://www.tableless.com.br http://www.maujor.com http://www.brunotorres.net

O que está mais no index.php?

Vamos olhar a estrutura do header em primeiro lugar, nós queremos o mínimo possível, mas que seja o suficiente para produzir um site. A informação do header que iremos usar é esta:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?><!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” lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”<head><meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” /><?phpif ($my->id) { initEditor(); } ?><?php mosShowHead(); ?><script type=”text/javascript”> </script><!–http://www.bluerobot.com/web/css/fouc.asp–><link href=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” /></head>

O que isso tudo significa?

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>

Faz com que tenhamos certeza que o arquivo não será acessado diretamente.

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?><!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” lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”<head>

Nós falamos sobre isso anteriormente. O “<?php echo _LANGUAGE; ?>” está colocando a linguagem vinda da configuração global do site.

<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” />

Que set de caracteres estamos usando, _ISO é uma constante especial que define o set de caracter está em uso(encoding).

<?php if ($my->id) { initEditor(); } ?>

Este é uma variável script que não é zero se o usuário estiver logado no seu site. Se o usuário estiver logado então o editor WYSIWYG será pré-carregado. Você pode, se desejar, carregar sempre o editor, mas geralmente um visitante anônimo não precisará adicionar conteúdo. Isto economiza um pequeno tempo de carregamento de seu site.

<?php mosShowHead(); ?>

Enche o cabeçalho com as configurações globais. Isso inclui as seguintes tags (padrão da instalação):

- <title>A Complete Guide to Creating a Joomla Template </title>- <meta name=”description” content=”Installing Joomla, doctype and the blank joomla template” />- <meta name=”keywords” content=”installing joomla, joomla doctype, blank joomla tempate” />- <meta name=”Generator” content=”Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved.” />- <meta name=”robots” content=”index, follow” />- <link rel=”shortcut icon” xhref=”images/favicon.ico” />

<script type=”text/javascript”> </script>

Para parar um erro, que pode ser um flash de um conteúdo não estilizado. Detalhes com permissão do Blue Robot(?). Observe que isso pode ser qualquer arquivo com script, então se nos não adicionamos m, nós podemos remover essa linha.

<link href=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” />

Esta linha linka o arquivo CSS no template. O código PHP <?php echo $cur_template; ?> irá retornar o nome do template corrente. Isto faz com que essa linha seja “portável”. Quando nós criamos um novo template, nos podemos apenas copiá-lo ( junto com todo o código do header) e não nos importarmos em editar depois.

Como você irá ver mais adiante, no arquivo template_css.css, nós usaremos o @import como meio de parar o site aparecer quebrado no Netscape 4. Usuário de navegadores muito antigos não estarão capacidados em conseguir ver o conteúdo usando o CSS. Se você quer satisfazer esses navegadores antigos, você deverá ter muitos hacks no CSS, para conseguirmos fazer isso.

Um template vazio do joomla

Isso é muito muito fácil! Pronto?

<body><!– 1 –><?php echo $mosConfig_sitename;?><!– 2 –><?php mospathway()?><!– 3 –><?php mosLoadModules(’top’);?><!– 4 –><?php mosLoadModules(’left’);?><!– 5 –><?php mosMainBody();?><!– 6 –><?php mosLoadModules(’right’);?><!– 7 –><?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ );?></body></html>

Nós temos numa ordem lógical razoável:

1. nome do site2. caminho3. módulo do topo4. módulos da esquerda5. conteúdo principal6. módulos da direita7. módulo padrão do rodapé

O objetivo é tentar tornar o mais próximo da marcação semântica. Sob o ponto de vista web, isso significa uma página que pode ser lida por qualquer um, um navegador, um “spider” ou um leitor de tela. Um layout semântico é a pedra fundamental da acessibilidade.

Agora isso merece uma observação que o que nós temos aqui realmente é somente um a capacidade de ter um layout semântico. Se alguém colocasse módulos aleatórios em lugares aleatórios, então você teria uma verdadeira bagunça. Uma consideração importantepara sites que usam CMS, um template é de boa qualidade quando há a inserção de conteúdo.

Usando o CSS para Criar um Layout

Nós iremos usar o CSS para fazer um layout de 3 colunas no Joomla. Nós iremos também fazê-lo em layout fluido. Há dois principais tipos de layout para as páginas, fixo e fluido, e ambos referem-se como a largura da página é controlada.

A largura da página é um tema recorrente por causa de muitas diferentes resoluções que as pessoas usam pra acessar a web. Embora a porcentagem esteja caindo, aproximadamente 20% dos internautas usam 800X600. A maioria, 76%, usam 1024X768 ou maior(fonte: www.upsdell.com). Fazer um layout fluido significa que sua página irá ficar apertado em uma resolução 1024 e irá ocupar a tela inteira dos monitores.

Um design típico poderia usar tabelas para o layout da página. Eles são práticos se você precisa definir a largura das colunas em porcentagens, mas eles podem ter algumas desvantagens:

- Eles tem uma grande quantidade de código extra se comparados a um layout com CSS. Isto leva a um tempo de carregamento maior(internautas não gostam) e pobres desempenhos em sites de busca. O código duplicam de tamanho, não pelo aumento mas pelos chamados “spacer gifs”. Mesmo as companhias grandes caem às vezes na armadilha da tabela como visto por uma recente controvérsia sobre o novo site da disney.co.uk.- Eles são difíceis de manter. Para mudar alguma coisa, você tem que ver o que cada td/tr está fazendo. No CSS somente verificar algumas poucas linhas.- O conteúdo não pode ser ordenado. Muitos internautas não podem ver sua página em um navegador comum. Aqueles que usam leitores de texto e leitores de tela irão ler seu site do topo-esquerda até rodapé-direita. Isso significa que eles primeiro leêm tudo do cabeçalho e coluna a esquerda(para layout de 3 colunas) antes de eles irem para a coluna do meio, o objeto mais importante. Um layout baseado em CSS por sua vez, “ordenar” o conteúdo, isso quer dizer que o conteúdo pode ser rearranjado no código/fonte. Talvez seu mais importante visitante seja o Google e ele usa um leitor de tela para todos os objetivos e propósitos.

Vamos olhar nosso layout usando CSS. Você pode posicionar os elementos(objetos) de vários modos usando CSS. Para uma rápida introdução veja Brainjar’s CSS Positioning.

Se você é iniciante em CSS, você deveria ler no mínimo algum “guia de CSS para iniciantes”. Aqui algumas sugestões:

Kevin Hale’s - An Overview of Current CSS Layout Techniqueshtmldog’s CSS Beginner’s GuideMulder’s Stylesheets Tutorialyourhtmlsource.com

Nós iremos usar float para posicionar nosso conteúdo. O mais básico, o template seria isso:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?><!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” lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”<head>

<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” /><?phpif ($my->id) { initEditor(); } ?><?php mosShowHead(); ?><script type=”text/javascript”> </script><!–http://www.bluerobot.com/web/css/fouc.asp–><link xhref=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” /><style type=”text/css”> <!–#wrap {width:80%;}#header {}#sidebar {float:left;width:20%;}#content {float:left;width:60%;}#sidebar-2 {float:left;width:20%;}#footer {clear:both;}–> </style></head><body><div id=”wrap”><div id=”header”><?php echo $mosConfig_sitename; ?> <?php mospathway() ?></div><div id=”sidebar”><?php mosLoadModules(’left’);?></div><div id=”content”><?php mosLoadModules(’top’);?> <?php mosMainBody(); ?></div><div id=”sidebar-2″><?php mosLoadModules(’right’);?></div><div id=”footer”><?php include_once( $mosConfig_absolute_path .’/includes/footer.php’);?></div></div> <!–end of wrap–></body></html>

Os estilos CSS estão definidos aqui no cabeçalho do arquivo mostrando como deve ser., mas normalmente eles viriam no arquivo template_css.css.

Tudo está dentro do elemento/box chamado #wrap que tem 80% de largura da tela.

Abreviar declaração CSS

É possível reduzir o tamanho do CSS abreviando a declaração. Um exemplo disso é o padding e o margin aplicados em um elemento.

margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;

pode ser substituido por:

margin: 5px 10px;

Há abreviação no começo de cada definição de estilo. Uma vez preenchendo os estilos, faça a versão abreviada e apague a versões grandes. A sintaxe é:

font: font-size |font-style | font-variant | font-weight | line-height | font-family

Aqui está um exemplo, de preferência isso…

font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-height:1.3em;

Tem isso:

font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;

Leia mais sobre isso no An Introduction to CSS shorthand properties ou Abreviando declarações e valores em regras CSS.As colunas da esquerda, direita e do meio tem cada um seus próprios elementos. Cada um é float: left e tem a largura específica que somados dão 100%. O estilo clear:both no footer(rodapé) diz para o navegador para parar os floats e fazer com que o rodapé estique sobre as três colunas.

Para incrementar o layout e avançar com o conteúdo, nós precisamos adicionar um espaçamento nas colunas, comumente chamado de “gutter”(goteira). Infelizmente, há um problema aqui. Você deve saber que o Internet Explorer não interpreta o CSS corretamente. Um dos problemas é que calcula a largura de modo diferente. Nós resolvemos esse problema não usando nenhum padding ou border em coisas que tem largura. Para obter nosso gutter nós adicionamo um outro elemento <div> dentro das colunas. Isso é mostrado abaixo:

<div id=”sidebar”><div class=”inside”><?php mosLoadModules(’left’);?></div></div><div id=”content”><div class=”inside”><?php mosLoadModules(’top’);?><?php mosMainBody(); ?></div></div>

<div id=”sidebar-2″> <div class=”inside”><?php mosLoadModules(’right’);?> </div></div>

No CSS nós adicionamos:

.inside {padding:10px;}

Um layout simples é um bom caminho de aprendizado de como usar CSS com Joomla. Isso traz duas vantagens do CSS sobre os layouts baseados em tabela: menos código e manutenção mais fácil. Porém, o código não está ordenado. Para que isso ocorra, nós devemos usar um layout mais avançado chamado de “float aninhado”(nested float). Com esse tipo de permissão, nós iremos adaptar o layout desenvolvido pelo Dan Cederholm e descrito em mais detalhes no seu livro.

Código ordenado de um Layout de 3 Colunas

Para explicar o que está sendo feito, veja primeiro o resultado no final esse post.

[TO DO: PICTURE OF NESTED FLOAT HERE]

A página é dividica em dois principais floats. O primeiro, #main-body está flutuante para a esquerda, o segundo, #sidebar-2 está flutuante para a direita. Isso é igual ao que nós fizemos antes, o float #main-body irá aparecer no começo do código. Agora dentro do main-body, nós temos mais dois floats; #content está flutuando a direita e #sidebar está flutuando a esquerda. Enquanto nós arrumamos as larguras corretamente, o float #content pode aparecer primeio no código.

<div id=”wrap”><div id=”header”><?php echo $mosConfig_sitename; ?><?php mospathway() ?></div> <div id=”main-body”><div id=”content”><div class=”inside”><?php mosLoadModules(’top’);?><?php mosMainBody(); ?></div></div><div id=”sidebar”><div class=”inside”>

<?php mosLoadModules(’left’);?></div></div></div> <!–end of main-body–><div id=”sidebar-2″><div class=”inside”><?php mosLoadModules(’right’);?></div></div>

<div id=”footer”> <?php include_once($mosConfig_absolute_path .’/includes/footer.php’);?></div></div> <!–end of wrap–>

Assim, no código nós temos essa ordem:

1. #content2. #sidebar3. #sidebar-2

Para calcular as larguras, nós agora precisamos um pouco de matemática. Precisamos das colunas laterais terem 25% cada. #sidebar-2 é fácil, é so ajustar em width:25%. Entretanto, #sidebar irá precisar a largura definida baseada na largura interna do <div> que era de 75%. Essa largura deve ser 33%.

Assim, 33% de 75% = 25%

A largura do #content é o restante. Nós iremos setar para 66%. E por ultimo, 1% para dividir o #content e #sidebar.

O CSS ficará assim:

#wrap {width:80%;}#header {} #footer {clear:both;}#main-body { float:left; width:75%; } #sidebar-2 { float:right; width:25%; } #content { float:right; width:66.5%; } #sidebar { float:left; width:33.5%; }.inside {padding:10px;}

Alguns designer de CSS recomendaria um pequeno gutter e fazer a coluna do lado um pouquinho menor. Isso ajuda para de quebrar o layout no Internet Exporer. Se você quer fazer isso, mude simplesmente a largura do #sidebar-2 para 24%

O código do template é mostrado abaixo. Você pode copiar e colar no seu index.php. Observe que nós removemos o CSS do cabeçalho. Nós iremos colocar ele em um arquivo separado.

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?><!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” lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”<head><meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” /><?phpif ($my->id) { initEditor(); } ?><?php mosShowHead(); ?><script type=”text/javascript”> </script><!–http://www.bluerobot.com/web/css/fouc.asp–><link href=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” /></head><body><div id=”wrap”><div id=”header”><?php echo $mosConfig_sitename; ?><?php mospathway() ?></div> <div id=”main-body”><div id=”content”><div class=”inside”><?php mosLoadModules(’top’);?><?php mosMainBody(); ?></div></div><div id=”sidebar”><div class=”inside”><?php mosLoadModules(’left’);?></div></div></div> <!–end of main-body–><div id=”sidebar-2″><div class=”inside”>

<?php mosLoadModules(’right’);?></div></div><div id=”footer”> <?php include_once($mosConfig_absolute_path .’/includes/footer.php’);?></div></div> <!–end of wrap–></body> </html>

O CSS Padrão do Joomla

Até agora todo nosso CSS tem sido somente para layout. Vamos agora adicionar a formatação. Nós também movemos todo o nosso código CSS que estava no cabeçalho do index.php e colocamos em arquivos CSS.

Embora isso possa parecer que seu site irá demorar pra carregar, isso possibilita maior flexibilidade para ter sub-arquivos de CSS e então termos eles todos importados no template_css.css, um exemplo disso poderia ser assim:

/*Compass Design template CSS file*/@import url(”layout.css”); /*layout css file*//* @import url(”color.css”); color css file*/@import url(”customize.css”); /*Use this file to customize your website*/

Como mencionado anteriormente, nós usamos @import pois o Netscape 4 não entende esse comando[nota do tradutor: é quase impossível fazer algo tableless para o Netscape 4, por isso devemos excluir esse navegador usando uma tag que não possa ser entendido por ele]. Ele também não entende CSS, assim ele mostrará somente os textos sem estilo.

Todo CSS relativo ao layout poderia estar no arquivo layout.css. Uma vez configurado você pode esquecer e qualquer mudança em outras folhas de estilos não afetará drasticamente. O arquivo color.css poderia conter qualquer coisa relativas as cores(no exemplo acima está comentado). Você poderá mudar fácil e rapidamente ou configurar um pacote de cor “color packs”. E por último, toda nossa tipografia e estilos do Joomla poderiam ir no nosso arquivo customize.css.

Nosso arquivo layout.css é assim:

/*Compass Design layout.css CSS file*/body {text-align:center; /*center hack*/}#wrap {

width:80%; /*center hack*/margin:0 auto; /*center hack*/text-align:left;}#header {text-align:left;}#footer {clear:both;}#main-body {float:left;width:75%;}#sidebar-2 {float:right;width:25%;overflow:hidden;margin-left:-3px;}#content {float:right;width:66.5%;overflow:hidden;}#sidebar {float:left;width:33.5%;overflow:hidden;}.inside {padding:10px;}

Nós centralizamos nossa página usando um pequeno hack. Isso deve ser feito por causa do Internet Explorer. Com navegadores que seguem o padrão, nós usamos o margin:0 auto; para centralizar a página, mas o IE não entende isso. Então nós centralizamos o “texto” de toda a página e então alinhamos de volta para a esquerda dentro das colunas.

Nós adicionamos mais duas régras. Uma é overflow:hidden para cada coluna. Isso irá fazer a “quebra” de página mais consistentemente como forma de reduzirmos a largura. Segundo, nós adicionamos uma margem negativa no sidebar-2. Isso é puramente para

o Internet Explorer dirija-se a algumas de suas edições com CSS. Nós poderíamos aplicar esta régua somente ao IE adicionando um hack (o hack do Tan):

* html #sidebar-2 {margin-left:-3px;}

Entretanto, os cortes são geralmente incômodos. É melhor (na opinião deste autor) aplicar a regra a todos os browsers, apesar de tudo, são só 3 pixels.

No começo do arquivo customize.css nós ajustaremos alguns estilose teremos o que chamamos de “uma restauração global”.

/*Compass Design Customize.css file */* {margin:0;padding:0;}h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {margin: 0.5em 0;}li,dd {margin-left:1em;}fieldset {padding:.5em;}body {font-size:76.1%;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:1.3em;}#header {background:#0099FF;}#footer {background:#0099FF;}#main-body {background: #CC0000;}#sidebar-2 {background:#009933;}

#content {background: #999999;}#sidebar {background: #009933;}

Tudo recebe margin e padding zero e então todos os elementos do nível do bloco é dado então uma margem inferior Isto ajuda obter a consistência esperada. Você pode ler mais sobre a restauração global em clagnut e left-justified.

O tamanho da fonte foi setado para 76.1%. A razão disso é para tentar manter a melhor consistência sobre os navegadores. Todas as fontes foram setadas em em. E tendo altura de linha de line-height:1.3em ajuda na leitura. Isso significa que as páginas serão mais acessíveis quando visualizadas de acordo com a própria preferência de fonte. Isso é discutido mais em:An experiment in typography at The Noodle Incident (Owen Briggs)

Por último nós adicionamos algums cores de background para podermos ver as colunas.

Com uma instalação padrão do Joomla 1.0.8, o template irá se parecer om isso:

Observe que tamanho das colunas não alcançam o rodapé. Isso é por causa eles somente extende de acordo com o conteúdo, onde o espaço está vermelho na esquerda e o branco na direita, não existem. Se nós temos um template um fundo branco para as três colunas, isso não seria problema. Nós iremos fazer essa abordagem e os módulos estarão dentro de boxes. Se você quer alturas iguais e deseja colori-las ou ter boxes, você pode usar uma

imagem de fundo que se repete verticalmente. Essa técnica é chamada de “Faux Columns” e é descrita em Douglas Bowman e Eric Meyer.

[TO DO: DESCRIPTION OF FAUX COLUMNS HERE]

Infelizmente, essa técnica causa um pouco de problema no Internet Explorer. Em algumas situações, o background da coluna pode desaparecer. Esse é conhecido como o “Peekaboo bug” e é descrito com mais detalhes no Position Is Everything. Isso é corrigido aplicando um Holly Hack (determina o valor de 1% para o height para o IE). Se pretende somente IE6 aqui é modificado ligeiramente de modo usando a instrução!Important. Isso significa que não estamos usando nenhum hack real, isto é, CSS inválido é usado.

#wrap{ border:1px solid #999; background: url(../images/threecol-r.gif) repeat-y 75% 0; height:100% !Important;height:1%; }#wrap-inner { background: url(../images/threecol-l.gif) repeat-y 25.125% 0; height:100% !Important;height:1%; }

Observe que em telas muito estreitas (<600px) no Internet Explorer, the layout começara a quebrar. É possível arrumar isso definindo uma largura mínima, mas isso deixaremos como exercíco para os designers.

CSS específico do Joomla

No momento que foi escrito esse tutorial, isto é, na série 1.0.x do Joomla, as versões ainda geram muitas tabelas na saida do conteúdo do corpo principal. Junto com essas tabelas há também o CSS disponível para os designers estilizar as páginas. Baseado em algumas pesquisas e contribuição de membros da comunidade, há esta lista abaixo. Observe que ele não inclui estilos genéricos de página como H1, H2, p, ul, a, form etc.

#active_menu#blockrandom#contact_email_copy#contact_text#emailForm#mod_login_password#mod_login_remember#mod_login_username#poll#search_ordering#search_searchword#searchphraseall#searchphraseany#searchphraseexact

#voteid1,#voteid2…..adminform.article_seperator.back_button.blog.blog_more.blogsection.button.buttonheading.category.clr.componentheading.contact_email.content_rating.content_vote.contentdescription.contentheading.contentpagetitle.contentpane.contentpaneopen.contenttoc.createdate.fase4rdf.footer.frontpageheader.inputbox.latestnews.mainlevel.message.modifydate.module.moduletable.mostread.newsfeed.newsfeeddate.newsfeedheading.pagenav.pagenav_next.pagenav_prev.pagenavbar.pagenavcounter.pathway

.polls

.pollsborder

.pollstableborder

.readon

.search

.searchintro

.sectionentry1

.sectionentry2

.sectionheader

.sitetitle

.small

.smalldark

.sublevel

.syndicate

.syndicate_text

.text_area

.toclink

.weblinks

.wrapper

Observação Importante sobre essa lista.

Muitos designs que você irá ver na verdade tera estilos CSS que são mais específicos em suas definições. Basicamente, a régra mais estará sobre a menos específica.

Por exemplo:

a {color:blue;} a:link {color:red;}.contentheading {color:blue;}div.contentheading {color:red;}

A cor do link e a cor do .contentheading será VERMELHO, como essa régua é mais específica (porque .contentheading é contido dentro de um <div>)

No caso dos templates pra Joomla, você irá as vezes ver régras mais específicas sendo usadas. Isso ocorre as vezes quando uma classe está dentro de uma tabela. Mais exemplos:

.moduletable table.moduletable

.moduletable é o nome do <div> que engloba um módulo. table.moduletable irá aplicar somente estilo na tabela que contiver a class=”moduletable” dentro..moduletable aplicará o estilo não obstante que elemento a classe está.

a.contentpagetitle:link .contentpagetitle a:link

a.contentpagetitle:link irá aplicar estilo em qualquer tag com uma classe .contentpagetitle dentro que seja um link..contentpagetitle a:link irá aplicar estilo em qualquer elemento DENTRO .contentpagetitle que sejam um link.

Especificação não é fácil de entender e as vezes é mais facil começar pelo estilo mais geral e então refinando se o resultado não está sendo o que você espera.

Alguns links sobre espeficicação:http://www.htmldog.com/guides/cssadvanced/specificity/http://www.meyerweb.com/eric/css/link-specificity.htmlhttp://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Nesse momento nosso template está usando um monte de tabelas, 20 de fato! Como mencionei anteriormente, isto torna a página lenta e faz com que a atualização seja difícil. Para reduzir o número de tabelas, nós precisamos usar os sufixos $style no index index.php quando formos chamar os módulos.

[nota do tradutor: Se não entendeu nada, passe no www.tableless.com.br e veja as video-aulas. Garanto que aprenderá css com quem sabe e não se arrependerá]