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.
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.
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.