Professional Documents
Culture Documents
1
TABLE OF CONTENTS
Introduction 3
2
INTRODUCTION
This is the guide for editing the Joomla! Government Web Template. It is not a comprehensive manual
on Joomla!. It is assumed that the user has undergone basic training on Joomla! and has basic knowledge
of the content management system. There is a separate technical manual for backend developers.
Technical details such as installation and CMS administration are not included here.
This manual is organized based on the GWT’s basic parts. It discusses how to edit / add content /
customize the template from the top bar to the footer.
3
PARTS OF THE GOVERNMENT WEB TEMPLATE
version 2.2.1
TOP BAR
MASTHEAD
BANNER
AUXILIARY MENU
(optional)
CONTENT AREA
AGENCY FOOTER
STANDARD FOOTER
4
LOGGING IN AND GETTING STARTED
Make sure that you have an internet connection.
The first step in editing the Government Web Template is to open a web browser.
On the address bar of your browser type the following url to log in to your account:
http://yourdomain/administrator
The url will bring you to the Log In page of your Joomla! site.
Enter your Username and Password in the fields and click the Log In button.
5
The Control Panel is the home page of the backend. It contains links to the different Managers that will
allow you to manage your site and its contents. Some of these tasks are creating and publishing content,
adding modules and changing the settings of your site.
6
This is how the Joomla! Government Web Template version 2.2.1. looks like after customization - that
is after putting in the content and modules in their proper position.
You will put in your own content and customize the template through the Joomla! Control Panel.
7
GWT JOOMLA! MODULE MAP
8
EDITING THE TOP BAR
The Top Bar has fixed components and links that include the Republic Seal and the Main Navigation.
The Main Navigation contains links to different articles in the website. Before editing the Top Bar, these
articles should have been added already.
The GWT has a default menu called Main Menu, positioned at the Top Bar. To add menu items under
the Main Menu -
1. Click Menus > Main Menu > Add New Menu Item
9
3. A pop-up screen will list the different elements such as Smart Search, Newsfeeds, Tags, and
Weblinks to which you can create a link to.
10
7. On the pop-up screen select the article.
8. Click Save & New to create other menu links. Choose Save & Close if you’re done creating
your menu items.
11
ADDING AN AUXILIARY MENU (optional)
The Auxiliary Menu is optional. Begin by creating the Articles that will link to your auxiliary menu
items. Then create a Module for this menu. Go to Extensions > Module Manager > New.
12
From the list of Module Types choose Menu.
On the Title field type Auxiliary Menu. Under Position choose Auxiliary Menu.
Click Save & Close. Your newly created module will now be displayed in the Module Manager
page.
13
Now that the auxiliary menu module is ready, create the Menu and the menu items.
Enter the following Menu Details - Title: Auxiliary Menu and Menu type: Optional
14
Your newly created Menu will now appear under the Menu Manager page. Click on its title to add
the Menu Items.
Click the New button at the upper left corner of the page.
15
Select the Menu Item Type, give it a Title and make sure the Menu Location points to Auxiliary Menu.
On the Module Assignment for this Menu Item tab choose Auxiliary Menu. On the pop-
up page, click the Options tab and under Select Menu, choose Auxiliary Menu.
Click Save & Close. Repeat the same steps to add more menu items.
16
BREADCRUMBS AS AUXILIARY MENU (optional)
The Auxiliary Menu can also be used as Breadcrumb navigation. Breadcrumbs are navigation aid so the
user can easily see exactly where a Web page is located within the Web site.
Example: Home > About the Organization > History of the Organization
17
From the list of Module Types choose Breadcrumbs.
On the Title field type Breadcrumbs. Under Position choose Auxiliary Menu.
Click Save & Close. A Breadcrumb will appear in the Auxiliary Menu position everytime you visit
sub-pages within your website.
18
EDITING THE MASTHEAD
Prepare your agency logo according to the specifications of the GWT. Dimensions should be 100
pixels (L) and 548 pixels (W).
To add your agency logo to the Masthead, go to Extensions > Template Manager.
19
Choose the Options tab, then Logo upload.
Click Browse on the pop-up window. Select your agency logo file from your computer and click the
Start Upload button.
20
Once uploaded your logo’s thumbnail will appear on the page. Choose your logo by clicking it then
click the Insert button.
You will be brought back to the Options page of the template style. You can also change the
background color of the masthead. This is the color behind your agency’s logo.
Click Save & Close if you’re satisfied and view your website. Your agency logo should display on the
masthead.
21
EDITING THE BANNER
The Banner component features images linked to specific Articles or external websites, and displays
them as a slideshow.
Start by uploading images to be shown in the image slider. The standard width for the image is
1190px.
22
Choose the files or images you want to appear on the banner and click Start Upload.
Take note of each image’s URL. This information will be needed later.
23
Next, create a module for the image slider.
24
Enter Module Title and choose the following:
Show Title = Hide
Position = Slider
25
Once all the images have been added, click the HTML button.
Once all the images have been added, click the HTML button.
Edit the <ul> tag and add: data-orbit=’’ “
The final <ul> tag should now be : <ul data-orbit=” “>
To add a caption to an image, insert <div> tags after the image as shown below:
<div class=”orbit-caption”>Insert your caption here.</div>
Click Update.
Go to Menu Assignment tab and assign to what articles the module should appear.
Click Save & Close.
26
ADDING CONTENT TO THE CONTENT AREA
Adding an Article:
27
Enter the article Title and the article body.
28
There is an option to select the layout of the Content Area. To change the layout go to
Extensions > Template Manager > gwt-jmla-22-Default > Options
The transparency seal is required in the Content Area. It can be positioned on the left or right side of
the page. To set the seal’s position go to
Extensions > Template Manager > gwt-jmla-22-Default > Options
29
EDITING THE AGENCY FOOTER
The content of the Agency Footer is divided into 3 columns. The Module Positions for it are:
supplementary1, supplementary2 and supplementary3
Select a Module Type depending on the nature of the content that you want to display on your footer.
For custom content, select Custom HTML.
30
On the Details Tab, add your Title and choose the Position - Supplementary 1, Supplementary
2, or Supplementary 3.
31
Enter the content of your Module in the Custom Output page. You can add text or images.
32
THE STANDARD FOOTER
The standard footer cannot be edited thru the Joomla! Control Panel. It is present in all pages and
lists all Government Agencies linked to their official websites. It acts as a portal to other Philippine
government websites. On this section, it is required to put the seal of the Republic of the Philippines.
33
THE END
34