Вы находитесь на странице: 1из 22

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.php
Este 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.png
Um 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.css
O 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.png
Qualquer 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; ?>”
/>
<?php
if ($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 site
2. caminho
3. módulo do topo
4. módulos da esquerda
5. conteúdo principal
6. módulos da direita
7. 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 Techniques


htmldog’s CSS Beginner’s Guide
Mulder’s Stylesheets Tutorial
yourhtmlsource.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; ?>”
/>
<?php
if ($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. #content
2. #sidebar
3. #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; ?>” />
<?php
if ($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.html
http://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á]

Вам также может понравиться