Drupal-GWT Manual

Last modified by Voltz Jeturian on 2015/10/09 15:48

The Government Web Template for Drupal

Introduction

This document serves as guide in using the Government Web Template (GWT) in Drupal. This is not a comprehensive manual on Joomla!. It is assumed that the user has basic knowledge on Drupal 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

gwtdrupal_parts.png

Installing the Drupal Government Web Template

01.pngDownload the Drupal Government Web Template package at: http://i.gov.ph/ao39/government-web-template/

drupal_dl.png

And save the gwt-drupal package to your computer.

02.pngExtract the gwt-drupal package.

drupal_pkgextract.png

03.pngOpen the extracted gwt-drupal folder and copy the sites folder.

Copy_sites.png

04.pngPaste the sites folder to the root directory of the installed Drupal.

paste_sites.png

05.pngOn Drupal’s Admin Menu go to Appearance_btn.png
and click Enable and set default the gwt-drupal theme and disable the rest of the theme.

gwt_drupal_theme.png

06.pngThis will be the default look of the gwt-drupal theme website.

Drupal_theme_look_a.png


Theme Settings Configuration

01.pngWith the gwt-drupal as the default theme, go to Appearance > Settings > GWT Drupal.

Theme_settings.png

02.pngToggle Display

toggle_display.png

Logo: Toggle to display logo image or not. 

Site name: Toggle to display the site name or not. It can be edited through /admin/config/system/site-information. 

Site Slogan: Toggle to display the site slogan or not. Site slogan can be edited through /admin/config/system/site-information.

03.pngLogo Image Settings

logo_image_settings_unchecked.png

If “Use the default logo” is unchecked, you have the option to choose and upload an image logo. 

Note: The maximum height of the image is 100px.

04.pngShortcut Icon Settings

favicon_settings_unchecked.png

If “Use the default shortcut icon” is unchecked, you have the option to choose and upload a favicon. 

Tip: The icon must be 1:1 height: width proportionate.

05.pngGovernment Website Template (GWT) Settings

GWT-Template-Settings.png

Masthead background color: Changes the background color of the masthead.

Masthead Font Color: Changes the font color of the masthead.

  • It is recommended that masthead background should NOT be used as the logo of the agency.
  • The recommended height of the background image is 100px to 140px with a width of 1250px.

Banner Background Color: Changes the background color of the banner section.

Banner Font Color: Changes the font color of the masthead.

Banner Background Image: It allows to upload and apply background images on the banner area.

  • The recommended height of the background is 335px with a recommended maximum width of 1500px.

06.pngAccessibility Settings
Accessibility settings show predefined accessibility shortcut keys that allows the user to use these shortcut keys as accessibility link.

Accessibility Settings.png

Combination keys:

Chrome for Linux press (Alt+Shift+shortcut_key)

Chrome for Windows press (Alt+shortcut_key)

Firefox press (Alt+Shift+shortcut_key)

Internet Explorer press (Alt+Shift+shortcut_key) then press (enter)

Accessibility Statement (Combination + 0): Statement page that will show the available accessibility keys.

Home Page (Combination + 1): Accessibility key for redirecting to homepage.

Main Content (Combination + R): Shortcut for viewing the content section of the current page.

FAQ (Combination + 5): Shortcut for FAQ page.

Contact (Combination + C): Shortcut for contact page or form inquiries.

Feedback (Combination + K): Shortcut for feedback page.

Site Map (Combination + M): Shortcut for site map (footer agency) section of the page.

Search (Combination + S): Shortcut for search page.

07.pngAfter finishing configuring the Theme Settings, click Save_Configuration.png


Enabling and Configuring the iGov Module (GWT Helper Module)

The iGov GWT Theme module is a plugin that adds the Transparency Seal block and the automated Slider content banner slider blocks.

01.pngGo to Modules > List

Modules.png

02.pngEnable the GWT Helper Module

GWT_Helper_Module.png

Then click 02.png

03.pngGo to Structure > Blocks > GWT Drupal.

Blocks.png

04.pngUnder the Disabled blocks, there are three GWT dynamic blocks added: the Banner Image Slider, Philippine Standard Time, and Transparency Seal.

GWT-block.png

05.pngSet GWT: Transparency Seal’s Region either to the Left sidebar or the Right sidebar.

block_transparency.png

06.pngSet the GWT: Philippine Standard Time’s Region either to the Left sidebar or the Right sidebar.

block_pst.png

07.pngSet the GWT: Banner Slider’s Region to the Banner Slider.

block_bannerslider.png

08.pngAfter Setting the GWT-blocks, click Save Blocks.png


Configuring the Banner/Slider

01.pngGo to Content > Add Content > GWT Slides.

Create the GWTslides.png

02.pngThe Image Slider Settings:

slider settings.png

Slider Name: Name of the slider content.

Image Slider: The form to upload the image.

Caption: The caption or the content to be display on the bottom of the slider.

Link: A clickable link for the slider image.

Order Weight: The sorting order of the slider. Lower values shall be shown first.

03.pngThen Click Save.


Creating the Auxiliary Menu

01.pngAdd a new Menu by going to Structure > Menus > Add menu.

Auxiliary setting.png

Write the Title and Description (optional) for the Auxiliary menu
then click Save.

02.pngAfter saving, click on the Add Link to add Menu Links on the Auxiliary Menu.

auxiliary menu links.png

03.pngSetting the Auxiliary Menu Links.

Auxiliary menulink setting.png

Write the Menu Link Title.

Set the Path of the Menu Link.

Add a Description (optional).

Set the Auxiliary Menu as the Parent Link.

Set the Weight of the Menu Link.

Then click Save.

04.pngGo to Structure > Block and set the Auxiliary Menu’s Region to the Auxiliary Left.

Auciliary_block.png


Creating the Panel Top/Bottom and the Agency Footer

Create a block to create the panel top/bottom or the agency footer.

Go to Structure > Blocks > Add Block.

block_setting.png

Setup the block settings.

Write a Block Title (optional).

Write a Block Description.

Set the contents of the block.

In editing the Block Body, the Text format can be set to Filtered HTML, Full HTML or Plain Text.

Set the appropriate region: Panel Top/Bottom 1-4 or Agency Footer 1-4.

Then click Save Block.png


Updating GWT Theme

01.pngDownload the Drupal Government Web Template from: http://i.gov.ph/gwhs/government-web-template/

drupal_gwt_download.jpg

02.pnglogin to Drupal as an Administrator and go to Admin > Config > Development > Configuration and Put site into maintenance mode.

admin_maintenance_on.jpg

03.pngGo to the Drupal's root file system using file explorer or file manager. You should see directories like includes, misc, profiles, and sites.

drupal_root.jpg

04.pngUpload and extract the GWT-Drupal zip file to the root directory. This should update the files of the gwt_drupal theme and gwt_drupal_helper module.

gwt_drupal_files.jpg

05.pngA. Go to Admin > Development > Performance and Clear all cache. This is to clear and refresh the theme and modules hooks and file inclusion.

drupal_clear_cache.jpg

05.pngB. If you are using admin_menu module as your administration menu, you may simply hover to home icon, then click Flush all cache.

admin_menu_clear_cache.jpg

06.pngGo to Admin > Config > Development > Configuration and disable the maintenance mode.

admin_maintenance_off.jpg

Tags:
Created by Jay Nacional on 2015/05/19 14:11