Joomla! Documentation™

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

Assigning Modules to the Front Page

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 type module 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. One of the 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

Another easy 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 will allow you to create style sheets which affect the styles on only that one page. A knowledge of CSS is required to use this technique.

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

Create or Update a Frontpage Blog Layout Override

You can create a layout override to affect the way your Frontpage Blog content renders. In your Joomla! site, go to \templates\{your template}\html\com_content\frontpage. If that directory does not exist, create the necessary directories.

If no files exist in that directory, you should copy the Joomla! Core files as a starting point. Take the files that end with ".php" from \components\com_content\views\frontpage\tmpl and copy them into \templates\{your template}\html\com_content\frontpage.

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