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:
- #content
- #sidebar
- #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á]
Publicado por Fabrício em 10/Dez/2007 às 11:47 pm
porra que trampo hein Muneo, esse tutorial… na verdade está mais para uma aula está muito massa, parabéns pelo empenho!
Publicado por vfvfv em 12/Abr/2008 às 3:38 pm
dcdcdcdcdcd
Publicado por Augusto em 25/Jun/2008 às 3:53 pm
Sem dúvidas de que esse foi o mais claro e completo tutorial sobre o assunto que encontrei na rede.
Obrigado.
Publicado por Jefferson Maia em 26/Set/2008 às 10:26 pm
Parabéns Muneo. Esse seu tutoriais tirou uns 90% das dúvidas que tinha sobre joomla. Isso vai me ajudar muito quando for reformular o meu site para incorporar o joomla.
Muito obrigado mesmo cara!