Home Joomla! Tutorials Joomla Template Development TutorialsThe body of the index.php file - Part 7

The body of the index.php file - Part 7

To complete the skeleton of your index.php file, insert the code between the tags and <body> </ body>. To prepare, schématiser first, the appearance of your home page. Be assumed for the example, the following look:

To achieve this pattern, you use blocks <div> for formatting of your site.

Insert at the moment between <body> and </ body> the following code:

<div id="haut">CONTENU BANNER</div>
<div id="gauche">CONTENU GAUCHE</div>
<div id="centre">CONTENU PRINCIPAL</div>
<div id="droit">CONTENU DROIT</div>
<div id="bas">CONTENU PIED DE PAGE</div>

<div> Each block is identified by attribute "id". is the selector who will help you to set your blocks in the css file.

You are advised to open at the same time 2 windows, the window of your browser window and your editor Notepad + + that will serve you for changing your 2 php files and css. This allows you to save your changes and immediately see the result on your browser.

Save your index.php file.

Test the result maintrenant refreshing display the url of your site: "http://localhost/MonSitePerso/"

You notice that the default template is still used. This is normal. To assign your templtate site, access to the administration console via the url http://localhost/MonSitePerso/administrator

Enter the name "admin" and password
Then go to the menu "Site -> Manage Templates -> Template Site"

In the new screen and displayed, click the button next to your template TemplatePerso "and then click the" Default ".

Refresh the screen in your browser to the URL of your site: "http://localhost/MonSitePerso/. The display is now your new template.

As you can see at this stage, your template will display 4 div block, the block "up" the block "left," the block "center" block "right" and block "low".

In the following you will set your template_css.css file which is still a virgin until now.