Search
Enter Keywords:
Wednesday, 20 August 2008
Hosted Forums
Templates
Your own

commuity forum

for your church

or non-profit

organization.

Home arrow Tutorials arrow Templates arrow Template Creation
ADVERTISEMENT
Template Creation Print
Written by Ben   
Wednesday, 13 October 2004
Article Index
Template Creation
Table 1 - Site Name
Table 2 - Pathway
Table 3 - Main Content
Table 4 - Footer
Advanced Templating
Credits

TABLE 3 - LEFT AND RIGHT MODULES AND MAIN CONTENT

Now its time for the table that is going to hold 99% of your website.  This will hold the left and right modules and the main content area.

 Up until now we created a table with one table row and one table cell.  Now we are going to create a table with one table row and three table cells.  Below is an image with the code you are going to type out.  Type as shown.

Click to Enlarge
Click to Enlarge












Table 3 Code

Collapse All Expand All

[+]

With the code for the table in place we will now place the Joomla! specific code.  Enter it in as follows:

Left Modules:

On line 41 enter the code as shown in the image.  This will call any module you assign to the left module position.

Click to Enlarge
Click to Enlarge












Left Modules Code

[+]

Left Modules: A

If you wanted to add another module position such as user1 to the left, you would enter the code as shown in the following image:

Click to Enlarge
Click to Enlarge













Left Modules: A Code

[+]

Notice that the user1 module position is under the left module position and in the same table cell.  This means that when viewed anything assigned to the user1 module position will always be under any modules in the left position.


Main Body:

This is where we will call all of you content and information that you type in your website for others to view.  Not only that but we will also add the top and bottom module positions for things such as the newsflash.

You will need to add the code on lines 45 - 47.  One thing to note is that on line 46 which calls the main body of your site is specific to Joomla! 1.0 and up.

Click to Enlarge
Click to Enlarge












Main Body Code

[+]

Right Modules:

The right modules are really an optional thing as some use them and some don't.  So that being said we will add a little something that will allow you to hide them it they are not wanted.
The image below represents the typical code for a right side module.  You may enter it as shown.

Click to Enlarge
Click to Enlarge












Right Modules Code

[+]

Right Modules: A

Now we are going to add the option to hide the right table cell if there are no right side modules.  Add the code shown on lines 49 and 53 of the image below:

Click to Enlarge
Click to Enlarge












Right Modules: A Code

[+]

Now that table 3 is complete its time to write the styles for the table and the table cells.


Table 3 CSS

Type the following code as shown in the image below:

Click to Enlarge
Click to Enlarge













Table 3 CSS Code

[+]

Preview Table 3

Once you have again copied everything over to where you can preview it live it should resemble the following image:

 
Click to Enlarge
Click to Enlarge










That is basically a template.  If needed we can add one more thing such as the footer.  All that consist of is creating another table and creating the css to define it.



Last Updated ( Thursday, 06 September 2007 )
 

© 2008 Church Ministries Online
Joomla! is Free Software released under the GNU/GPL License.