Joomla-GWT Manual

Last modified by Jay Nacional on 2015/10/08 16:12

The Government Web Template for Joomla!

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


Parts of The Government Website Template

Parts_Joomla-GWT.png


Installing the Government Web Template in Joomla!

01.png Download the Joomla! Government Web Template from: http://i.gov.ph/ao39/government-web-template and save the compressed gwt-joomla file to your computer.

Joomla-download.png

02.png Log in to the Joomla administration page. Go to Extensions > Extension Manager.

Extension_manager.png

03.png Under Install, go to Upload Package File. Click Browse to find your saved gwt-joomla package file then click Upload & Install button.

upload&install.png

04.png After successful installation, go to Extensions > Template Manager.

Template_manager.png

05.png Set gwt-joomla as the Default template.

default.png

06.png This will be the default look of your website.

default website.png


Setting up the Template’s Theme Options

01.png Go to Extensions > Template Manager.

Template_manager.png

02.png From Styles choose the gwt-joomla.

Template_style.png

template_Theme_Options.png

Header Logo Upload: Where you upload your logo image for your website.

Header logo Position: The header logo position whether Left or Center.

Header background Color: The Background color of the header.

Header Background Image: Inserting a background image for the header.

Banner background logo: Background color of 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.

Sidebar Position: Position and number of sidebar either on the Left, Right, Both or No Sidebar.

PST Position: The default Philippine Standard Time of Joomla-GWT position either on the left, right or none.

PST height: The box height of the PST of Joomla-GWT.


Editing the Top Bar

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.

01.png Go to Extenstions > Module Manager

Module_manager.png

02.png Choose Main Menu on the list of modules.

Main Menu.png

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

Menu_position.png

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

MainMenu_output2.png


Adding Menu Items Under the Main Menu

01.png Go to Menus > Menu Manager > Add New Menu Item.

menus_menu_manager.png

02.png Type in the Menu Title.

Menu Title.png

03.png Click the Select button. A pop-up screen will appear.

Menu_item_type.png

04.png Click on Articles > Single Article.

popup_artcles.png

05.png Choose the article you want to display. Click the Select button to select an article. A pop-up screen will appear.

menu_select_aricle.png

06.png Select the article.

popup_select_artcle.png

07.png Click Save&New.png to create other menu links 

or click Save&Close.png if you’re done creating the menu items.

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

MainMenuItem_output.png


Adding an Auxiliary Menu (optional)

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.

01.png Go to Menu > Menu Manager > Add New Menu.

Menu_menumanager_newmenu.png

02.png Enter the following Menu Details

Title: Auxiliary Menu Menu
Type: Optional

Menu Details.png

Then Click Save&Close.png

03.png Now that your Auxiliary Menu is ready, create a module. Go to Extensions > Module Manager > New.png.

Module_manager.png

04.png Under the list of Select a Module Type find and choose Menu.

Select_module_type.png

05.png On the new page, type in the Title: Auxiliary Menu.

Title_Aux.png

06.png And on Position, choose Auxiliary Menu [auxiliary-menu].

position_aux_1.png 

then click Save&New.png

07.png The newly created module will now display in the Module Manager page. You can check the auxiliary menu has been added on the Home page.

aux_menu.png

08.png Adding a new menu item on the auxiliary menu.
Go to Menus > Auxiliary Menu > Add New Menu Item.

auxmenu_addnewitem.png

09.png 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.

Aux_MenuLocation.png

10.png Click Save&New.png to create other menu links or

Click Save&Close.png when you’re done creating the menu items.


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.

01.png To add a Breadcrumb, create a new menu under the Menu Manager.
Go to Menus > Menu Manager > Add New Menu.

Menu_menumanager_newmenu.png

02.png Enter the following Menu Details:
    Title: Breadcrumbs Menu
    Type: Optional_Breadcrumbs

breadcrumb_menudetail.png

03.png Then click Save&Close.png

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

04.png Go to Extensions > Module Manager.

Module_manager.png

05.pngThen select Breadcrumbs on the list of modules.

breadcrumb_module.png

06.png Inside the Breadcrumbs Module, set the position to Breadcrumbs [breadcrumbs].

breadcrumb_position.png

07.png Click Save&Close.png and your module has now been successfully saved.

Check the Breadcrumbs on your Homepage

breadcrumb_output.png


Editing the Masthead

Prepare your agency logo according to the specifications of the GWT. Recommended dimensions should be 100 pixels in height.

01.png To add your agency logo to the Masthead, go to Extensions > Template Manager.

Template_manager.png

02.png Choose gwt-joomla template.

Template_style.png

03.png Under Theme Options, upload and setup the Header with the desired settings.

ThemeOptions_header.png

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

logo_.png


Adding the Banner/Image Slider

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).

01.png Go to Content > Media Manager
and click upload.png

Content_mediamanager.png

02.png Browse the images to be uploaded then click Start Upload

browse&upload.png

03.png After uploading all the images for the banner, go to Extensions > Module Manager and click New.png

Module_manager.png

04.png On the list of Module Type choose Banners.

banner_module.png

05.png Type in the Title.

banner_settings.png

Set Show Title to Hide.

Set the Position to Banner [banner].

Then click Save&Close.png

06.png After setting up the Banner module go to Extensions > Template Manager

Template_manager.png

07.png and select the gwt-joomla.

Template_style.png

08.png Select the Image Slider tab and select the images for your slider.

image_slider_1.png

Select the images for the slider.

Write the necessary caption for the selected image.

Insert the link for the image.

After the Image Slider has been set up
click Save&Close.png


Creating the Top/Bottom Panels

01.png In creating the top and bottom panels, go to Extensions > Module Manager.

Module_manager.png

then click New.png

02.png Under list of Module Type, select Custom HTML.

module_customhtml.png

03.png Setting up the module panel.

module_Panel.png

Write in the Title of the panel.

Set Show Title to Hide or Show.

Set the appropriate Position, from Panel Top 1-4 to Panel Bottom 1-4.

Set the contents of your panel using the WYSIWYG editor.

Then click Save&Close.png


Creating the Agency Footer

01.png In creating the agency footer, go to Extensions > Module Manager.

Module_manager.png

then click New.png

02.png Under list of Module Type, select Custom HTML.

module_customhtml.png

03.png Setting up the module.

module_Panel.png

Write in the Title.

Set Show Title to Hide or Show.

Set the appropriate Position, from Footer 1-4.

Set the contents of your panel using the WYSIWYG editor.

Then click Save&Close.png

Updating your Template

01.png
Download the GWT-Joomla by going to https://github.com/iGovPhil/gwt-joomla/releases  and get the latest release.

02.png
Log in to your Joomla Backend or /administrator.

03.png
Install the template:

joomla-upload&install.png

a. Go to Extensions > Extension Manager and go to the install tab on the right.

b. Click on the Upload Package File tab

c. Click on the Browse and locate the GWT-Joomla you just downloaded.

d. Then Click Upload & Install.

04.png
After installation, go to Extensions > Template Manager.

Template_manager.png

05.png
Set the newly installed GWT-Joomla  as Default.

gwt-joomla-default.png

06.png
Now check your website. If some of the modules are misplaced or missing, go to the Extension > Module Manager and re-positioned the modules. 

Tags:
Created by Jay Nacional on 2015/05/13 10:01