layout alternativo na pagina inicial front

Layout alternativo na página principal

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.