Nesse exercício vamos ver como apresentar a página inicial de um site em Joomla com um layout ligeiramente diferente das páginas internas, de uma forma bem simples.

No exemplo, o site tem um layout de três colunas, mas na página principal você quer apareçam somente duas.

A seguir a ilustração mostra o layout da página principal, onde o corpo é constituido de uma coluna a esquerda mais larga e uma coluna a direita.

layout alternativo na pagina inicial front

Agora vemos o layout o das páginas internas. Aqui o corpo é composto de três colunas, uma maior no centro e duas menores a esquerda e a direitao. A área em vermelho mostra o que fica diferente da página principal.

layout alternativo na pagina inicial interna

Como realizar essa façanha? É muito simples!

Basicamente, temos que pensar que a página principal exibe um pedaço de código HTML diferente das páginas internas.

No arquivo index.php do tema, que está dentro de /templates/{seu-tema}, localize o código a modificar.

Vamos dar uma olhada no código do template baseado no exemplo das ilustrações acima.

<body>
 <div class="cabecalho">
   <h1>Título da Página</h1>
 </div>
<?php If (JRequest::getVar('view') == 'featured') { ?>
 <div class="paginaprincipal">
 [CÓDIGO]
 </div>
<?php } else { ?>
 <div class="colunaesquerda">
 [CÓDIGO]
 </div>
 <divclass="colunacentro">
 <jdoc:include type="component" />
 </div> 
<?php } ?>
 <div class="colunadireita">
   <span>Conteúdo da direita</span>
 </div>
 <footer class="rodape">
   <div>Créditos da página</div>
 </footer>
</body>

Em vermelho temos o código PHP. 

Em verde, o código HTML que será exibido na página principal. Repare que foi criada uma DIV com uma classe chamada paginaprincipal. Assim, fica mais fácil criar o CSS a ser aplicado nessa área.

Em azul, o código HTML que será exibido nas páginas internas. Aqui temos uma DIV para cada coluna com as classes CSS (colunaesquerda e colunacentro) a serem aplicados para formatar corretamente a página.

O código que está em verde e azul pode ser modificado conforme a necessidade do seu layout.

Qualquer dúvida, utilizem o formulário de comentários abaixo.

Pin It

Comentários fornecidos por CComment

Pesquisar o blog