USER’S MANUAL - iGovPhil Program - Integrated Goverment ...i.gov.ph/wp-content/uploads/2013/03/joomla_usermanual.pdf · 3 INTRODUCTION This is the guide for editing the Joomla!

1

USER’S MANUALJOOMLA! GOVERNMENT WEB TEMPLATE

2

TABLE OF CONTENTS

Introduction 3

Parts of the Government Web Template (GWT) 4

Logging In and Getting Started 5

GWT Joomla! Module Map 8

Editing the Top Bar 9

Adding an Auxiliary Menu 12

Breadcrumbs as Auxiliary Menu 17

Editing the Mast Head 19

Editing the Banner 22

Adding Content to the Content Area 27

Editing the Agency Footer 30

The Standard Footer 33

3

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.

4

PARTS OF THE GOVERNMENT WEB TEMPLATEversion 2.2.1

TOP BAR

MASTHEAD

BANNER

AUXILIARY MENU(optional)

CONTENT AREA

AGENCY FOOTER

STANDARD FOOTER

5

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.

This can be Internet Explorer, Mozilla Firefox, Google Chrome, or Safari.

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.

After logging in, your Joomla! Control Panel will load.

6

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.

7

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.

8

GWT JOOMLA! MODULE MAP

9

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

EDITING THE TOP BAR

2. Click Select to choose the Menu Item Type.

10

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.

4. To create a link to an article click Single Article.

5. Give your link a Menu Title.6. Choose the article you want to display. Click the Select button to select an article.

11

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.

12

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.

13

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.

14

Now that the auxiliary menu module is ready, create the Menu and the menu items.

Menus > Menu Manager > Add New Menu

Enter the following Menu Details - Title: Auxiliary Menu and Menu type: Optional

Click Save & Close.

15

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.

16

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.

17

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

To add a Breadcrumb Navigation create a Module for the menu. Go to Extensions > Module Manager > New.

18

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.

19

EDITING THE MASTHEADPrepare 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.

Choose the template style gwt-jmla-22-Default.

20

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.

21

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.

22

EDITING THE BANNERThe 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.

Go to Content > Media Manager and click Upload.

23

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.

24

Next, create a module for the image slider.

Go to Extensions > Module Manager > New > Custom HTML.

25

Enter Module Title and choose the following:Show Title = HidePosition = Slider

Leave everything else as is. Go to Custom Output tab.

26

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.

27

ADDING CONTENT TO THE CONTENT AREAAdding an Article:

Go to Content > Article Manager > Add New Article.

28

Enter the article Title and the article body.

Article body goes here

Go to the Article Options tab.Under Show Title choose Show if the article title is to be shown. Otherwise, choose Hide.For the rest, choose Hide where Hide is an option, unless your agency prefers other options.Leave everything else as is.Click Save & Close.

29

There is an option to select the layout of the Content Area. To change the layout go toExtensions > Template Manager > gwt-jmla-22-Default > Options

option to select layout of content area

Under Sidebar Position, choosing 1. Left results in a 2-column layout2. Right results in a 2-column layout3. Both results in a 3-column layout4. Disable results in a 1-column layout

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

possible positions of the transparency seal

30

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

To edit the Agency Footer, you have to add Modules.

Extensions > Module > New

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.

31

Below is a guide for the module positions of the Agency Footer.

On the Details Tab, add your Title and choose the Position - Supplementary 1, Supplementary 2, or Supplementary 3.

32

Enter the content of your Module in the Custom Output page. You can add text or images.

Click Save & Close.

33

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.

34

THE END