CUSTOMIZING YOUR JOOMLA SITE Arnel I. Robles (arnelirobles.blogspot.com)

Open your web browser.

Type in the address bar:

localhost/nameofsite/administrator

Add New Tab and type:

localhost/nameofsite

*Note: nameofsite is the name your website (mysite, practicedenr, etc)

Log on as administrator

CHANGING YOUR TEMPLATE

Mouse Hover Extensions

Click Extension Manager

Click Browse

Local the template. In our case, it is JustBusiness-FJT.zip

Found in ..\Joomla Training DENR XII\0.Requirements

Double click it

Click Upload & Install

Mouse Hover Extensions

Click Template Manager

Check JustBusiness-FJT – Default

Click Make Default

Go to the Tab for localhost/nameofsite

Press F5

ADDING MENUS

In the administrator panel.

Mouse Hover Menus

Click Menu Manager

Note

There is a predefined menu named Main Menu.

For ease, we will edit the predefined menu.

To create another menu just click New.

Click Main Menu. The following window appears.

Lets add a menu items

PROFILE, DIRECTORY, SECTOR,

PRESS RELEASES, FEEDBACK

I will show how to add PROFILE menu item.

Click New

Since we don’t have article yet we will use External URL as Menu Item Type.

Click Select

Click External URL

Type PROFILE in the Menu Title

Click Save & Close

*Use same process for the remaining Menu Items

DISPLAYING MENUS USING MODULES

In order to display your menus, modules must be defined.

We will work with the module

Positions in our template.

In the admin panel

Mouse Hover Extensions

Click Module Manager

Click New

Choose Menu as Module Type

Title: topmenu

Position: menuload Click Save & Close

Switch to the other tab displaying your site and hit F5

ADDING DROPDOWN MENUS

Before adding a dropdown menu do this first.

In Module Manager click topmenu

In the Basic Options -> Show Sub-menu Items

Choose Yes and click Save & Close

We will add the following sub-menus:

Directory

Region XII Officials

Organizational Structure

Sector

FMS

LMS

Go to Menus -> Menu Manager

Click Main Menu

I will add Region XII Officials under Directory.

Click New.

Choose External URL as Menu Item Type

Menu Title: Region XII Officials

Parent Item: -Directory

Click Save & Close

Open your site and hit F5.

*Do the same steps on other sub-menus

ADDING ARTICLES

Content -> Article Manager -> Add New Article

Title: About DENR

Write a brief article.

Click Save & Close

Add other article using the same process

DISPLAYING ARTICLES BY LINKING TO MENUS

Menus -> Main Menu

We will connect the About DENR article to Home

Click Home

Change Menu Item Type to Single Article

Click Select/Change

Click About DENR

Click Save and Close

Open your site and hit F5

REMOVING UNNECESSARY DETAILS

Details like this are not necessary.

Menus -> Main Menu

Click Home

Set the options as shown

Click Save & Close

View your site and

Hit F5

ADDING IMAGES

We will add a module on the left.

By this time it will be an image.

From Joomla Training DENR XII\0.Requirements

copy image1.jpg to

C:\wamp\www\nameofsite\images

Click Extensions -> Module Manager

Add New Module with type Custom HTML

Title: SECRETARY’s CORNER

Position: left

In the Custom Output click Image

Click image1.jpg and click Insert

Resize the picture and click Save & Close

DISPLAYING LIST OF ARTICLES

Click Extensions -> Module Manager

Click New

Choose Articles Category as Menu Type

Set Title to RECENT ARTICLES

Position: Right

Click Save & Close

View your site and hit F5

ADDING WEB LINKS

Mouse Hover Components

Click Weblinks then click New

Title: DENR CENTRAL OFFICE

URL: www.denr.gov.ph

Save & Close

*Add more weblinks

DISPLAYING WEBLINKS

Extensions -> Module Manager

Click New

Choose Weblinks as Module Type

Title: RELATED LINKS

Position: Right

Target Window: Open in New Window

Save & Close

CHANGING THE LOGO

Replace the logo.png file in

C:\wamp\www\nameofsitetemplates\justbusiness-fjt\images

OTHER CONFIGURATIONS

Mouse Hover Extensions

Click Template Manager

Click Just Business-JFT (set your preferences)

*For the slideshow just replace the images at

C:\wamp\www\nameofsite\templates\justbus

iness-fjt\slideshow