Joomla! today

Creating Joomla! Module

2008-09-11T13:14:00.002+05:30

Build your professional website using Joomla! 1.5 – Part 3

(Creating Joomla! Module)

Scope:

This article is part 3 of the series of articles on Joomla!. In part 1, we learnt the basics of Joomla! and walked through the steps to create a professional website using Joomla! In part 2, we learnt to create our own custom Joomla! template. This article provides detail about extending Joomla! to meet your website needs. It provides an overview of Joomla! framework and APIs and how we can use them to create our own custom modules. Custom components and plug-ins development will be covered in the subsequent articles.

Though, the article uses PHP, HTML, CSS and other W3C standards, discussing their detail are out of this article scope.

Target audience:

A Joomla! enthusiast who learnt the basics from part 1 and 2 and, wants to know more Joomla! capabilities
People who know the basics of Joomla! and want to add more power to their website by writing their own Joomla! extensions

The article can be downloaded from Creating Joomla 1.5 Modules

Creating your own custom Joomla! Templates

2008-03-18T14:48:00.010+05:30

Build your professional website using Joomla! 1.5 – Part 2

(Creating your own custom Templates)

Scope:

This article is part 2 of the series of articles on Joomla!. In part 1, we learnt the basics of Joomla! and walked through the steps to create a professional website using Joomla! This article provides the overview of Joomla! template, its structure & styles and provides a step-by-step approach to creating your own custom template and publishing your website content using the new template.

Though, the article uses HTML, CSS and other W3C standards discussing their detail is out of this article scope.

Target audience:

A Joomla! enthusiast who learnt the basics from part 1 and wants to do more with Joomla!
People who know the basics of Joomla! and want to create their own Template

By-line:

Author is a freelance consultant and trainer with empower consultancy & services Pvt. Ltd. Support for Joomla! articles, including this one, can be found at http://joomlatoday.blogspot.com/. You can also send your queries directly to him at ajit.kumar@empowerconsultancy.in

What is a Joomla! template

Joomla! provides the strong support for templates which allows the site administrator to change the content presentation instantaneously by choosing a different template. Joomla! template is a collection of files which control the content presentation. It provides the foundation to view the content of the website.

Why custom template?

There are various reasons why one would like to develop a new custom template. Some of them are:

· Technical reasons such as – loading time, conformance to W3C standards, etc.
Corporate identity
People are creative and there is no end to it
Learning the HOW-TOs

A look at the default Joomla! template

All the Joomla! site templates reside in the templates folder under the Joomla! installed folder. Every template has a directory matching with the template name. E.g. in the default Joomla! installation you will see two folders beez and rhuk_milkyway. Default Joomla! installation uses rhuk_milkyway template.

Each of the template directories may have the following directories:

· css – Contains all the CSS files used by the template.

· html – Contains the template files which are used to override the core output of the Joomla! system. This is an advanced topic and is currently excluded from this article for simplicity sake

· images – contains all the image files (e.g. logo, border, button images, etc.) used by the template

· javascript – Contains all the JavaScript code used by the template.

Following are the some of the important files related to a template, which acts like a foundation for most of the templates, if not all:

templateDetails.xml – Contains the meta-data about the template. This file must exist for a template. The file is used by the Joomla! Administrator interface for installation and maintenance of the template. The file contains the detail about the files which constitute the template, the author information, and the parameters which can be passed to the template through the Joomla! Administrator interface. This file is usually stored in the template root folder, which will be <xampp installed folder>/htdocs/<your site folder>/templates/<template name>.
index.php – This file contains the main logic of the template, including displaying components, modules, and articles. It also contains the client-side code, including CSS and JavaScripts. This file must exist for a template and is usually stored in the template root folder.
template_thumbnail.png – This is the small screen-shot of the template. Usually, it is of size 200 X 150 pixels. As shown in Figure 1, this is used by the Joomla! Administrator Template Manager interface to display the thumbnail when you place the mouse pointer on the template name. This is an optional file. After you have tested your template you can take a screenshot of it and create this file using your favourite image processing tools, like, GIMP. If created, this file is usually stored in the template root folder.

Figure 1: Template thumbnail

params.ini – This file contains the list of parameters the template supports. Each line contains a parameter name-value pair. This is an optional file. If created, this file is usually stored in the template root folder.

templateDetails.xml and the index.php files are the two important files which is created for every Joomla! template. It is worth going into the detail of these two files as we will also have to write them for our new template. We will break the complete file into related code chunks and see what it does.

templateDetails.xml

As discussed earlier, this file contains the meta-data about a template. It is used by the Joomla! Administrator interface. So, let us take a look at this file’s content and see what it does and understand what our template’s templateDetails.xml file should have.

---------------------------- CODE ------------------------------------

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">

---------------------------- CODE ------------------------------------

As templateDetails.xml is an XML file, like any other XML file, it must contain the header information with the DOCTYPE information. It also contains the DTD (Document Type Definition) URL based on which this XML file is written.

---------------------------- CODE ------------------------------------

---------------------------- CODE ------------------------------------

Joomla! Administrator interface allows the installation of components, modules, plug-ins, and templates using the same interface. Hence, it would require a way to differentiate between them. This entry tells the installer that it is a template and it is for 1.5 version of Joomla!.

---------------------------- CODE ------------------------------------

<name>rhuk_milkyway</name>

<author>Andy Miller</author>

<authorEmail>rhuk@rockettheme.com.com</authorEmail>

<authorUrl>http://www.rockettheme.com</authorUrl>

<description>TPL_RHUK_MILKYWAY</description>

---------------------------- CODE ------------------------------------

This contains the information about the template, like, author information, licence, template name and description, etc. Once the template is installed successfully through Joomla! Administrator interface, some of this information appears on the Administrator interface.

---------------------------- CODE ------------------------------------

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_thumbnail.png</filename>

<filename>params.ini</filename>

<filename>images/arrow.png</filename>

<filename>images/indent1.png</filename>

........

</files>

---------------------------- CODE ------------------------------------

Every template is a group of files, like, image files, CSS, JavaScripts, etc. All these files are listed within the <files> tag. This gives template developer the flexibility to store the template files in any folder structure and use any file name.

---------------------------- CODE ------------------------------------

<position>breadcrumb</position>

<position>right</position>

<position>footer</position>

<position>debug</position>

<position>syndicate</position>

</positions>

---------------------------- CODE ------------------------------------

A template divides a page into smaller areas and each of them is allocated a position on the page. All the positions supported by a template are listed under <positions> tag. A new template may choose to support all the positions or a subset of them.

---------------------------- CODE ------------------------------------

<option value="green">Green</option>

<option value="orange">Orange</option>

<option value="black">Black</option>

<option value="white">White</option>

</param>

<param ......

...........

</param>

</params>

---------------------------- CODE ------------------------------------

A template’s functionality can be driven by the configuration of its parameter values. A template, which supports parameters, will list out all the parameters and its possible values under the <param> tag. Once specified, these parameters will appear on the Joomla! Administrator interface when you edit template information as shown in Figure 2. The Administrator can change the behaviour of the template by changing the parameter values.

Figure 2: Template Parameters

You must be thinking is the list of tags mentioned above is complete! Where can I find the complete list of tags and their attributes, which can be specified during the creation of my custom template? The answer lies in the second line in templateDetails.xml file. This line contains the URL of the DTD file (http://dev.joomla.org/xml/1.5/template-install.dtd), which contains the complete detail.

index.php

Anyone who develops a new template will have to write this file. So, the obvious question is - Why? Answer is, so that you know what shall be the structure of this file, what is it expected to do, and how does it ties the knot between the presentation and the content in the database.

Let us take a look at the code.

---------------------------- CODE ------------------------------------

defined( '_JEXEC' ) or die( 'Restricted access' );

---------------------------- CODE ------------------------------------

This line of code ensures that this script is not being accessed directly. This is required for security purpose.

---------------------------- CODE ------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

---------------------------- CODE ------------------------------------

This DOCTYPE tells the browser how to interpret the page. And, the xml:lang is set after reading the language setting from Joomla! site global settings.

---------------------------- CODE ------------------------------------

---------------------------- CODE ------------------------------------

Includes all the required CSS files. $this->params->get('colorVariation') reads the value set for ‘colorVariation’ template parameter.

---------------------------- CODE ------------------------------------

<!--[if lte IE 6]>

<![endif]-->

---------------------------- CODE ------------------------------------

Includes the CSS to work around with bugs or deviations from W3C standard in IE 6.0 or older

---------------------------- CODE ------------------------------------

<?php if($this->direction == 'rtl') : ?>

<?php endif; ?>

---------------------------- CODE ------------------------------------

Includes the appropriate template if the direction is set to right-to-left

---------------------------- CODE ------------------------------------

<body id="page_bg" class="color_<?php echo $this->params->get('colorVariation'); ?> bg_<?php echo $this->params->get('backgroundVariation'); ?> width_<?php echo $this->params->get('widthStyle'); ?>">

......

<jdoc:include type="modules" name="top" />

......

<jdoc:include type="modules" name="user3" />

......

<jdoc:include type="modules" name="user4" />

......

<jdoc:include type="modules" name="breadcrumb" />

......

<jdoc:include type="modules" name="left" style="rounded" />

......

<jdoc:include type="modules" name="user1" style="xhtml" />

......

<jdoc:include type="modules" name="user2" style="xhtml" />

......

<jdoc:include type="component" />

......

<jdoc:include type="modules" name="footer" style="xhtml"/>

......

<jdoc:include type="modules" name="right" style="xhtml"/>

......

<jdoc:include type="modules" name="syndicate" />

......

<jdoc:include type="modules" name="debug" />

---------------------------- CODE ------------------------------------

This is the code which gets the content from the various modules and component and displays it on the page.

Keeping the usability, accessibility, and search engine optimisation in mind, a template loads the content in a logic order. Following is the order in which the various articles, components, and modules are loaded by the default Joomla! template:

logo
top modules - newsflash
user3 module – top menu
user4 module – search
pathway - breadcrumb module
left column - left modules – main menu, resources, key concepts, login form, etc.
main column

user1 module – Latest News
user2 module - Popular
footer modules – banner, copyright message
right modules – polls, advertisement, who’s online, etc.

footer

syndicate module
text – “Powered by Joomla!. valid XHTML and CSS.”

To know what modules are associated with what position, go to the Module Manager page of Joomla! Administrator interface of your web site.

Figure 3: Modules and positions

Figure 4 shows where the different modules are positioned on the Joomla! default web page.

Figure 4: Default template modules and positions

Default Joomla! template styles

The template styles are driven, mostly, by CSS. A Joomla! template can have one or more CSS files defined. It is possible to define a CSS for the site layout, a CSS for menus, a CSS for positions and so on.

Following are some of the important CSS files you may come across when you browse through the 3^rd party templates:

template.css – main template CSS file

template_rtl.css – main template CSS when the presentation direction is right-to-left
ieonly.css – styles defined to work around with Internet Explorer 6 and prior CSS bugs or deviations from standard
ie7only.css - styles defined to work around with Internet Explorer 7 CSS bugs or deviations from standard

All the Joomla! Administration pages use the CSS styles defined in the files under templates/system/css folder.

Figure 5 shows the default Joomla! page and some of the styles being used.

An easy way to figure out the style used on a page for an element can be found by installing the Web Developer add-on to the FireFox browser and enable the CSS style for the page for which you want to see the CSS styles.

Figure 5: Default template styles

Planning your custom template

Before we get into developing the new template, let us spend some time to plan out our template requirements. What exactly we want our template to present the website content? Let us say, following are my first cut of requirements:

3-column page layout
New template must display the same content as the default Joomla! template

Well, so, what action do these requirements correspond to? As, in any Joomla! template, content comes from the Joomla! database, no change in required from the content access point of view. However, to support requirement (b), the template must support the placeholders for dynamic content (modules, components) and static content (articles). Also, the new template must support the positions like top, left, right, user1, user2, user3, etc. As listed in the templateDetail.xml file of the default Joomla! template. So, to summarise, we will have to design a layout for the new template to support the above mentioned requirements.

Following is the step-by-step approach to create a new Joomla! template to address the above mentioned requirements:

Step 1: Preparing the infrastructure

Decide upon a name for your new template. E.g. I name my template bool (Born Out Of Laziness).

Create a folder by name bool under templates folder

Create following folders under bool :

You can create images folder if you plan to have your own images. I have not shown it here for simplicity sake.

Step 2: 3-column layout

When it comes to 3-column layout, we have two choices:

HTML table (<table>, <tr>, <td>)
HTML div with CSS

The selection of the approach is completely at your discretion. Both the approaches exist for various practical and technical reasons. However, the selection must be made based on the problem context. In this article I will use CSS as it allows me to separate the layout from presentation, it is faster to load in the browser, and provides better usability, accessibility, and SEO (Search Engine Optimisation). Refer to the Tableless layout HOWTO URL, mentioned in the Reference list for more detail. Discussion of HTML, CSS and other W3C standards is out of the scope of this article.

Following CSS code of our new template shows the styles for 3 columns and also for some of the component and module headings:

-------------------------------- CODE -------------------------

#left {

float:left;

width:15%;

border:1px gray;

padding: 5px;

}

#centre {

float:left;

width:60%;

border:1px gray;

padding: 5px;

}

#right {

float:left;

width:15%;

margin: 10px;

border:8px solid;

padding: 15px;

}

div.moduletable_menu h3 {

font-weight: bold;

color: #000;

background: #f23;

}

div.moduletable_text h3 {

font-weight: bold;

color: #000;

background: #f23;

}

div.moduletable h3 {

font-weight: bold;

color: #000;

background: #f23;

}

div.componentheading {

font-weight: bold;

color: #000;

background: #f99;

}

td.contentheading {

font-weight: bold;

color: #000;

background: #ff3;

}

-------------------------------- CODE -------------------------

Name this file template.css and save it under bool/css folder. It is optional to name the file template.css. You can specify any name of your choice.

Step 3: Having layout and placeholders for the dynamic and static contents

This previous step takes care of dividing the web page in 3 columns. However, we are still left out with the second requirement. To support it, we will have to write the index.php file.

Following PHP code of our new template shows the how the content is included in the template and how they are positioned:

-------------------------------- CODE -------------------------

<html>

<head>

<jdoc:include type="head" />

</head>

<body>

<ldoc:include type="message" />

<jdoc:include type="modules" name="left" style="xhtml" />

</div>

<jdoc:include type="component" />

</div>

<jdoc:include type="modules" name="right" style="xhtml" />

</div>

<jdoc:include type="modules" name="debug" />

</body>

</html>

-------------------------------- CODE -------------------------

Save this index.php file under bool folder.

Step 4: Filling up the gaps

Now, that we have defined the template style sheet, it is time to put the basic building blocks to make it a Joomla! template, which can be installed through the Joomla! Administrator’s Template Manager interface. Following files needs to be created under bool folder:

templateDetails.xml
template_thumbnail.png

templateDetails.xml

Following is the code for our new template:

------------------------------- CODE --------------------------

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">

<creationDate>5 March 2008</creationDate>

<author>Ajit Kumar</author>

<authorEmail>ajit.kumar@empowerconsultancy.in</authorEmail>

<authorUrl>http://www.empowerconsultancy.in</authorUrl>

<description>This template is Born Out Of Laziness</description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_thumbnail.png</filename>

<filename>css/template.css</filename>

</files>

<position>breadcrumb</position>

<position>right</position>

<position>footer</position>

<position>debug</position>

<position>syndicate</position>

</positions>

</install>

------------------------------- CODE --------------------------

Moving site content to your custom template

Now, that the template development is over, it is the time to see if it installs through the Joomla! Administrator and publish the web site content using it. Following is the step to accomplish this:

Step 1: Create a compressed zip file with all template files

Let us say our template folder looks like this:

templates/bool/templateDetails.xml

templates/bool/index.php

templates/bool/template_thumbnail.png

templates/bool/css/template.css

Go to the templates/bool directory and zip all the files and folders within it and name it, say, bool.zip

Step 2: Go to your site Joomla! Administrator interface

Step 3: Click on Extensions->Install/Uninstall

Step 4: Browse through the file system and select the bool.zip file and click on Upload File & Install button. This will install the template.

Figure 6: Template installed successfully

Step 5: Click on Templates tab to verify that a new entry has been created for our new template

Figure 7: Verify template installation

Click on Extensions->Template Manager

Figure 8: Verify template installation in Template Manager

Step 6: Click on Extensions->Template Manager. This will show our new template.

Step 7: Select the radio button next to bool template and click on Default toolbar icon on the top-right corner to make it the site default template.

Figure 9: New template marked as default

This completed the process of moving the web site to our new template.

It’s show time now. Let us see how the site looks like with our new template. Enter your website URL in the browser.

Figure 10: Site with new template

Looks okay! Now, it’s your turn to get creative with the styles. Grab a good book on CSS and transform this into a site which you have in your mind.

This brings us to the end of this article. We explored what it takes to develop a new Joomla! template and we got our hands dirty with developing a new Joomla! template. In the subsequent parts, we will discuss how to write your own Joomla! extensions, like, modules, components.

References

XAMPP Download - http://www.apachefriends.org/en/xampp.html

Joomla! 1.5 Download - http://www.joomla.org/

Web Developer - https://addons.mozilla.org/en-US/firefox/addon/60

Tableless layout HOWTO - http://www.w3.org/2002/03/csslayout-howto

W3Schools’ CSS tutorial - http://www.w3schools.com/css/

2008-03-12T12:03:00.003+05:30

Build your professional website using Joomla! 1.5 – Part 1

Scope:

This article is part of a series of articles on Joomla!. The article introduces users to the concept of Content Management System (CMS) in general and Joomal!, in particular. The article provides a step-by-step approach to getting Joomla!, installing it, and using it to develop a website, without writing a single line of code. Though some advanced topics have been discussed, in brief, they are out of scope of this article. The advanced topics are intended to be covered in subsequent articles in this series.

Target audience:

People and organisations who are into CMS domain and want to know what Joomla!, an Open Source CMS, has to offer
People who do not have the website development skill and wants to develop a professional website within couple of days

By-line:

Author is a freelance consultant and trainer with empower consultancy & service Pvt. Ltd.(http://www.empowerconsultancy.in) Support for Joomla! articles, including this one, can be found at http://joomlatoday.blogspot.com/. You can also send your queries directly to him at ajit.kumar@empowerconsultancy.in

Introduction to Joomla!

In one line – Joomla! is a Web Content Management System (CMS).

A CMS is a system, which allows you to manage and administer your content. A content may comprise of employee data in Enterprise Resource Planning (ERP) system, accounts detail in a Financial system, customer information in (Customer Relationship Management) CRM system, etc. All these systems have their own way of managing the content and all of them fall under the wide spectrum of CMS domain. Joomla! as a Web CMS allows individuals and enterprises to manage their Website content.

Installing Joomla!

Download the 1.5 (latest stable) release from the Joomla! download URL mentioned in References
Download and install XAMPP on Linux from the XAMPP download URL mentioned in References. XAMPP comes with the MySQL database and Apache Web server, which will be used to run Joomla!
Follow the XAMPP installation and operational instructions to install and operate XAMPP as it is outside the scope of this article.
Extract joomla into the /htdocs/joomla15 folder. You can use any folder name other than joomla15
Run XAMPP
Start MySQL and Apache Web server services in XAMPP
Enter the following URL in the browser:

http://localhost/joomla15/installation/index.php

The Joomla! Installation page must come up as shown in Figure 1: Joomla! Installation

Step 1: Language

Select the language of your choice and click on Next button on the top-right corner

Step 2: Pre-installation Check

Make sure that there is a Yes next to each item. If No appears next to any item, you will have to take the necessary action to correct the problem. If all the pre-requisites are met, click on Next button on the top-right corner

Step 3: License

Accept the license and click on Next button on the top-right corner

Step 4: Database

This is where you need to specify your database detail. If you are a database user, you know what I am talking about. If you are not a database person, still, you don’t have to worry. Follow these steps to, first; create a database for your Joomla! Installation:

Steps to create a database

Download phpMyAdmin from internet
Extract it in /htdocs/phpmyadmin
Stop Apache and MySql services in XAMPP, if they are already running
Start Apache and MySql services in XAMPP
Enter the following URL in the browser:

http://localhost/phpmyadmin/
You shall see a page shown in Figure 2: phpMyAdmin Main Page

Enter joomla15 as the new database name in the Create new database text field and select utf8_unicode_ci from the drop-down list next to it
Click on Create button to create the joomla15 database in MySQL
A success message showing that the database has been created will appear as shown in Figure 3: Database created in MySQL

Now, that you have created the database, go back to the Joomla! Installation screen and specify the following database detail:

On the Basic Settings, enter the following detail:

Database Type – mysql

Host Name – localhost

User Name – root

Password -

Database Name – joomla15

Figure 4: Database Configuration

Click on Next button on the top-right corner

Step 5: FTP Configuration

Specify the FTP account detail in case you need it otherwise you can safely skip this configuration for this article. Click on Next button on the top-right corner

Step 6: Configuration

Enter the following detail:

Site Name – (e.g. EventOrg)

You E-mail - (e.g. ajit.kumar@eventorg.com)

Admin Password - a valid password

Confirm Admin Password - valid password specified above

Install Default Sample Data is checked, by default.

Click on Install Sample Data button

Figure 5: Sample Data Installed

Click on Next button on the top-right corner

Step 7: Finish

This completes the Joomla! 1.5 installation.

You will see the greeting message with the administrator login detail, a important security related message, and two icons – Site and Admin – on the top-right corner.

Figure 6: Installation Complete

-------------------- Note ---------------------

Note that the administrator user id is admin

Delete /htdocs/joomla15/installation folder. This is required for security reason. Unless this folder is deleted, Joomla! page will not allow further activity. It is also indicated on the installation page as shown in Figure 6.

-------------------- Note ---------------------

Joomla! Installation process creates two interfaces. These are indicated by the Site and Admin icons on top-right corner. Site provides you a front-end interface to view your web-site content, and Admin provides you a back-end interface to administer your web-site content.

Front end (Site)

Let us take a look at your default Web site, first. Click on the Site button on the top-right corner.

Figure 7: Default Site Layout

On your default web-site, there are three different categories of areas:

Menus
Contents
Logo Area

Menus

Menus provide the navigation support to a web-site. Joomla! has three kinds of menu in the example web-site. You can add as many menus to your site as you wish.

Top menu – This appears on the top of the page. The items are aligned horizontally. Usually, this menu is created to provide quick and direct access to the important site content. For a business organisation, this menu may contain items like Services, Products, Contact Us, About Us, Client list, etc. which is important for the business.

Main Menu – This appears on the left-hand sidebar. It is the main navigation area of the site. It is created to provide navigational links to the complete site content. This, usually, should have more links than the Top Menu. Links like, Articles, Blogs, Forums, Reviews, etc. may appear only in Main Menu for many organisations. This menu should appear on all the pages at the same position.

Other Menu – This is an additional menu, which can be added based on the site content and context.

User Menu – This menu appears when a registered user logs into the site. E.g. things like, a registered user can write a blog after he/she logs into the site, can be facilitated by user menu.

Contents

Following are the different ways Joomla! generates site contents:

Static content – This is the simplest way of creating a site content. But, as the name suggest, the content is static. Once written and published it will not change until it is re-edited. The content will not vary based on time and context. Static content is created using the Article Manager under Content menu on the Joomla! administrator page. The static content is also called un-categorised content as it does not have any section & category associated with it. A content can appear on the Front page if the Yes radio button is selected next to Front Page while creating the article in Article Manager. There is a one-to-one relationship between static content item and the page on the site.

Dynamic content – Dynamic content is organised using section and category. Content item is in category and the category is in a section. You can have multiple categories for a section.

Component content – On the Joomla! administrator page, you can see a Components menu. The items in this menu are the components, which are installed in your Joomla! installation. E.g. Banner, Search, News Feeds, etc. Components are small applications, which are displayed in the main content area of the web page when they are linked with a menu item.

Module content – Unlike Static, dynamic, and component contents, module content can appear anywhere on you web page. Most of the times you will see them on the top, bottom, and sides. Joomla! installation comes along with many modules, such as, menus, Login Form, Polls, etc.

Logo area

This appears on the top of the page. It should contain the logo and the punch line of your organisation.

Back end (Administration)

Though the default site looks great, in 100% cases, it will require the customisation of the content to suit your requirement. The customisation may include changing the logo, changing the menus, changing the static content, removing some modules, adding new modules, etc. Joomla! provides a administrator page to control and manage your site content.

To go to the administrator page, click on the Admin button on the top-right corner on the installation page or enter the following URL in your browser:

http://localhost/joomla15/administrator/

Figure 8: Joomla! Administrator Login panel

The URL will display a Joomla! Administrator Login panel as shown in Figure 8. Specify the administrator’s username and password, which you had noted down during the installation, and click on Login button to login into the administrator page. On successful login, you will see the page as shown in Figure 9.

Figure 9: Joomla! administration page

The Administrator page will show your site name (e.g. EventOrg in this case), which you had specified during the installation process. Take some time to explore the menus the other options available on this page and try to relate the entries (sections, categories, articles, front page, etc.) and their content with your web-site content.

Now that we are kind of explored the administrator page, let us get into the real thing. Let us see how you can customise your web-site.

The very first thing which comes in your mind when you look at the default site is that – “I don’t like this, I don’t like that”. So, let us do some planning and clearly jot down what changes you want to make to the default site and, say, following is the list of changes you have come up with and the customisation actions I have identified:

Changes	Customisation action
Site look-n-feel needs to be different	Find a different Joomla! template, installing it, and using it for the site
Main menu must have the following options: Home Services The News Web Links News Feeds	Remove the following items from Main Menu: Joomla! Overview Joomla! License More about Joomla! FAQ Add the following menu item to Main Menu: Services
Change About Joomla! To About EventOrg on the top menu	Change the Top Menu item name
No polling, please!	Un-publish/Remove the Polls module
Replace the front page content with my content	Change the front page static content

Great! Now that we have the requirements clarified and actions identified, it’s time to get started with the real action.

Installing new template

There are numerous free as well as commercial templates available on the internet. You can choose one template which matches with the look-n-feel (colour and content placement) that you have in your mind. Let us say, we finalise- a template from http://www.siteground.com/joomla-hosting/joomla-templates.htm URL.

Install the template of your choice by following these steps:

Download the template

On the Joomla! Administrator page Click on Extensions->Install/Uninstall menu option

Upload Package File

o Specify the Package File and click on Upload File & Install button

Figure 10: Install Template Success

Click on Extensions->Template Manager menu option and verify that your newly installed template appears in the list.

Figure 11: View Installed Template

On the Site tab select the radio button next to the new template and click on Default button. A star will appear in the Default column of new template entry.

Now, access the http://localhost/joomla15/ URL from the browser. Your site is now using the new template of your choice.

Figure 12: Site with new template

Changing Main Menu

Go to the Joomla! Administrator page

Click on Menus menu item and choose Main Menu option

Select the following entries:

o Joomla! Overview

o Joomla! License

o More about Joomla!

o FAQ

And click on Unpublish button on the top. A red coloured cross will appear in the Published column of the above listed entries.

Figure 13: Menu Item Manager after item un-publish

The unpublished items do not appear on the site.

Before we add a new menu entry, we need to create a static content to hold the content for the Services page.

o Create section

§ On the Joomla! administration page, click on Content menu item and choose Section Manager option

§ Click on New button on top to create a new section

· Title – Services

· Alias – services

· Published – Yes

· Access level – Public

§ No description is needed. Click on Save button on top

o Create category

§ On the Joomla! administration page, click on Content menu item and choose Category Manager option

§ Click on New button on top to create a new category

· Title – Services

· Alias – services

· Published – Yes

· Section - Services

· Access level – Public

o No description is needed. Click on Save button on top

o Create article

§ On the Joomla! administration page, click on Content menu item and choose Article Manager option

§ Click on New button on top to create a new article

· Title – Services

· Alias – services

· Section – Services

· Published – Yes

· Front Page – No

· Category – Services

§ Add the content and click on Save button on top

Add the following entry:

o Services

By following these steps:

o On the Menus->Main Menu page, click on New button to add an entry

o Expand Articles under Internal Link in Select Menu Item Type

o Click on Article Layout under Article

o Enter the following detail:

§ Title – Services

§ Alias – services

§ Display in – Main Menu

§ Parent Item - Top

§ Published – Yes

§ Order – 1 (Home) (Services will appear after Home)

§ Access Level – Public

§ On Click, Open In – Parent Window with Browser Navigation

o On the right-hand side, in the Parameters – Basic, enter the following detail:

§ Select Article – Services

o Leave the other Parameters settings to default and click on Save button on top

o If you want, you can change the order of the menu items in Top Menu by clicking on up-arrow or down-arrow in the Order column

o Click on Save button on top

Change About Joomla! To About EventOrg on the top menu

Go to the Joomla! Administrator window

Click on Menus menu item and choose Top Menu option

Click on About Joomla! Entry

Change the Title to About EventOrg and click on Save button

No polling, please!

Go to the Joomla! Administrator window

Click on Components menu item and choose Poll option

Select the check box next to the Joomla! Is used for? and click on Unpublish button on the top

Replace the front page content with my content

Go to the Joomla! Administrator window

Click on Content menu item and choose Front Page Manager option

Click on Welcome to Joomla!

Edit the content and click on Save button on top

Well, this is it! We are done with our customisation. Now, if you access your site it will reflect all your changes.

Figure 14: Site after customisation

If you click on Services in the Main Menu, your services content will show up.

Figure 15: Services

Congratulations! you are ready to launch your site.

Adding new Extensions

Many a times, the default Joomla! installation will not have the required components and modules suiting you site needs. E.g. you are launching a Event Organisation site, which demands a Event Calendar, which is not available as part of default installation. Similarly, default installation provides certain components/modules but you are not contented with it. E.g. default installation provides a JoomlaBoard as the forum component but you prefer FireBoard. In these situations, you will have to find suitable Joomla! extensions, install them, and use them on your web site.

Let us take your site requirement. As EventOrg, you need to have an event calendar on your site. After exploring the Joomla! extensions, say, you have selected JEvents extension.

Installing a JEvents extension for event calendar

Download the JEvents installation packages from http://joomlacode.org/gf/project/jevents/frs/ URL

Figure 16: JEvents download item list

On the Joomla! Administrator page, click on Extensions menu and select Plugin Manager option

Search for the text – legacy. Search result will show a plug-in by name System-Legacy with a red cross in the Enabled column. This shows that the plug-in is not enabled.

Click on the red cross to enable the plug-in. You will see a green tick in the Enabled column showing that the plug-in is enabled

Click on Extensions and choose Install/Uninstall menu option

Browse through your file system, select the bot_events_search1.4.3beta_joomla1.5 archive, and click on Upload File & Install button

Figure 17: Install Plug-in Success

Repeat the previous step for the followings:

o mod_events_cal_1.4.3beta.zip

o mod_events_latest_1.4.3beta.zip

o mod_events_legend_1.4.3beta.zip

o com_jevents1.4.3beta.zip

Figure 18: Install Component Success

The JEvents extension is installed and is ready for use.

Showing the event calendar on the site

Now, let us say that, I want to display the event calendar below the Advertisement on the right-hand side.

Click on Extensions and choose Module Manager option

Browse through the list and you will find the three modules related to events, which you recently installed

Figure 19: JEvents disabled

Enable these three modules by clicking on the red cross in the respective Enabled column.

Default position is left. Change this to right as we want to display the event calendar on the right-hand side.

Now go back and access your site URL.

Wow! a nice event calendar appears on the right-hand side below the Advertisement module as shown in Figure 20.

Figure 20: Site with new Event Calendar

This brings us to the end of this article. We journeyed through the basics of Joomla!, installing Joomla!, customising it, and adding new extensions to it. In the subsequent parts, we will discuss some advanced topics on Joomla!, like, creating your own template, moving site from development to production, Joomla! architecture, APIs and how to write your own extensions, etc.

References

XAMPP Download - http://www.apachefriends.org/en/xampp.html

Joomla! 1.5 Download - http://www.joomla.org/

Free Joomla! 1.5 Templates

http://www.freecmstemplates.com/joomla.php

http://www.siteground.com/joomla-hosting/joomla-templates.htm

Joomla! extensions page

http://extensions.joomla.org/

Welcome to Joomla Today!

2008-01-31T14:37:00.000+05:30

Welcome to Joomla! Today. Do come back to see articles, news, and tips about Joomla!