Difference between revisions of "Giving the Front Page a different style from other pages"
From Joomla! Documentation
(Move all headers up a level) |
|||
| Line 1: | Line 1: | ||
There are several ways to differentiate your Front Page from other pages in your website. | There are several ways to differentiate your Front Page from other pages in your website. | ||
| − | + | == Assigning a Different Template to the Front Page == | |
In the Administrator site, 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 mainmenu's Home item). Anything not selected here will still use your default template. | In the Administrator site, 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 mainmenu's Home item). Anything not selected here will still use your default template. | ||
| − | + | == 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. | 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. | ||
| Line 13: | Line 13: | ||
No other special or technical knowledge is required. Go to your site and verify that your module only renders on the front page. | 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 == | |
| − | + | === Assigning CSS on the component === | |
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. | 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. | ||
| Line 27: | Line 27: | ||
You can then write a CSS rule which styles the componentheading_frontpage differently than the headings on every other page in your site. | 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 === | |
You can also adding CSS style to your body element in the template. | You can also adding CSS style to your body element in the template. | ||
| Line 63: | Line 63: | ||
| − | + | == 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. | 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. | ||
Revision as of 08:14, 5 June 2013
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 Administrator site, 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 mainmenu'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 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[edit]
Assigning CSS on the component[edit]
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.
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
<?php
$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 ">
Then, you are able to write CSS rule which 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 Frontpage Blog Layout Override[edit]
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!.