In this exercise we will cover how to present the front page of a Joomla site with a slightly different layout from the other pages.

In this example, the general layout displays three columns, but on the front page, only two are displayed.

Below, the illustration shows the front page layout, where there is a larger column to the left where the main content will be displayed and a narrower column to the right.

layout alternativo na pagina inicial front en

Now let's take a look at the general page layout of the site. The page displays three columns, a wider one in the center, where main content will be presented, and two narrower columns to the left and right. The highlighted red area shows the changes between both layouts.

layout alternativo na pagina inicial interna en

How to achieve this? It is very simple!

Basically, it is good practice to picture that each layout present a slightly different HTML code.

In the index.php file of the template, which is inside /templates/{your-template}, find the code to be changed. 

Below we have a simplified example of the code that will render the pages above.

<body>
 <div class="header">
   <h1>Page Title</h1>
 </div>
<?php If (JRequest::getVar('view') == 'featured') { ?>
 <div class="frontpage">
 [CODE]
 </div>
<?php } else { ?>
 <div class="leftColumn">
 [CÓDIGO]
 </div>
 <divclass="centerColumn">
 <jdoc:include type="component" />
 </div> 
<?php } ?>
 <div class="rightColumn">
   <span>Conteúdo da direita</span>
 </div>
 <footer class="footer">
   [CÓDIGO]
 </footer>
</body>

In red you see the PHP code.

In green, you see the HTML code that will be displayed on the front page. Note that a DIV was created with a class named frontpage. This will make it easier to create the CSS to format this area accordingly.

In blue, you see the HTML code that will be displayed on general pages. Note that a DIV was created for each colum with classes leftColumn and centerColumn to assist formating the page later.

Either green and blue code can be modified according to the needs of the layout.

If you have a question, feel free to write me in the comments below!

Pin It

Comments powered by CComment

Search the blog