user’s manual · 2019-09-18 · extensions > templates. 4 set gwt-joomla as the default...

USER’S MANUAL: GOVERNMENT WEB TEMPLATE FOR JOOMLA

Version 4.0

For issues and concerns, contact the GWT Support Team at

[email protected]

Table of Contents

Introduction ····················································································· 01

Parts of the Government Website ··························································· 02

Installing the Government Web Template ·················································· 03

Editing the Template’s Style Options ························································ 04

Editing the Top Bar ············································································ 06

Adding Menu Items under the Main Menu ················································· 07

Adding Auxiliary Menu (optional) ···························································· 09

Setting up the Breadcrumbs (optional) ······················································ 11

Editing the Masthead ·········································································· 13

Setting up the Banner/Banner Slider ······················································· 14

Setting up the Top/Bottom Panels (optional) or the Agency Footer ··················· 16

Updating the GWT-Joomla! ··································································· 17

1

USER’S MANUAL: Government Web Template for Joomla v3.0

INTRODUCTION

This document serves as guide in using the Government Web Template (GWT) in Joomla. This is not

a comprehensive manual on Joomla!. It is assumed that the user has basic knowledge on Joomla or

has undergone training on the CMS.

The images in this document may or may not be exact same instance of your installation. Use this

guide only and not a step-by-step manual

2


Top Bar

Masthead

Banner

Bread Crumbs

Auxillary Menu

Top Panel

Bottom Panel

Agency Footer

Footer

Side Bar

Content

Parts of The Government Website Template

3


Installing the Government Web Template in Joomla!

Log in to the Joomla administration page.

Go to Extensions > Manage.

Download the Joomla Government Web

Template from:

http://i.gov.ph/gwhs/government-web-template/

and save the compressed gwt-joomla file to your

computer.

1

Under Install, go to Upload Package

File. Click Browse to find your saved gwt-

joomla package file then click Upload & Install

button.

3

2

After successful installation, go to

Extensions > Templates. 4

Set gwt-joomla as the Default template.

5 This will be the default look of your

website. 6

4


Editing the Template’s Style Options

Go to Extensions >

Templates

From Style choose

the gwt-joomla.

Then select Header and

Banner Options tab

HEADER AND BANNER OPTIONS

Header Logo Type: Choose from Image Only or Image

with Text as your logo type.

By Choosing the Image with Text, you need to modify

the following:

Header Logo Upload: Insert or upload the logo

image. The size of the logo should be “100x100”.

Header Logo Name: Input the Name of the Agency.

Header Logo Tagline: Input the tagline or add an

additional text for the logo.

Header Font Type: Change the text’s font-family to

Serif or San Serif.

Header Text Color: Changes the text Color of the

logo.

By Choosing Image Only, you only need to modify the

following:

Header Full Upload: Upload a full header logo

Header logo Position: The header logo’s position

whether Left or Center.

Header logo Alt: Alternative text for the image uploaded

for the logo.

Header background Color: The Background color of the

header.

Header Background Image: Upload or Insert a

background image for the header.

Header Columns:

1 COL - default 1-column Header

2 COLS - 1 header & 1 Ear Content

3 COLS Left - 1 header in the center and 2 Ear Contents

on both sides

3 COLS Right - 1 header in the left and 2 Ear Contents

on the right

Banner background Color: Background color of the

Banner.

Banner Background Image: Upload or insert a

background image for the Banner

Banner Position:

Standard 1 Col - A default 1-column banner.

Standard 2 Col - A 2-column banner: the default

column and the banner featured.

Full Width - Column is in full width of your screen.

Banner Featured Content Color: Color of the banner

featured.

Banner Featured Content Background Image: Where

you upload or select your preferred banner featured

background image.

1 2

5


Editing the Template Manager’s Style Options

CONTENT OPTIONS

Sidebar Position: Position and number of sidebar

either on the No Sidebar, Left, Right, or Both.

Transparency Position: The default Transparency

Seal logo positioned on either Left, Right, or None.

Transparency Page URL: the URL or link for the

Transparency page

PST Position: The default Philippine Standard Time

of positioned on either on the Left, Right or None.

Content Border: Select border types to No Border,

Full Border, Border Top Only, or Border Bottom

Only.

Content Border Weight: Select the weight of the

border.

Content Border Radius: Select the radius of the

border.

Content Border Color: Choose the border’s color.

Content Header Font Size: Select the font size of

the content header to Normal, Smaller, or Larger.

Content Background Color: Choose the

background color of the content’s panels or modules.

Agency Footer’s Background Color: Choose the

agency footer’s background color.

Go to Extensions >

Templates

From Style choose

the gwt-joomla.

Then select Content

Options tab

1 2

6


The Top Bar has fixed components and links that include the GOVPH and Main Navigation.

The Main Navigation contains links to different articles in the website. Before editing the Top

Bar, these articles should have been created already. Start off by positioning the Main Menu

at the top bar.

Go to Extenstions > Manage then choose Main Menu on the list of modules.

From Menu go to position and select Topbar Left [topbar-left].

Check and see if Main Menu is now positioned at the Left Top Bar beside GOVPH.

1

2

Editing the Top Bar

7


Type in the Menu Title. Go to Menus > Main Menu > Add New

Menu Item. 1

Click the Select button. A pop-up screen

will appear. 3

2

Click on Articles > Single Article. 4

Choose the article you want to display. Click

the Select button to select an article. A

pop-up screen will appear.

5

Select the article. 6

Adding Menu Items under the Main Menu

8


or click Save & Close if you’re done creating the

menu items.

Click Save & New to create other menu

links . 7

Adding Menu Items under the Main Menu

Check and see if your menu item was added by going to your homepage.

9


Enter the following Menu Details:

Title: Auxiliary Menu

Menu type: Optional

Then click

Begin by creating the articles that will link

to your auxiliary menu items. Then create

the Menu and position it on the auxiliary position

of the template.

Go to Menu > Menu Manager >

Add New Menu.

1

Now that your Auxiliary Menu is ready,

create a module.

Go to Extensions > Module Manager > New.

3

2

Under the list of Select a Module Type

find and choose Menu. 4

On the new page, type in the

Title: Auxiliary Menu.

5

And on Position, choose

Auxiliary Menu [auxiliary-menu].

Then click

6

Adding an Auxilliary Menu (optional)

10


Adding a new menu item on the auxiliary

menu.

Go to Menus > Auxiliary Menu > Add New

Menu Item.

The newly created module will now display

in the Module Manager page.

You can also check the auxiliary menu has been

added on the Home page.

7

To set up the new menu item:

First type in the Menu Title, select the appropriate Menu Item Type, and be sure the Menu

Location is set to Auxiliary Menu.

9

8

6

Adding an Auxilliary Menu (optional)

Click to create other menu links or

Click when you’re done creating the menu items.

10

11


Setting up the Breadcrumbs (optional)

The Breadcrumb is a navigational aid for users so they can easily see exactly where a web page is

located within the website. Example: Home > About Organization > History of Organization.

To add a Breadcrumb, create a new menu under the Menu Manager.

Go to Menus > Menu Manager >

Add New Menu.

Enter the following Menu Details

Title: Breadcrumbs

Menu Type: Optional_Breadcrumbs

Then click

Now that the Breadcrumbs Menu is ready, set its position to Breadcrumb.

Then select

Breadcrumbs on

the list of modules.

Go to

Extensions >

Manage.

Inside the Breadcrumbs Module, set the position to

Breadcrumbs [breadcrumbs].

1

2

3

4

5

12


Setting up the Breadcrumbs (optional)

Click and your module has now been successfully saved.

Check the Breadcrumbs on

your Home page.

6

13


Editing the Masthead

Prepare your agency logo according to the specifications of the GWT. Recommended dimensions

should be 100 pixels in height.

To add the

agency logo to the

Masthead, go to

Extensions >

Templates.

Choose

gwt-joomla

template.

Under the Header and Banner Options, the Header Logo Type gives the option to choose

from two types of image logo: the Image Only or the Image with Text.

Image Only - gives the option of uploading a

full image logo through the Header Full

Upload.

Image with Text - gives the option of

uploading a 100 x 100 image logo through the

Header Logo Upload and direct editing of the

Header Logo Name, Header Logo Tagline,

Header Font Type, and Header Text Color.

After saving, see if the logo appears on the frontend.

1

2

3

An example of Image with Text logo An example of Image Only logo

14


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 recommended width for the image

is 1250px (with a minimum height: 150px and a maximum height: 460px).

Go to Content > Media and click 1

After uploading all the images for the

banner, go to Component > Banners.

Go to Banners: Banners and click

2 Under the Banners: Category

3

Setting up the Banner/Image Slider

Browse the images to be uploaded then click Start Upload

4

Then go to Categories and

create a new Category

Select the Category you

created for the banner slider Type an Alternative Text for

the image alt

On the Click URL type the url

or link for the image banner.

Add a Description for the

banner caption.

Input the desired Name

To add more image banner

keep repeating this step

Then click

Type the Title for the banner’s Category

Set the Status to Published

Set the Status to published

On the Image section, select or

upload the desired image for the

banner

15


On the Banner Module, set the required inputs.

Setting up the Banner/Image Slider

7

Type in the Title.

Then click

Set Show Title to

Hide.

Set the Position to

Banner [banner].

Set the desired number of

banners on the Count

option

Select the Category where

your chosen banners are

located

Go to Extensions > Modules On the list of Module Type

choose Banners. 5 6

Then click

16


Under list of Module Type,

select Custom HTML.

In creating the top and bottom panels, go

to Extensions > Module Manager. 1

Setting up the module panel. 3

2

Setting up the Top/Bottom Panels (optional) or the Agency Footer

then click

Write in the Title of the

panel.

Set the appropriate

Position, from Panel

Top 1-4, Panel Bottom

1-4 or Footer 1-4.

Set the contents of your

panel using the

WYSIWYG editor.

Then click

Set Show Title to Hide

or Show.

17


Updating the GWT - Joomla!

Log in to your Joomla Backend or /

administrator.

Download the GWT-Joomla by going to

https://github.com/iGovPhil/gwt-

joomla/releases and get the latest release.

1

Install the Template

a. Go to Extensions > Manage

b. Then go to the Install tab on

the right.

c. Click on the Upload Package File tab.

d. And click on the Browse to locate the

downloaded GWT-Joomla.

e. Then click Upload and Install.

3

2

After installation, go to Extensions >

Templates. 4

Set the newly updated gwt-joomla as the

Default template.

5 Now check your website. If some of the

modules are misplaced or missing. Go

to the Extension > Modules to re-

positioned the modules.

6

user’s manual · 2019-09-18 · extensions > templates. 4 set gwt-joomla as the default...

Documents