L O G I C Library

Parent Category: Joomla!

Category: General topics^[1]

Created on Sunday, 02 February 2014 15:26

Written by Edy Incoletti^[2]

In the last years, web site front pages left their specifity giving way to a look similar to other pages. According to TheNextWeb article on web design trends for 2014^[3], it seems that hero pages are one of the most common features in new websites, requiring a front page slightly different from the others.

Let's see how we can accoomplish this work in Joomla!

In Joomla! there is no technical differences between front page and other pages, so we can change its look with the same techniques used for the personalization of other pages.

In Joomla! official documentation^[4], you can find some solutions to this problem. I try to explain what are, in my opinion, the most effectives.

Assigning a different template

In Joomla! every menu item can be associated with a different template, so you can create a completely different template for your home.

Duplicate your template using Joomla! administrator interface, personalize the new template for the front page and assign it to the home page using then "Menu assignment" feature.

With this solution you can create a front page completely different from other pages, but is a very heavy technique.

Applying a different CSS class style

In Joomla! menu manager you can find, in the “Page Display” section of a menu item, the attribute “Page class”. What you enter here is added to the the content class of this page as a suffix.

Normally templates use this suffix only in the component part, so using it you can personalize only the content part of the page and not menus or other modules.

A little tip: if your class starts with a space, you can specify a class to add to the default one. So instead of:

class="module-contentsuffix"

you can have

class="module-content suffix"

The benefits are clear!

Conditional displaying

For personalizations related not only to the content, but also to the page layout, I think the most effective solution is to modify the template to perform some conditional displaying.

To do this you must detect the current page, so here is the code you need in index.php file of your template.

<?php
$active = Jfactory::getApplication()->getMenu()->getActive();
?>
…
<?php
   if ($active->alias == 'home') {
?>… HTML for the front page<?php } else { ?>.. HTML for the other pages<?php } ?>

Splash screen or hero page, now you can do it!