Giving the Front Page a different style from other pages

From Joomla! Documentation

There are several ways to differentiate your Front Page from other pages in your website.

Assigning a Different Template to the Front Page[edit]

In the site Administrator, you specify which template is "Default" for your site. However, you can assign a template other than the default to any menu item you like, including the Front Page. Go to Extensions  Template Manager. Determine which template is currently your default by looking for the star icon beside it. Now click the name of one of the other templates. In the Menu Assignment box, change the radio button from Never to Select from List. You can now chose one or more pages from the tree view that you would like to apply this template to. (For example, your main menu's Home item.) Anything not selected here will still use your default template.

Assigning Modules to the Front Page[edit]

Perhaps the simplest way to make your Front Page different from other pages in your site is to create modules and assign them to the front page only.

In the Administrator site, go to Extensions  Module Manager and click New. Select the module type you would like to appear on your home page only. Depending on the module you select, there are additional properties you will have to set. Most important is to select the position you would like this module to appear in. But to make it appear on the home page only, you will be using the Menu Assignment section on the bottom left of the Module properties. Select Select Menu Item(s) from the List from the radio buttons at the top of the section. Then select ONLY the Home item from your menu structure, leaving all the other deselected. Click Save at the top right.

No other special or technical knowledge is required. Go to your site and verify that your module only renders on the front page.

Creating Custom CSS for Your Front Page[edit]

Assigning CSS on the Component[edit]

Another way to add styling elements to your Front Page only is to use the Page Class Suffix property on the menu item which points to your home page.

In the Administrator Site, go to Menus  Main Menu. I will assume that your home page link is here. Click on your home page menu item to open its property page. In the right-hand Parameters slider, click Parameters (System) to find the Page Class Suffix parameter. The text you enter here will be appended to the CSS class names on your Front Page only. This allows you to create style sheets which affect the styles on only that one page.

For example, if you type _frontpage as the Page Class Suffix and then click OK, the Front Page's title will be inserted into a div tag like this:

<div class="componentheading_frontpage">{home page title goes here}</div>

You can then write a CSS rule which styles the componentheading_frontpage differently than the headings on every other page in your site.

Assigning CSS Style on the Body Element in Your Template[edit]

You can also adding CSS style to your body element in the template.

Edit the file index.php in your default template directory

$active = JFactory::getApplication()->getMenu()->getActive();

<body class="<?php echo $active->alias; ?> ">

The alias of your active item will be inserted as a class on your body: <body class="home ">

You are now able to write CSS rules that style the component differently on the body.home page.

body rightcolumn
  /* rule for every page */

body.home rightcolumn
 /* different rule for homepage */

Create or Update a Featured Articles Layout Override[edit]

You can create a layout override to affect the way your Featured Articles content renders. In your Joomla! site, go to \templates\{your template}\html\com_content\featured. If that directory does not exist, create it.

If no files exist in that directory, copy the Joomla! Core files as a starting point. Copy the *.php files from \components\com_content\views\featured\tmpl and into \templates\{your template}\html\com_content\featured.

Once the files are there, you can edit the files to create specialized or different HTML and/or styling information. Knowledge of PHP, HTML, and CSS are required for this more advanced technique. Joomla! will automatically see your updated files and use them in place of the default layout included with Joomla!.