Page 1
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.
Page 2
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 2/15
Table of Contents
Page 3
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 3/15
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
Page 4
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 4/15
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
Page 5
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 5/15
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.
Class Description Sample Code
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
Page 6
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 6/15
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
Class Description Sample Code
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
Class Description Sample Code
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 7
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 7/15
Page formatting
Class Description Sample Code
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
Page 8
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 8/15
Page 9
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 9/15
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;
Page 10
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 10/15
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;}
Page 11
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 11/15
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.
Class Description Sample Code
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;
Page 12
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 12/15
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
Class Description Sample Code
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;
Page 13
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 13/15
Hot Links
This area can be utilize for placing Hot links or links to other application running in the
organization.
Class Description Sample Code
TableFormat Formatting Table
normalText Formatting Fonts
Right Dropdawn Panel
Class Description Sample Code
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;
Page 14
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 14/15
Page 15
8/13/2019 Dubal Portal User Manual
http://slidepdf.com/reader/full/dubal-portal-user-manual 15/15
<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.