Detalhes

Categoria: Joomla

Atualização: Segunda, 02 Julho 2012 19:33

Autor: vovó Vicki

Acessos: 28903

Escondendo divisórias vazias

A cada nova etapa descobrimos mais alguma coisa para arrumar. No ponto em que estamos agora, a coluna da direita está ocupando 20% da página sem conteúdo algum, ou seja, está "comendo" espaço" à toa. Para que a coluna só seja mostrada caso existam módulos à direita, vamos dar uma ajeitada no arquivo index.php usando a função countModules:

Fazendo esta alteração e visualizando novamente a página, o resultado é decepcionante :sad: Se não incluímos a divisória da direita, porque continuamos com o espaço em branco à direita da página? A resposta é muito simples: foi por que definimos a largura da coluna esquerda em 20% e a da coluna do meio em 60%. Para sair desta sinuca precisamos descobrir se a coluna da esquerda e a da direita possuem conteúdo e ajustar a largura da coluna do meio de acordo. A mesma função countModules vai quebrar o galho:

Observe que enviamos os parâmetros 'left and right' e 'left or right'. Se a coluna coluna esquerda E a coluna direita (left and right) não tiverem conteúdo (==0), então a largura deve ser 100. Se uma das colunas tiver conteúdo (esquerda OU direita, left or right == 1), a largura deve ser 80 e, se as duas tiverem conteúdo (esquerda E direita, left and right == 1), a largura deve ser 60. Usamos este resultado para definir o estilo da coluna do meio no arquivo index.php:

A linha <div id="miolo<?php echo $largura; ?>">, na verdade, vai colocar na página id="miolo100", id="miolo80" ou id="miolo60". Estas ids precisam estar contempladas no arquivo CSS para que as propriedades das divisórias possam entrar em vigor:

O resultado desta nova mexida, finalmente, é o esperado. Sei que o template que criamos ainda está uma droga: falta dar uma separadinha entre as colunas, a fonte está horrorosa, os itens do menu estão invadindo o texto do conteúdo e o próprio menu está deplorável, mas... o caminho das pedras foi mostrado. Todas as restrições que apontei são perfeitamente contornáveis se capricharmos na folha de estilos. O mais complicado, que é "domar" as divisórias para criar um template "elástico" sem o uso de tabelas, foi explicado. Vou mostrar o resultado final desta nossa jornada que deve ser apenas o começo para aqueles que querem enfrentar a criação seus próprios templates:

Num próximo tutorial vou explicar como dar um trato mais caprichado em templates e até como conseguir alguns efeitos especiais. Me aguardem.

Abraço da :vovo: vó