Dubal Portal User Manual

8/13/2019 Dubal Portal User Manual

http://slidepdf.com/reader/full/dubal-portal-user-manual 1/15

AGN: Dubal Skins Design

User’s Manual (v1.0)

Copyright 2004-Onwards Al Ghanem NetNo part of this publication may be reproduced, stored in a retrieval system, or transmitted inany form or by any means, electronic, mechanical, recording or otherwise, without the priorwritten permission of Al Ghanem Net.



Table of Contents



Introduction

The HR and Shipping application follows the same pattern of working; in this manual we

cover only Shipping Application. Main Component of Shipping and HR Applications

The Shipping and HR Application Consist of three main components, Header, Left

Manu’s and middle content Area. The left and middle content area covered by class

“leftbody” and “middlebody” Repectively which is setting up left , right and top margin

of page.

Header:

The Header which viewable in Top frame, the frame size for this is 34,*, Inheader there three icons System Guideline, Back.

Shipping Header:

Classes used in this portion

Class Description Sample Code

HeaderText This class isrepresenting menu text

FONT-WEIGHT: bolder;FONT-SIZE: 10px;COLOR: #ffffff;FONT-STYLE: normal;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

Top_Sys_Ico(SystemGuideline)

Icon #Top_Sys_Ico {width:34px; height:34px; z-index:2;padding:0px; BACKGROUND:

URL("../images/ico_sys.gif") 1 1 no-repeat;}

Top_back_Ico(Back)

Icon #Top_back_Ico {width:30px; height:30px; z-index:2; padding:0px; BACKGROUND:URL("../images/ico_back.gif") -2 -2 no-repeat; }

Top_close_Ico(Close)

Icon #Top_close_Ico {width:26px; height:26px; z-index:2; padding:0px; BACKGROUND:URL(../images/ico_close.gif) -4 -4 no-repeat; }

Javascript usedJava Scipt Function Description

MM_openBrWindow Opening System Guideline page

history.back() Take the user on to previuse pagedoClose() Closing Window



HR Admin Header:

Classes used in this Header

Class Description Sample CodeHeaderText This class is representing

menu textFONT-WEIGHT: bolder;FONT-SIZE: 10px;COLOR: #ffffff;FONT-STYLE: normal;FONT-FAMILY: Verdana, Arial, Helvetica,sans-serif;

Top_Sys_Ico(SystemGuideline)

Icon #Top_Sys_Ico {width:34px; height:34px; z-index:2;padding:0px; BACKGROUND:URL("../images/ico_sys.gif") 1 1 no-repeat;}

Top_back_Ico

(Back)

Icon #Top_back_Ico {

width:30px; height:30px; z-index:2;padding:0px; BACKGROUND:URL("../images/ico_back.gif") -2 -2 no-repeat;}

Top_close_Ico(Close)

Icon #Top_close_Ico {width:26px; height:26px; z-index:2;padding:0px; BACKGROUND:URL(../images/ico_close.gif) -4 -4 no-repeat;}

Javascript used

Java Script Function Description

MM_openBrWindow Opening System Guideline page

history.back() Take the user on to previuse page

doClose() Closing Window



Left Menus:

Left menus are shown in left frame, the size of this frame is 190,*. User can fold andunfold this left menu area by clicking a gray left and right arrow icon. A javascript

“showHideMenu()” function is working on this icon, the function description can be view

in script.js file.

For the ease of user, user can view and collapse left panel, to see how it is working

follows the code and instructions in XP_Menu.js file.


Left_Arrow(Show hide menuPannel)

When click on this iconmenu panelautomatically hide orshow, it helps the userto utilize full screensize

Left_Arrow IMG {background:url("../images/left_aero.gif") 0 0 no-repeat; }

leftbg1 Formatting menu topHeading Area

.leftbg1{

BACKGROUND-IMAGE:URL("../images/title_bg_hide.gif");}

LeftMainLink(Shipping Admin)

Represent menu textheading appearing inthe pannel

#Top_back_Ico {width:30px; height:30px; z-index:2; padding:0px; BACKGROUND:URL("../images/ico_back.gif") -2 -2 no-repeat; }

submenutable Set the formatting ofmenu table

FONT-WEIGHT: bolder;FONT-SIZE: 11px;FONT-COLOR: #7798C1;FONT-STYLE: normal;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;TEXT-DECORATION: none;

menuText Set the formatting ofmenu item in thepannel

FONT-WEIGHT: bolder;FONT-SIZE: 11px;COLOR: #7798C1;FONT-STYLE: normal;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;TEXT-DECORATION: none;

leftbg3 Formatting menu



pannel

leftbg4 Formatting menupannel

leftPannelDarkBG Seting dark backgroundof the menu pannel

BACKGROUND-COLOR: #7A91C6;

tableBg Setting background of

the whole area

#Top_close_Ico {width:26px; height:26px; z-

index:2; padding:0px; BACKGROUND:URL(../images/ico_close.gif) -4 -4 no-repeat; }

Java Script Function Description

showHideMenu() Function use for make visible and invisible menu pannel

Page Header


tblHeadingBg1 Setting background

tblHeadingTD Setting table TD curvearea

mainHeading Formatting Heading text FONT-WEIGHT: bold;FONT-SIZE: 13px;COLOR: #0964b7;FONT-FAMILY: Verdana, Helvetica, sans-serif;

Table formatting


TableFormat Format table withborder =1, you have togive border=1 with theclass

BORDER-RIGHT: #9bbfee 1px solid;BORDER-TOP: #9bbfee 1px solid;BORDER-LEFT: #9bbfee 1px solid;BORDER-BOTTOM: #9bbfee 1px solid;BACKGROUND-COLOR: #e7edf6;PADDING-LEFT: 4px;PADDING-RIGHT: 4px;BORDER-COLOR: #9bbfee;border-collapse: collapse;BORDER-WIDTH: 1px;

TableColText Setting column heading

tblHeadingBg2 Format table Headingrow



Page formatting


MiddleBody Format table withborder =1, you have togive border=1 with theclass

BORDER-RIGHT: #9bbfee 1px solid;BORDER-TOP: #9bbfee 1px solid;BORDER-LEFT: #9bbfee 1px solid;BORDER-BOTTOM: #9bbfee 1px solid;BACKGROUND-COLOR: #e7edf6;PADDING-LEFT: 4px;PADDING-RIGHT: 4px;BORDER-COLOR: #9bbfee;border-collapse: collapse;BORDER-WIDTH: 1px;

NormalText Set heading Text

HeadingText Format table Headingrow

Classes use for HTML form Objects

Object Name Class Effect

TextBox TextBox

CombBox LestStyle

Button Button

LIstBox LestStyle

Text Area TextBox

CheckBox CheckBox

Option Button CheckBox

Tables TableFormat

Table Headings TableColText

Table Column tblHeadingBg2

Page Body middleBody





Intranet Application

Intranet Header:

Search Box

Class Description

SignIn FONT-SIZE: 10px;COLOR: #677DAC;FONT-WEIGHT: bold;FONT-FAMILY: Verdana, Arial;TEXT-DECORATION: none;

SearchText FONT-SIZE: 12px;COLOR: #FFFFFF; FONT-WEIGHT: normal;FONT-FAMILY: Verdana, Arial, Trebuchet MS;TEXT-DECORATION: none;

TextBox BORDER-RIGHT: #9bbfee 1px solid;BORDER-TOP: #9bbfee 1px solid;BORDER-LEFT: #9bbfee 1px solid;BORDER-BOTTOM: #9bbfee 1px solid;FONT-SIZE: 12px;COLOR: #20407b;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;BACKGROUND-COLOR: #e7edf6;

Button BORDER-RIGHT: #9bbfee 2px solid;BORDER-TOP: #9bbfee 2px solid;BORDER-LEFT: #9bbfee 2px solid;BORDER-BOTTOM: #9bbfee 2px solid;FONT-SIZE: 11px;FONT-WEIGHT: bold;COLOR: #20407b;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;BACKGROUND-COLOR: #e7edf6;Cursor : HAND;



List of icons

User can increase and decrease icons list each, each icon is specified by its own class.

Class Description

topLink FONT-SIZE: 9px;COLOR: #FFFFFF; FONT-WEIGHT: bold;FONT-FAMILY: Verdana, Arial, Trebuchet MS;TEXT-DECORATION: none;

ICONBG .ICONBG {BACKGROUND-IMAGE:URL("../images/IconBg.jpg");}

icoHome (Home) #icoHome {width:52px; height:33px; z-index:2;padding:0px; background: url("../images/Home.jpg") 0 0no-repeat;}

icoDept (Department) #icoDept {width:47px; height:35px; z-index:2;padding:0px; background: url("../images/department.jpg")0 0 no-repeat;}

icoUtil (Utility) #icoUtil {width:46px; height:35px; z-index:2; padding:0px;background: url("../images/utilities.jpg") 0 0 no-repeat;}

icoView (View) #icoView {width:48px; height:35px; z-index:2;padding:0px; background: url("../images/Views.jpg") 0 0no-repeat;}

icoMyDubal (My Dubal) #icoMyDubal {width:41px; height:35px; z-index:2;padding:0px; background: url("../images/MyDubal.jpg") 0 0no-repeat;}

icoEmp (Employee Locator) #icoEmp {width:51px; height:35px; z-index:2; padding:0px;background: url("../images/EmployeeLocator.jpg") 0 0 no-repeat;}

topLink FONT-SIZE: 9px;COLOR: #FFFFFF; FONT-WEIGHT: bold;FONT-FAMILY: Verdana, Arial, Trebuchet MS;TEXT-DECORATION: none;

ICONBG .ICONBG {BACKGROUND-IMAGE:URL("../images/IconBg.jpg");}

icoHome (Home) #icoHome {width:52px; height:33px; z-index:2;padding:0px; background: url("../images/Home.jpg") 0 0no-repeat;}



Panels collapsing

When user click on down arrow, the panel automatically slides and show the options in

the panel, when user click on up arrow and the panel collapse automatically.


LinksFormat the links on thepage.

FONT-SIZE: 10px;COLOR: #20407B;FONT-WEIGHT: normal;FONT-FAMILY: Verdana, Arial, Trebuchet MS;TEXT-DECORATION: none;

SmallBHeadingFormat the heading ofpanel

FONT-SIZE: 12px;COLOR: #0964B7;FONT-WEIGHT: bold;FONT-FAMILY: Verdana, Arial, Trebuchet MS;TEXT-DECORATION: none;

ReadmoreFormat the read moretext

FONT-SIZE: 9px;COLOR: #FFFFFF; FONT-WEIGHT: normal;FONT-FAMILY: Verdana, Arial, Trebuchet MS;TEXT-DECORATION: none;



AP Calendar, Department and Utility List

This area is designed for the AP Calendar Application

This area designed for showing department list and utilities available for the employees

on the portal


SmallBHeading Setting background FONT-SIZE: 12px;COLOR: #ACA93E;FONT-WEIGHT: bold;FONT-FAMILY: Verdana, Arial, Trebuchet MS;TEXT-DECORATION: none;

lightbg Setting table TD curvearea

BACKGROUND-COLOR: #F7F4EC;



Hot Links

This area can be utilize for placing Hot links or links to other application running in the

organization.


TableFormat Formatting Table

normalText Formatting Fonts

Right Dropdawn Panel


SmallBHeading Setting background FONT-SIZE: 12px;

COLOR: #ACA93E;FONT-WEIGHT: bold;FONT-FAMILY: Verdana, Arial, Trebuchet MS;TEXT-DECORATION: none;

Readmore Setting table TD curvearea

FONT-SIZE: 9px;COLOR: #FFFFFF; FONT-WEIGHT: normal;FONT-FAMILY: Verdana, Arial, Trebuchet MS;TEXT-DECORATION: none;





<link href="skins/<%color%>/style.css" rel="stylesheet" type="text/css">

<script language="JavaScript" src="Skins/<%color%>blue/Script/XP_Menu.js" name="s1"></script>

Change or set the parameter to change <%color%> like blue, beige, gray etc.

Documents

Dubal Portal User Manual